WCAG 2.1 Checklist

Maxability’s WCAG 2.1 checklist is a simplified version of original WCAG 2.1 guidelines on W3C website. For the readers to easily understand and implement digital accessibility. This WCAG 2.1 checklist may be useful. This document no way supersedes original WCAG 2.1 guidelines.

Since WCAG 2.1 guidelines are not technology specific, we tried to explain the techniques in this WCAG 2.1 checklist in more generic terms. This means each technology will have a specific way of testing or making an element accessible. Ensure that the technology specific technique is used to fix the problem. The summary column gives a brief understanding of each success criteria. Navigate to the link under read more column for detailed explanation.

Bookmark this page, It will be helpful to have the WCAG 2.1 checklist handy.

This document is split into two sections. Jump directly to:

We hope that this WCAG 2.1 checklist helps in making the digital content more accessible. For any feedback or suggestion drop us a note from our Contact Us form.

WCAG 2.1 Level A Check-points

Principle 1: Perceivable

Check-point Summary Read more

Guideline 1.1: Text Alternatives

1.1.1 Non-text content All informative and functional non-text content such as images, icons, charts, image maps etc must have alternative text that describes the meaning or purpose 1.1.1 non-text content

Guideline 1.2: Time-based Media:

1.2.1 Audio-only and Video-only (Prerecorded): Text description must be provided for prerecorded audio only content. Either a text description or an audio description must be provided for prerecorded video only content 1.2.1 Audio only and video only (prerecorded)
1.2.2 Captions (Prerecorded) Captions must be provided for the entire audio content in prerecorded synchronized media. 1.2.2 Captions (prerecorded)
1.2.3 Audio Description or Media Alternative (Prerecorded) Either a text description or an audio description must be provided for prerecorded video content of the synchronized media 1.2.3 Audio Description or Media Alternative (Prerecorded)

Guideline 1.3: Adaptable

1.3.1 Info and relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Eg: properly marked headings, associating labels with form elements etc. 1.3.1 Info and relationships
1.3.2 Meaningful Sequence Content on the page/screen must be in a meaningful sequence when accessed by different assistive technologies or user agents. 1.3.2 Meaningful Sequence
1.3.3 Sensory Characteristics Sound, size, shape, visual location or orientation should not be the only way of providing instructions or information to the user. 1.3.3 Sensory Characteristics

Guideline 1.4: Distinguishable

1.4.1 Use of Color Provide additional queues when color is used as only visual means to convey information, indicating an action, prompting a response or distinguishing a visual element. 1.4.1 Use of Color
1.4.2 Audio Control Take care that no audio is automatically played for more than 3 seconds when the page first loads. 1.4.2 Audio Controls

Principle 2: Operable

Check-point Summary Read more

Guideline 2.1: Keyboard Accessible

2.1.1 Keyboard Make sure that all the focusable elements of the web page can be navigated with keyboard and all the actions such as filling up text fields, selecting an option, activating a link, submitting a form etc can be done by keyboard alone 2.1.1 Keyboard
2.1.2 No Keyboard trap Make sure that keyboard focus is not trapped within a portion of the page or within a component. If focus should be trapped within the component provide a mechanism such as short-cut command to exit from the component using a keyboard. The method of exiting the component should be informed to the user before using it. 2.1.2 No Keyboard trap
2.1.4 Character Key Shortcuts If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
Turn off:
A mechanism is available to turn the shortcut off;
A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
Active only on focus:
The keyboard shortcut for a user interface component is only active when that component has focus.
2.1.4 Character Key Shortcuts

Guideline 2.2 Enough Time

2.2.1 Timing Adjustable When a session time out is part of the application, ensure that an accessible mechanism of adjusting, extending or turning off the time limit is available. 2.2.1 Timing Adjustable
2.2.2 Pause, Stop, Hide Make sure that moving, blinking, scrolling or auto updating content on the web page can be read by every user. 2.2.2 Pause, Stop, Hide

2.3 Seizures and Physical Reactions

2.3.1 3 Flashes or Below Threshold Ensure that no content on the web page flashes more than 3 times in one second. 2.3.1 3 Flashes or below threshold

2.4 Navigable

2.4.1 Bypass blocks Repeated blocks of content on repeated web pages such as top navigation must be easily skipped by the users those depend on assistive technologies and keyboard only. 2.4.1 Bypass blocks
2.4.2 Page titled Titles of the page should describe the topic or purpose. 2.4.2 Page titled
2.4.3 Focus Order Make sure that elements that recieve focus while operating or navigating the web page must be sequential and meaningful. 2.4.3 Focus Order
2.4.4 Link Purpose (in context) The target or purpose of the link must be identified by the link text alone or its associated content or its surrounding content. 2.4.4 Link Purpose (in context)

Guideline 2.5 Input Modalities

2.5.1 Pointer Gestures All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. 2.5.1 Pointer Gestures
2.5.2 Pointer Cancellation For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event:
    The down-event of the pointer is not used to execute any part of the function;
  • Abort or Undo:
    Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
  • Up Reversal:
    The up-event reverses any outcome of the preceding down-event;
  • Essential:
    Completing the function on the down-event is essential.
2.5.2 Pointer Cancellation
2.5.3 Label in Name For user interface components with labels that include text or images of text, the name contains the text that is presented visually. 2.5.3 Label in Name
2.5.4 Motion Actuation Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface:
    The motion is used to operate functionality through an accessibility supported interface;
  • Essential: The motion is essential for the function and doing so would invalidate the activity.
2.5.4 Motion Actuation

Principle 3: Understandable

Check-point Summary Read more

Guideline 3.1 : Readable

3.1.1 Language of Page Programmatically define the primary language of each page. 3.1.1 Language of Page

Guideline 3.2 Predictable

3.2.1 On Focus Ensure that the context of the element does not change when the user focus on any element on the page. Eg: popping up a submenu, submitting a form. 3.2.1 On focus
3.2.2 On Input Ensure that change of any user input should not change the context on the page unless the user is advised in advance. 3.2.2 On Input

Guideline 3.3: Input Assistance

3.3.1 Error Identification When input errors can be identified automatically, ensure that items in error are clearly marked and the error message is described in text. 3.3.1 Error Identification
3.3.2 Labels or Instructions For elements that require user input, ensure that they have clear labels. If the user input need additional information provide an instruction. 3.3.2 Labels or Instructions

Principle 4: Robust

Check-point Sumary Read more

Guideline 4.1: Compatible

4.1.1 Parsing Make sure that the following are taken care in the markup

  • Elements have unique ids,
  • elements have proper opening and closing tags,
  • elements are properly nested and
  • elements does not have duplicate attributes.
4.1.1 Parsing
4.1.2 Name, Role, Value For user interphase components ensure that Name, state, role and value are provided and are properly exposed to user agents and assistive technologies. 4.1.2 Name, Role, Value

WCAG 2.1 Level AA Check-points

Principle 1: Perceivable

Check-point Summary Read more

Guideline 1.2: Time-based Media

1.2.4 Captions (Live Captions must be provided for the entire audio content in live synchronized media. 1.2.4 Captions (Live)
1.2.5 Audio Description (Prerecorded) Ensure that an audio description is provided for the prerecorded video content in the synchronized media. 1.2.5 Audio Description (Prerecorded)

Guideline 1.3 Adaptable

1.3.4 Orientation Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. 1.3.4 Orientation
1.3.5 Identify Input Purpose The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.
1.3.5 Identify Input Purpose

Guideline 1.4: Distinguishable

1.4.3 Contrast (Minimum) Ensure that a minimum visual contrast ratio of 4.5 : 1 is maintained between the text and its background. This minimum contrast ratio should also be maintained in case of images of text. 1.4.3 Contrast (Minimum)
1.4.4 Resize text Ensure that the text is resizable up to 200% without loss of content or functionality and without the use of assistive technologies. 1.4.4 Resize Text
1.4.5 Images of text Use real text as much as possible instead of images of text. 1.4.5 Images of text
1.4.10 Reflow Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

1.4.10 Reflow
1.4.11 Non-text Contrast The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components:
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects:
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
1.4.11 Non-text Contrast
1.4.12 Text Spacing In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

1.4.12 Text Spacing
1.4.13 Content on Hover or Focus Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

1.4.13 Content on hover or focus

Principle 2: Operable

Check-point Summary Read more

Guideline 2.4 Navigable

2.4.5 Multiple Ways Provide multiple ways to identify the required page in a set of pages. Eg: Provide search, sitemap. 2.4.5 Multiple Ways
2.4.6 Headings and Labels The text within the headings and the labels should describe the intent before the user interacts with them. 2.4.6 Headings an Labels
2.4.7 Focus visible Provide a clearly visible focus indicator for all the interactive elements. When the user navigates through the page, they should be able to identify their current location without difficulty. 2.4.7 Focus visible

Principle 3: Understandable

Check-point Summary Read more

Guideline 3.1: Readable

3.1.2 Language of parts If any text or element on the web page has a different language than the primary language, programmatically define the language for that content. 3.1.2 Language of parts

Guideline 3.2 Predictable

3.2.3 Consistent Navigation Navigation mechanisms repeated on multiple web pages within a set of web pages must be consistent each time they are available. 3.2.3 Consistent Navigation
3.2.4 Consistent Identification Ensure that the components that have same functionality are identified consistently through-out the website. 3.2.4 Consistent Identification

Guideline 3.3: Input Assistance

3.3.3 Error Suggestion If the errors for user input are identified and suggestions for correction are known, provide them if the suggestions does not jeopardize the security or purpose. 3.3.3 Error Suggestion
3.3.4 Error Prevention (Legal, Financial, Data) Provide a mechanism to review and confirm the submission when the form include legal, financial or data. 3.3.4 Error Prevention Legal, Financial, Data

Principle 4: Robust

Check point Summary Read more

Guideline 4.1 Compatible

4.1.3 Status Messages In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. 4.1.3 Status Messages

Share and Enjoy !

0 0

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.