success-criteria-levels

Posted on April 27, 2019 Posted by

success-criteria-levels

Success criteria levels


Remember the guidelines where divided into different success criteria? Nice. Those success criteria are classified into 3 levels.

  • Single-A (A): the lowest
  • Double-A (AA): the medium
  • Triple-A (AAA): the highest

They are similar to the WCAG 1.0 checkpoints’ priorities, but WCAG 2.0 stresses that all success criteria are important: Lowest level enables the access to the webpages, and highest level enables their usability.

To decide which level is each criterion, the WAI has established these questions:

  • Is this success criterion essential? If this criterion not met, the user agents (including assistive technology) cannot reproduce the webpage.
  • Is this success criterion applicable for every website, despite its content, type of content, technology used…?
  • Can the content creators be able to learn how to meet this success criterion? The WAI has establised one week or less to acquire these skills.
  • How will this success criterion limit the functions or “look & feel” of the page? This includes functionality, presentation, freedom of expression (everyone, including not tech-people should contribute), design or aesthetic.
  • Is there an alternative, indirect way if the success criterion is not met?

One great point on WCAG 2 is that they provide an official way of testing each criterion. We will see how can we test them later.

More info


success-criteria-levels

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-4-1-respect-the-code

Guideline 4.1: Respect the code


Maximize compatibility with current and future user agents, including assistive technologies.

Code must as clean as possible, as well as it must respect the standards. In this way, browsers will be able to render the page.

4.1.1 Parsing Level A

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Compulsory

  • Validate Web pages
  • Fully conform to specifications
  • Use HTML according to spec
  • Ensure that Web pages can be parsed by ensuring that opening and closing tags are used according to specification pr that Web pages are well-formed

Failures

  • Incorrect use of start and end tags or attribute markup
  • Duplicating values of type ID
  • Insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
  • Insufficient information in DOM to determine specific relationships in XML

4.1.2 Name, Role, Value Level A

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification.

Compulsory

If using a standard user interface component in a markup language
  • Use markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes using:
    • HTML form controls and links
    • Label elements to associate text labels with form controls
    • the title attribute of the frame and iframe elements
    • the title attribute to identify form controls when the label element cannot be used
    • HTML according to spec
    • Using functions of the Document Object Model (DOM) to add content to a page
If using script or code to re-purpose a standard user interface component in a markup language
  • Expose the names and roles, allowing user-settable properties to be directly set, and providing notification of changes using functions of the Document Object Model to add content to a page
If using a standard user interface component in a programming technology
  • Use the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes
If creating your own user interface component in a programming language
  • Create components using a technology that supports the accessibility API features of the platforms on which the user agents will be run to expose the names and roles, allow user-settable properties to be directly set, and provide notification of changes

Recommended

  • Providing labels for all form controls that do not have implicit labels

Failures

  • Using script to make div or span a user interface control in HTML.
  • Implementing custom controls that do not use an accessibility API for the technology, or do so incompletely
  • Not updating text alternatives when changes to non-text content occur
  • The association of label and user interface controls not being programmatically determinable
  • The focus state of a user interface component not being programmatically determinable or no notification of change of focus state available
  • Not providing names for each part of a multi-part form field
  • Using null alt on an image where the image is the only content in a link

More info


guideline-4-1-respect-the-code

Posted on April 27, 2019 Posted by Victoria Brooks

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


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

Posted on April 27, 2019 Posted by Victoria Brooks

focus-on-information-architecture

Guideline 2.4: Focus on Information Architecture


Provide ways to help users navigate, find content, and determine where they are

Finding the content and keeping track of our location are usually difficult tasks for people with disabilities, especially for those who use screen reader or cognitive disabilities. So these criteria are made for them.

Best practices

  • Limit the number of links per page
  • Provide mechanisms to navigate to different sections of the content of a Web page
  • Make links visually distinct

2.4.1 Bypass Blocks Level A

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Compulsory

Create links to skip blocks of repeated material

Choose one of these possibilities:

  • Add a link at the top of each page that goes directly to the main content area
  • Add a link at the beginning of a block of repeated content to go to the end of the block
  • Add links at the top of the page to each area of the content
Group blocks of repeated material in a way that can be skipped

Choose one of these possibilities:

  • Provide heading elements at the beginning of each section of content
  • Uee structural elements to group links
  • Use frame elements to group blocks of repeated material and the title attribute of the frame and iframe elements
  • Use an expandable and collapsible menu to bypass block of content

Recommended

  • Provide keyboard access to important links and form controls
  • Provide skip links to enhance page navigation
  • Provide access keys
  • Use accessibility supported technologies which allow structured navigation by user agents and assistive technologies
  • Position content based on structural markup

2.4.2 Page Titled Level A

Web pages have titles that describe topic or purpose

Compulsory

  • Provide descriptive titles for Web pages and provide a title to each web page

Recommended

  • Identify a Web page’s relationship to a larger collection of Web pages
  • Use a technology-specific technique
  • Identify the subject of the Web page
  • Use ARIA described by property to provide a descriptive, programmatically determined label
  • Provide a meaningful name for
  • Identify frames
  • Use unique titles for Web pages
  • Provide a descriptive top-level page heading

Failures

  • The title of the Web page don’t identify the contents like “Untitled Document” or similar;
  • Using he same title for different pages

2.4.3 Focus Order Level A

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Compulsory

  • Place the interactive elements in an order that follows sequences and relationships within the content
  • Give focus to elements in an order that follows sequences and relationships within the content. Choose one of these possibilities:
    • Create a logical tab order through links, form controls, and objects
    • Make the DOM order match the visual order
  • Change a Web page dynamically
    • Insert dynamic content into the Document Object Model immediately following its trigger element
    • Create Custom Dialogs in a Device Independent Way
    • Reorder page sections Use the Document Object Model

Recommended

  • Provide a highly visible highlighting mechanism for links or controls when they receive keyboard focus
  • Create alternative presentation orders

Failures

  • Using tabindex to create a tab order that does not preserve meaning and operability
  • Using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

2.4.4 Link Purpose (in context) Level A

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

Compulsory

  • Provide link text that describes the purpose of a link, a link for anchor elements or area elements of image maps
  • Allow the user to choose short or long link text by a control near the beginning of the Web page that changes the link text or changing the link text by scripting
  • Identify the purpose of a link using link text combined with the text of the enclosing sentence
  • Provide a supplemental description of the purpose of a link with the title or hiding a portion of the link text by css.
  • Identify the purpose of a link using link text combined with programmatically determined link context. Choose one of these options:
    • Enclosing list item
    • Enclosing paragraph
    • Enclosing table cell and associated table headings
    • Preceding heading element
    • In a nested list, link text combined with the parent list item under which the list is nested

Recommended

  • Combining adjacent image and text links for the same resource
  • Use ARIA described by property to provide a descriptive, programmatically determined label

Failures

  • Providing link context only in content that is not related to the link
  • Using null alt on an image where the image is the only content in a link

2.4.5 Multiple Ways Level AA

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process

Compulsory

Use 2 or more of these techniques

  • Provide links to navigate to related Web pages
  • Provide a Table of Contents
  • Provide a site map
  • Provide a search function to help users find content
  • Provide a list of links to all other Web pages
  • Linking to all of the pages on the site from the home page

Recommended

  • Use the link element and navigation tools
  • Include information about presentation modes in tables of contents and concept maps

2.4.6 Headings and Labels Level AA

Headings and labels describe topic or purpose

Compulsory

  • Provide descriptive headings
  • Provide descriptive labels

Recommended

  • Use unique section headings in a Web Page
  • Start section headings with unique information

2.4.7 Focus Visible Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Compulsory

  • Use user interface components that are highlighted by the user agent when they receive focus
  • Use CSS to change the presentation of a user interface component when it receives focus
  • Use the default focus indicator for the platform so that high visibility default focus indicators will carry over
  • Use an author-supplied, highly visible focus indicator
  • Use script to change the background color or border of the element with focus (Scripting)

Recommended

  • Highlight a link or control when the mouse hovers over it
  • Provide a highly visible highlighting mechanism for links or controls when they receive keyboard focus

Failures

  • using script to remove focus when focus is received
  • Styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

2.4.8 Location Level AAA

Information about the user’s location within a set of Web pages is available.

Compulsory

  • Provide a breadcrumb trail.
  • Provide a site map.
  • Indicate current location within navigation bars
  • Identify a Web page’s relationship to a larger collection of Web pages with the link element and navigation tools

Recommended

  • Provide a link to the home page or main page
  • Provide an easy-to-read version of information about the organization of a set of Web pages
  • Provide a sign language version of information about the organization of a set of Web pages
  • Provide an easy-to-read summary at the beginning of each section of content

2.4.9 Link Purpose (only the link) Level AAA

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Compulsory

  • Provide link text that describes the purpose of a link for anchor elements or text alternatives for the area elements of image maps
  • Allow the user to choose short or long link text by a control near the beginning of the Web page that changes the link text or using scripts to change the link text
  • Provide a supplemental description of the purpose of a link hiding a portion of the link text with CSS

Recommended

  • Combine adjacent image and text links for the same resource
  • Support link text with the title attribute

Failures

  • Using a non-specific link such as “click here” or “more” without a mechanism to change the link text to specific text.
  • Using null alt on an image where the image is the only content in a link

2.4.10 Section Headings Level AAA

Section headings are used to organize the content.
“Heading” is used in its general sense and includes titles and other ways to add a heading to different types of content.
This success criterion covers sections within writing, not user interface components. User Interface components are covered under Success Criterion 4.1.2.

Compulsory

  • Organize a page using headings

Recommended

  • Use the ‘live’ property to mark live regions
  • Provide mechanisms to navigate to different sections of the content of a Web page

More info


focus-on-information-architecture

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-2-3-be-careful-with-flashing-visual-content

Guideline 2.3: Be careful with flashing visual content


Do not design content in a way that is known to cause seizures.

Three-flash-in-a-second is the lower rate recommended to show flash content for people who suffer from seizures due to photosensitivity, specially for red lights. But still there are more sensitive people that react to lower rates, so the recommendation is to eliminate this type of visual content.
What is the difference between “blinking” and “fashing”?

blinking
content that distracts, and can be used for a short time as long as it stops or can be stopped by the user. If blinking occurs faster than 3 per second, it should be considered a flash.
flashing
content faster than 3 per second, and large and bright enough to cause a seizure The chance to turn the flash off is not an option since the seizure could occur faster than most users could turn it off.

How do you know if your content is flashing or blinking? Try the Photosensitive Epilepsy Analysis Tool.

In order to not interfere with other content of the webpage, these criteria applies for the whole page.

2.3.1 Three Flashes or Below Threshold Level A

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

Compulsory

  • Ensure that no component of the content flashes more than three times in any 1-second period
  • Keep the flashing area small enough
  • Use a tool to ensure that content does not violate the general flash threshold or red flash threshold

Recommended

  • Reduce contrast for any flashing content
  • Avoid fully saturated reds for any flashing content
  • Reduce the number of flashes even if they do not violate thresholds
  • Provide a mechanism to suppress any flashing content before it begins
  • Slow down live material to avoid rapid flashes (as in flashbulbs)
  • Freeze the image momentarily if 3 flashes within one second are detected
  • Drop the contrast ratio if 3 flashes within one second are detected

2.3.2 Three Flashes Level AAA

Web pages do not contain anything that flashes more than three times in any one second period

Compulsory

  • Ensure that no component of the content flashes more than three times in any 1-second period

Recommended

They are the same techniques as 2.3.1

More info


guideline-2-3-be-careful-with-flashing-visual-content

Posted on April 27, 2019 Posted by Victoria Brooks

dont-hurry-up-anyone

Guideline 2.2: Don’t hurry up anyone


Provide users enough time to read and use content.

Imagine you are reading a webpage and, in the middle of that proccess, the page reloads and changes, so you can not finish the reading of the formerly page. Everybody needs different time to complete tasks, and this time is usually higher on the elderly and users with disabilities.

So this guideline is about eliminating time constraints or providing users enough additional time to allow them to complete their tasks.

2.2.1 Timing Adjustable Level A

For each time limit that is set by the content, at least one of the following is true:

  • Turn off: The user is allowed to turn off the time limit before encountering it;
  • Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting;
  • Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, “press the space bar”), and the user is allowed to extend the time limit at least ten times;
  • Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible;
  • Essential Exception: The time limit is essential and extending it would invalidate the activity;
  • 20 Hour Exception: The time limit is longer than 20 hours.

This success criterion helps ensure that users can complete tasks without unexpected changes in content or context that are a result of a time limit. This success criterion should be considered in conjunction with Success Criterion 3.2.1, which puts limits on changes of content or context as a result of user action.

Compulsory

If there are session time limits:
  • Provide a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit
  • Provide a way for the user to turn the time limit off
If a time limit is controlled by a script on the page:
  • Provide a way for the user to turn the time limit off
  • Provide a means to set the time limit to 10 times the default time limit
  • Providing a script that warns the user a time limit is about to expire AND allow the user to extend the default time limit
If there are time limits on reading:
  • Allow the content to be paused and restarted from where it was paused
  • Provide a way for the user to turn the time limit off
  • Use script to scroll content, and provide a mechanism to pause it
  • Provide a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area

Recommended

  • Use a script to poll the server and notify a user if a time limit is present

Failures

  • Using meta redirect with a time limit
  • Using meta refresh with a time-out
  • Using server-side techniques to automatically redirect pages after a time-out
  • Including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

2.2.2 Pause, Stop, Hide Level A

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Notes:

  1. For requirements related to flickering or flashing content, refer to Guideline 2.3.
  2. Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion.
  3. Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.
  4. An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.

Compulsory

  • Allowing the content to be paused and restarted from where it was paused
  • Use script to scroll content, and providing a mechanism to pause it
  • Creatie content that blinks for less than 5 seconds
  • Use a technology to include blinking content that can be turned off via the user agent
  • Set animated gif images to stop blinking after n cycles (within 5 seconds)
  • Use scripts to control blinking and stop it in five seconds or less (Scripting)
  • Use a control in the Web page that stops moving, blinking, or auto-updating content
  • Provide a link, button, or other mechanism that reloads the page without any blinking content

Recommended

  • Provide a mechanism to stop all content that blinks within a Web page
  • Provide the user with a means to stop moving content even if it stops automatically within 5 seconds

Failures

  • including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content
  • using the blink element
  • using text-decoration:blink without a mechanism to stop it in less than five seconds
  • a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or les
  • an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than five seconds

2.2.3 No Timing Level AAA

Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events.

Compulsory

  • Allow users to complete an activity without any time limit

2.2.4 Interruptions Level AAA

Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.

Compulsory

  • Provide a mechanism to postpone any updating of content
  • Provide a mechanism to request an update of the content instead of updating automatically
  • Use scripts to make nonessential alerts optional (Scripting)

Failures

  • Using meta redirect with a time limit
  • Using meta refresh with a time-out

2.2.5 Re-authenticating Level AAA

When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.

Compulsory

Provide options to continue without loss of data:

  • Saving data so that it can be used after a user re-authenticates; or
  • Encoding user data as hidden or encrypted data in a re-authorization page

Failures

  • Having a session time limit without a mechanism for saving user’s input and re-establishing that information upon re-authentication

More info


dont-hurry-up-anyone

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-21-dont-forget-users-without-a-pointer

Guideline 2.1: Don’t forget users without a pointer


Make all functionality available from a keyboard

When a functionality can be achieved using only the keyboard, other input devices can be used. But, if you use only a mouse or a speech input, assistive technologies will find it difficult to operate it.

Obviously, you can use another input devices to complement the keyboard, and even you are encouraged to do it, but don’t forget that every feature must be operable by a keyboard input.

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.

The exception is about the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.

This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.

Compulsory

  • Ensure keyboard control by using HTML form controls and links
  • Provide keyboard-triggered event handlers using both keyboard and other device-specific functions, making actions keyboard accessible by using the onclick event of anchors and buttons, or using redundant keyboard and mouse event handlers

Recommended

  • Use XHTML role, state, and value attributes if repurposing static elements as interactive user interface components and add keyboard-accessible actions to static HTML elements
  • Provide keyboard shortcuts to important links and form controls
  • Use unique letter combinations to begin each item of a list
  • Choose the most abstract event handler
  • Use the onactivate event
  • Avoid use of common user-agent keyboard commands for other purposes

Failures

  • using only pointing-device-specific event handlers (including gesture) for a function
  • using script to remove focus when focus is received
  • using scripting events to emulate links in a way that is not programmatically determinable

2.1.2 No Keyboard Trap Level A

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion.

Compulsory

  • Ensure that users are not trapped in content

Failures

  • Combining multiple content formats in a way that traps users inside one format type

2.1.3 Keyboard (without exception) Level AAA

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

Compulsory

This is the same as Success Criterion 2.1.1, but no exceptions are allowed. Just follow techniques for it. If there is a requirement for analog, time-dependent input, then it is not possible to meet this Criterion.

More info


guideline-21-dont-forget-users-without-a-pointer

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-14-separate-background-from-foreground

Guideline 1.4: Separate background from foreground


Make it easier for users to see and hear content including separating foreground from background.

This guideline is about making the default presentation as easy to perceive as possible to people with disabilities: it’s about contrast, not only the ‘colors’ for visual content, but also for the ‘voices’ on audio content.

Best practices

  • Use readable fonts.
  • Text in images should be at least 14 points and has good contrast.
  • Links and controls must be highlighted when they receive keyboard focus.

1.4.1 Use of Color Level A

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Compulsory

If the color of particular words, backgrounds, or other content is used to indicate information:
  • Ensure that information conveyed by color differences is also available in text
  • Include a text cue whenever color cues are used
  • Ensure that additional visual cues are available when text color differences are used to convey information
  • Use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them (We will see how to calcultate this ratio
If the color is used within an image to convey information:
  • Use color and pattern
  • Ensure that information conveyed by color differences is also available in text

Recommended

  • Convey information redundantly using color
  • Use CSS to change the presentation of a user interface component when it receives focus

Failures

  • Having a text alternative that does not include information that is conveyed by color differences in the image
  • Creating links that are not visually evident without color vision
  • Identifying required or error fields using color differences only

1.4.2 Audio Control Level A

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Compulsory

  • Play a sound that turns off automatically within three seconds
  • Provide a control near the beginning of the Web page that turns off sounds that play automatically
  • Play sounds only on user request

Recommended

  • Provide a site-wide preference to turn off audio in addition to providing a control near the top of the Web page that turns off sounds that play automatically

Failures

  • Playing a sound longer than 3 seconds where there is no mechanism to turn it off

1.4.3 Minimum Contrast Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Read also about the enhanced contrast (Level AAA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AA
    Less than 18 points Normal 4.5:1
    Bigger than 18 points Normal 3:1
    Less than 14 points Bold 4.5:1
    Bigger than 14 points Bold 3:1

Recommended

  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Use a higher contrast value for text that is over a patterned background
  • Use Unicode text and style sheets instead of images of text
  • Use a higher contrast values for lines in diagrams
  • Use greater contrast level for red-black text/background combinations
  • Use colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark
  • Use a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast
  • Make icons using simple line drawings that meet the contrast provisions for text
  • Provide sufficient color contrast in graphs and charts
  • Use a 3:1 contrast ratio or higher as the default presentation
  • Provide sufficient color contrast for empty text fields

Failures

  • specifying foreground colors without specifying background colors or vice versa
  • using background images that do not provide sufficient contrast with foreground text (or images of text)

1.4.4 Resize text Level AA

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Compulsory

  • Use a technology that has commonly-available user agents that support zoom
  • Ensure that text containers resize when the text resizes AND use measurements that are relative to other measurements in the content by using em units for text containers and percent, named or em units for font sizes. Also, you can resize text containers by liquid layouts or calculating calculate size and position in a way that scales with text size
  • Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
  • Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize

Recommended

  • Provide large fonts by default
  • Use page-percent for container sizes
  • Avoid scaling font sizes smaller than the user-agent default
  • Avoid justified text
  • Provide sufficient inter-line and inter-column spacing
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Avoid the use of text in raster images
  • Use server-side scripts to resize images of text
  • Scale form elements which contain text
  • Ensure that text in raster images is at least 18pt
  • Scale text down to 50%
  • Use relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
  • Use CSS to control visual presentation of text
  • Provide a mechanism to allow captions to be enlarged

Failures

  • If you resize visually rendered text up to 200% causes the text, image or controls are clipped, truncated or obscured
  • If text-based form controls do not resize when visually rendered text is resized up to 200%

1.4.5 Images of Text Level AA

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

  • Customizable: The image of text can be visually customized to the user’s requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed, i.e. logotypes (text that is part of a logo or brand name) .

Read also about the images of text without exceptions(Level AAA)

Compulsory

  • Use CSS to control visual presentation of text
  • Use CSS to replace text with images of text and providing user interface controls to switch
  • Separate information and structure from presentation to enable different presentations

Recommended

  • Identify informative non-text content
  • Use server-side scripts to resize images of text
  • Use percent, named or em units for font sizes
  • Use CSS letter-spacing to control spacing within a word
  • Position content based on structural markup
  • Avoid applying text styling to text characters within a word

1.4.6 Enhanced Contrast Level AAA

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Read also about the minimum contrast (Level AA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AAA
    Less than 18 points Normal 7:1
    Bigger than 18 points Normal 4.5:1
    Less than 14 points Bold 7:1
    Bigger than 14 points Bold 4.5:1

Recommended

Follow the same recommendations as in the minimum contrast success criteria.

1.4.7 Low or No Background Audio Level AAA

Low or No Background Audio: For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:

  • No Background: The audio does not contain background sounds.
  • Turn Off: The background sounds can be turned off.
  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.

Per the definition of “decibel,” background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

Compulsory

  • Mix audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content

Recommended

  • Providing a way for users to adjust auditory levels of foreground and background sound independently

1.4.8 Visual Presentation Level AAA

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

Compulsory

Ensure foreground and background colors can be selected by the user
  • Specify text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content
  • Specify borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors
  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Don’t specify background color, nor specifying text color, and not use technology features that change those defaults
  • Providing a multi color selection tool on the page for foreground and background colors
Ensure width is no more than 80 characters or glyphs (40 if they are Chinese, Japanese and Korean characters)
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
Ensure text is not justified (aligned to both the left and the right margins)
  • Specify alignment either to the left OR right in CSS
  • Provide a mechanism to remove full justification of text
  • Align text on only one side
Ensure line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
  • Provide a button on the page to increase line spaces and paragraph spaces
  • Specify line spacing in CSS
Ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Use liquid layout and measurements that are relative to other measurements in the content by using percent, named font or em units for font sizes or percentage values in CSS for container sizes or calculating size and position in a way that scales with text size (Scripting)
  • Provide options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

Recommended

  • Use a hover effect to highlight a paragraph, list items, or table cells
  • Present text in sans serif font or providing a mechanism to achieve this
  • Use vertical (bulleted or numbered) lists rather than inline lists
  • Use upper and lower case according to the spelling conventions of the text language
  • Provide large fonts by default
  • Avoid the use of text in raster images
  • Avoid scaling font sizes smaller than the user-agent default
  • Provid sufficient inter-column spacing
  • Avoid centrally aligned text
  • Avoid chunks of italic text
  • Avoid overuse of different styles on individual pages and in sites
  • Make links visually distinct
  • Provide expandable bullets
  • Show/hide bullet points
  • Put an em-space or two spaces after sentences

Failures

  • Specifying foreground colors without specifying background colors or vice versa
  • Using text that is justified (aligned to both the left and the right margins)

1.4.9 Images of Text without exceptions Level AAA

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed, i.e. logotypes (text that is part of a logo or brand name).

Read also about the images of text without exceptions(Level AA)

More info