guideline-3-3-errare-humanum-est

Posted on April 27, 2019 Posted by

guideline-3-3-errare-humanum-est

Guideline 3.3: Errare humanum est


Help users avoid and correct mistakes.

As we are going to make mistakes, web pages must prevent them and help us to recover from those errors.

3.3.1 Error Identification Level A

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Compulsory

If a form contains fields for which information from the user is mandatory.
  • Provide text descriptions to identify required fields that were not completed
  • Provide client-side validation and alert
If information provided by the user is required to be in a specific data format or of certain values.
  • Provide a text description when the user provides information that is not in the list of allowed values
  • Provide a text description when user input falls outside the required format or values
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM

Recommended

  • Create a mechanism that allows users to jump to errors
  • Validate form submissions on the server
  • Re-display a form with a summary of errors
  • Provide error notification as the user enters information
  • Assist the user in making corrections by providing links to each error
  • Highlight or visually emphasize errors where they occur
  • Complement text with non-text content when reporting errors
  • Provide success feedback when data is submitted successfully

3.3.2 Labels or instructions Level A

Labels or instructions are provided when content requires user input.

Compulsory

  • Provide descriptive labels and one of this techniques:
    • Provide expected data format and example
    • Provide text instructions at the beginning of a form or set of fields that describes the necessary input
    • Place labels to maximize predictability of relationships
    • Provide text descriptions to identify required fields that were not completed
  • Use label elements to associate text labels with form controls
  • Provide a description for groups of form controls using fieldset and legend elements
  • Use the title attribute to identify form controls when the label element cannot be used
  • Use an adjacent button to label the purpose of a field

Recommended

  • Describe what will happen before a change to a form control that causes a change of context to occur is made
  • Use Accessible Rich Internet Application describedby property to provide a descriptive, programmatically determined label
  • Use Accessible Rich Internet Applications to programmatically identify form fields as required
  • Provide linear form design and grouping similar items

Failures

  • Visually formatting a set of phone number fields but not including a text label

3.3.3 Error Suggestion Level AA

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Compulsory

If a mandatory field contains no information
  • Provide text descriptions to identify required fields that were not completed
If information for a field is required to be in a specific data format
  • Provide a text description when user input falls outside the required format or values
  • Provide suggested correction text
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM
Information provided by the user is required to be one of a limited set of values
  • Provide a text description when the user provides information that is not in the list of allowed values
  • Provide suggested correction text
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM

Recommended

Information to prevent errors
  • Identify required fields with the “required” property
  • Identify valid range information with the “valuemin” and “valuemax” properties
  • Provide “correct examples” for data and data formats as initial text in mandatory form fields
Validate the form
  • Accept input data in a variety of formats
  • Validate form submissions on the server
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM
  • Call a function from the submit action of a form to perform client side validation
  • Provide success feedback when data is submitted successfully
Report the errors
  • Provide a text description that contains information about the number of input errors, suggestions for corrections to each item, and instructions on how to proceed
  • Provide a text description that contains suggestions for correction as the first item (or one of the first items) of content, or emphasizing this information in the content
  • Create a mechanism that allows users to jump to errors
  • Display errors and suggestions in the context of the original form (for example, re-displaying a form where input errors and suggestions for correction are highlighted and displayed in the context of the original form)
  • Provide links to suggested corrections close to the form fields, or provide the suggested correction text itself directly on the web page next to the form fields
  • Make error messages easy to understand and distinguishable from other text in the Web page
  • When mandatory information has not been provided, including descriptions or examples of correct information in addition to identifying the field as mandatory
  • Repeat and emphasize suggestions for correcting each input error in the context of its form field
  • Provide a way for the user to skip from each item in a list of suggestions to its corresponding form field
  • Provide additional contextual help for the form field requiring change

3.3.4 Error Prevention (Legal, financial, or other important data) Level AA

For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Compulsory

If an application causes a legal transaction to occur, such as making a purchase or submitting an income tax return
  • Provide a stated period of time after submission of the form when the order can be updated or canceled by the user
  • Provide the ability for the user to review and correct answers before submitting
  • Provide a checkbox in addition to a submit button
If an action causes information to be deleted:
  • Provide the ability to recover deleted information
  • Request confirmation to continue with selected action
  • Provide a checkbox in addition to a submit button
If the Web page includes a testing application
  • Provide the ability for the user to review and correct answers before submitting
  • Request confirmation to continue with selected action

Recommended

  • Tell the user what irreversible action is about to happen
  • Provide client-side validation and alert
  • Place focus in the field containing the error
  • Avoid use of the same words or letter combinations to begin each item of a drop-down list
  • Provide success feedback when data is submitted successfully

3.3.5 Help Level AAA

Context-sensitive help is available.

Compulsory

If a form requires text input
  • Provide a help link on every Web page
  • Provide help by an assistant in the Web page
  • Provide spell checking and suggestions for text input
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input
If a form requires text input in an expected data format
  • Provide expected data format and example
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input

Recommended

  • Use the title attribute to provide context-sensitive help
  • Checking byte of character and auto-converting to expected byte for text input if applicable

3.3.6 Error Prevention (all types of data) Level AAA

For Web pages that require the user to submit information, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Compulsory

  • Follow the mandatory techniques for Success Criterion 3.3.4 for all forms that require the user to submit information

More info


guideline-3-3-errare-humanum-est

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-3-2-be-careful-with-re-invent-the-navigation-standards

Guideline 3.2: Be careful with re-invent the navigation standards


Make Web pages appear and operate in predictable ways.

If a page is continuously refreshing, changing contents and context, opening new windows without user control, may confuse users with and without dissabilities. Being consistent and coherent with the layouts and will allow everybody access the information.

Best Practices

  • Use and place (well) labels to maximize predictability of relationships

3.2.1 On Focus Level A

When any component receives focus, it does not initiate a change of context

Compulsory

  • Use “activate” rather than “focus” as a trigger for changes of context. Note we are talking about change of context, not about change of content

Recommended

  • Don’t cause persistent changes of state or value when a component receives focus, or provide an alternate means to reset any changes
  • Open new windows only when best from an accessibility perspective
  • Give users advanced warning when opening a new window.

Failures

  • Opening a new window as soon as a new page is loaded
  • Using script to remove focus when focus is received

3.2.2 On Input Level A

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

Compulsory

  • Provide a submit button to initiate a change of context using a technology-specific technique like a submit button or a button with a select element to perform an action
  • Describe what will happen before a change to a form control that causes a change of context to occur is made

Recommended

  • Give users advanced warning when opening a new window

Failures

  • Automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value
  • Launching a new window without prior warning when the status of a radio button, check box or select list is changed
  • Providing instruction material about the change of context by change of setting in a user interface element at a location that users may bypass

3.2.3 Consistent navigation Level AA

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Compulsory

  • Present repeated components in the same relative order each time they appear

Recommended

  • Use templates to ensure consistency across multiple Web pages
  • Create layout, positioning, layering, and alignment

Failures

  • Presenting navigation links in a different relative order on different pages

3.2.4 Consistent Identification Level AA

Components that have the same functionality within a set of Web pages are identified consistently.

Compulsory

Please note that “Consistent” is not the same as “identical”.

Recommended

  • Ensuring that the text alternative conveys the function of the component and what will happen when the user activates it
  • Use the same non-text content for a given function whenever possible

Failures

  • Using two different labels for the same function on different Web pages within a set of Web pages

3.2.5 Change on Request Level AAA

Changes of context are initiated only by user request or a mechanism is available to turn off such changes.

Compulsory

  • If the web page allows automatic updates, provide a mechanism to request an update of the content instead of updating automatically.
  • If automatic redirects are possible, do it with the server side instead of on the client side; or use an instant client-side redirect using meta refresh to create an instant client-side redirect.
  • If the Web page uses pop-up windows, include pop-up windows using the target attribute to open a new window on user request and indicating this in link text; or using progressive enhancement to open new windows on user request.
  • If a select element uses an onchange event, it does not change the context.

Recommended

  • Open new windows by providing normal hyperlinks without the target attribute, because many user agents allow users to open links in another window or tab.
  • Open new windows only when best from an accessibility perspective

Failures

  • Launching a new window when a user enters text into an input field
  • Completing change of main content through an automatic update that the user cannot disable from within the content
  • Changing the context when the user removes focus from a form element
  • Opening windows that are not requested by the user
  • Using meta refresh with a time-out

More info


guideline-3-2-be-careful-with-re-invent-the-navigation-standards

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-3-1-easy-to-read-please

Guideline 3.1: Easy to read, please


Make text content readable and understandable

Content should be read not only by assistive technology, but also by users, who can experience or can’t experience it in many different ways: visual, auditory, both visual and auditory. Complex texts and content can be difficult to be read, both for the assistive technology, but also by users. So this guideline is intented to editors, to prepare the text in a so everybody can understand it.

Best practices

Write it simple

  • Use the clearest and simplest language appropriate for the content
  • Use images, illustrations, video, audio, or symbols to clarify meaning
  • Provide practical examples to clarify content
  • Avoid unusual foreign words
  • References to a heading or a title include the full text of the heading or the title
  • Provide sign language interpretation for all content, or at least the main information that must be
    understood in order to use the content, including about how to contact the webmaster

Design it simple

  • Avoid centrally aligned text
  • Avoid text that is fully justified (to both left and right margins) in a way that causes
    poor spacing between words or characters
  • Use left-justified text for languages that are written left to right and right-justified
    text for languages that are written right-to-left
  • Limit text column width
  • Avoid chunks of italic text
  • Use a light pastel background rather than a white background behind black text
  • Avoid overuse of different styles on individual pages and in sites
  • Make links visually distinct
  • Provide easy-to-read versions of basic information about a set of Web pages, including
    information about how to contact the Webmaster
  • Use upper and lower case according to the spelling rules of the text language

3.1.1 Language of the page Level A

The default human language of each Web page can be programmatically determined.

Compulsory

  • Identify default human language(s) using language attributes on the html element

Recommended

  • Specifying the default language in the HTTP header
  • Use http or the Content-Language meta tag for metadata

3.1.2 Language of parts of the page Level AA

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Compulsory

  • Identify changes in human languages using language attributes to identify changes in the human language

Recommended

  • Make text that is not in the default human language of the Web page visually distinct
  • Give the names of any languages used in foreign passages or phrases
  • Provide language markup on proper names to facilitate correct pronunciation by screen readers

3.1.3 Unusual words Level AAA

A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

Compulsory

If the unusual word or phrase has a unique meaning within the Web page
  • Provide the definition for its first occurrence with a glossary linked, a definition list, or the dfn element; or
  • Provide the definition for each occurrence by linking to definitions (use definition lists or the link element to link to a glossary), providing a glossary or a function to search an online dictionary.
If the unusual word or phrase means different things within the same Web page
  • Provide the definition for each occurrence by linking to definitions (use definition lists or the the link element to link to a glossary) or using inline definitions (use the dfn element to identify the defining instance of a word)

Recommended

  • Use markup and visual formatting to help users recognize words that have special meaning
  • Provide a voice-enabled dictionary search so that users who have difficulty typing or spelling can speak the word whose definition they need
  • Provide a sign language dictionary to help users who are deaf find the necessary definitions
  • Provide a mechanism for finding definitions for all words in text content
  • Provide a mechanism to determine the meaning of each word or phrase in text content
  • Avoid unusual foreign words
  • Use a series of dictionaries in cascading fashion to provide meanings

3.1.4 Abbreviations Level AAA

A mechanism for identifying the expanded form or meaning of abbreviations is available.

Compulsory

If the abbreviation has only one meaning within the Web page:
  • Provide the expansion or explanation for its first occurrence by providing the abbreviation immediately following the expanded form, linking to definitions or using the abbr and acronym elements.
  • Provide the expansion or explanation for each occurrence by linking to definitions, using the link element to link to a glossary, or providing a glossary, a function to search an online dictionary or definitions for abbreviations by using the abbr and acronym elements.
If the abbreviation means different things within the same Web page
  • Provide the expansion or explanation for each occurrence by linking to definitions or using the abbr and acronym elements

Recommended

  • Use unique abbreviations in a Web page
  • Use visual formatting to help users recognize abbreviations
  • Provide access to a talking dictionary to support users who might have difficulty decoding written definitions
  • Provide a voice-enabled dictionary search so that users who have difficulty typing or spelling can speak the word whose definition they need

3.1.5 Reading LevelLevel AAA

When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles; supplemental content (or a version that does not require reading ability more advanced than the lower secondary education level) is available.

Compulsory

  • Provide a text summary that requires reading ability less advanced than the upper secondary education level
  • Provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes
  • Provide a spoken version of the text
  • Make the text easier to read
  • Provide sign language versions of information, ideas, and processes that must be understood in order to use the content

Recommended

Be clear
  • Use the clearest and simplest language appropriate for the content
  • Provide summaries for different sections of text
  • Choose commonly used words instead of complex words or phrases if it does not change the meaning of the sentence
  • Provide a clear representational image on the site’s homepage
  • Identify clearly which content has been optimized for easy reading
  • Text for navigational and landing pages that requires reading ability that is less advanced than the lower secondary education level
  • Text for interior pages that requires reading ability at the lower secondary education level
Use sentences that…
  • contain no redundant words, that is, words that do not change the meaning of the sentence
  • contain no more than two conjunctions
  • are no longer than the typical accepted length for secondary education (Note: In English that is 25 words)
Metadata
  • Include content summaries in metadata
  • Use metadata to associate alternatives at different reading levels.
  • Make metadata viewable by humans
  • Use RDF to associate supplements with primary content
  • Use the Dublin Core, ISO AfA or IMS accessibility elements to associate text content with text, graphical, or spoken supplements

3.1.6 Pronunciation Level AAA

A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.

Compulsory

  • Provide the pronunciation immediately following the word
  • Link to pronunciations
  • Provide a glossary that includes pronunciation information for words that have a unique pronunciation in the content and have meaning that depends on pronunciation
  • Provide pronunciation information using the ruby element or standard diacritical marks that can be turned off

Recommended

  • Providing pronunciations in a sound file, so that users can listen to the pronunciations of the word
  • Providing a mechanism for finding pronunciations for all foreign words in text content
  • Providing a mechanism to determine the pronunciations of each word or phrase in text content

More info