WCAG Checklist – A Free and Simple Guide to WCAG 2.0 and WCAG 2.1
WCAG Checklist – A Free and Simple Guide to WCAG 2.0 and WCAG 2.1
This ultimate WCAG 2.1 Checklist provides a simplified explanation of the Web Content Accessibility Guidelines (WCAG) and the most important accessibility requirements that website owners, designers, developers, product managers, and organizations need to follow. By using this checklist, users can easily refer to the key points and ensure that their digital products and services comply with accessibility standards, thereby improving the user experience for all visitors, including those with disabilities, and reducing the risk of legal liabilities.
WCAG 2.0 Check-points
WCAG Principle 1: Perceivable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 1.1: Text Alternatives | ||
| 1.1.1 Non-text content | All informative and functional non-text content such as images, icons, charts, imagemaps etc must have alternative text that describes the meaning or purpose | Always provide alternative options like audio or OTP (one time password) for CAPTCHA.Always provide textual summary or description for complex charts and graphs apart form shot alt text.Always use title attribute for additional info while using alt attribute in image links. |
| 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 textdescription or an audio description must be provided for prerecorded video only content | Provide text transcripts for audio tracks.Provide either text transcript or an audio track for a silent video.If an audio is provided for video then text transcript is not required. (Exception) |
| 1.2.2 Captions (Prerecorded) | Captions must be provided for the entire audio content in prerecorded synchronizedmedia. | Provide captions for the video that has audio.If video is the alternative for text content then it doesn’t need captions. (Exception)If possible provide captions in multiple languages as this helps users to choose the language they can follow. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | Either a text description or an audio description must be provided for prerecordedvideo content of the synchronized media | Provide audio descriptions if possible orProvide text transcripts for the video.Videos that rely on sound only doesn’t require audio descriptions. Example: interviews, speeches. |
| Guideline 1.3: Adaptable | ||
| 1.3.1 Info and relationships | Information, structure, and relationships conveyed through presentation can beprogrammatically determined or are available in text. Eg: properly marked headings, associatinglabels with form elements etc. | Emphasis – Use <em> and <strong> instead of using Italics and Bold texts to highlight important texts; use <blockquote> to mark quotationsHeadings – Provide hierarchically logical heading markup for the contentsTable – Provide HTML table markup and provide column headers for simple tables and column headers and row headers for complex tablesTable – When using nested tables, consider the possibility of breaking the content into logical individual tables instead of nested tablesForms – Provide programmatic association of visible labels or appropriate accessible names to all the form elementsLists – Markup the contents that logically fall into list as ordered or unordered list. Do not put huge text blocks which is otherwise are paragraphs ass listsGrouping – Provide grouping and group level labels to mark a group of form elements like radio buttons or checkboxes; use <fieldset> and legend to achieve grouping and group level association for native form elements; use ARIA to achieve the same where custom form controls are usedUse native semantic markup frequently and ARIA sparingly. |
| 1.3.2 Meaningful Sequence | Content on the page/screen must be in a meaningful sequence when accessed by differentassistive technologies or user agents. | Make sure that content presented on the page is logical & intuitive.Write HTML first & then manage design with CSS.Make sure visual order matches the DOM order.Use headings, lists, paragraphs etc to mark your content.Make sure your users can differentiate the navigation menus from main content. |
| 1.3.3 Sensory Characteristics | Sound, size, shape, visual location or orientation should not be the only way ofproviding instructions or information to the user. | While using shape and or location, provide visible labels/names to the controlsWhen combining color and shape/size/location/orientation, provide off-screen text for screen reader usersWhen using sound as a clue, combine it with text/color based clues. |
| Guideline 1.4: Distinguishable | ||
| 1.4.1 Use of Color | Provide additional cues when color is used as only visual means to conveyinformation, indicating an action, prompting a response or distinguishing a visual element. | Don’t use color as sole method to convey information.Make sure instructions/prompts provided in text don’t refer to color alone.Make sure instructions are provided in text for graphs & charts where color is used to convey information.Provide more than one visual clue that include common icons and colors to differentiate texts and user interface elements. |
| 1.4.2 Audio Control | Take care that no audio is automatically played for more than 3 seconds when the pagefirst loads. | Don’t play audio automatically if possible.Make sure your audio is less than 3 seconds.If audio is more than 3 seconds then provide a pause/stop or a mechanism to control the audio player volume from the overall system volume.Make sure that focus is on the pause/stop or volume control as soon as page opens if audio is playing automatically. |
WCAG Principle 2: Operable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 2.1: Keyboard Accessible | ||
| 2.1.1 Keyboard | Make sure that all the focusable elements of the web page can be navigated withkeyboard 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 | Make sure all elements on the page buttons, links, form controls etc. are reachable by tab key.Make sure that users are able to activate the buttons, links & form controls using the enter and/or spacebar keys.Write clean HTML & CSS as it is keyboard operable by default & doesn’t require any special tweaks.Make sure that there is a visible focus for all the active elements on the page.Make sure that focus order is logical & intuitive.Provide tabindex=0 for custom UI elements so that they are focusable.Provide appropriate event handlers for custom scripted elements so that they are operable by their respective keys.Avoid access keys if possible. If not, at least, ensure they don’t conflict with the user agent and/or AT shortcut keys.Make sure that there is no time limit to perform any action using the keyboard when more than one key is required to operate a control. |
| 2.1.2 No Keyboard trap | Make sure that keyboard focus is not trapped within a portion of the page or within acomponent. If focus should be trapped within the component provide a mechanism such as short-cutcommand to exit from the component using a keyboard. The method of exiting the component should beinformed to the user before using it. | Make sure that users can tab to & away from all parts of the site.If a user is trapped on a portion of the web page for a purpose, a clear instruction must be provided for the user to end that keyboard trap.Check if all parts of the site is operable using only keyboard, test by unplugging the mouse.Stick to standard navigation as much as possible like tab, shift+tab & arrow keys.If custom keystrokes are provided to operate a control make sure hints are exposed to all users.Make sure your third party widgets are accessible, most of the time they cause major keyboard operability issues. |
| 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 thefollowing is true:Turn off:A mechanism is available to turn the shortcut off;Remap: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. | Don’t use single character key shortcuts if possible.Provide a mechanism to turn off the character key shortcuts.design all the keyboard shortcuts with the combinations of non-printable keys.Let the user trigger the shortcut key only when the element has keyboard focus. |
| Guideline 2.2 Enough Time | ||
| 2.2.1 Timing Adjustable | When a session time out is part of the application, ensure that an accessible mechanismof adjusting, extending or turning off the time limit is available. | Provide a control on the landing page for the user to initiate a longer session time or no session timeout.Provide a way for the user to turn off the session time out.Provide a means to set the time limit to 10 times the default time limit.Prompt the user with help of a pop-up or modal so that enough warning is available for the user to reset the time limit.Make sure controls provided to extend the time limit are keyboard operable.Moving, scrolling and/or blinking content must have mechanism to pause or stop the movement or scroll or blink.Auto updating content must be provided with feature to extend the time limit to 10 times of its actual update frequency. |
| 2.2.2 Pause, Stop, Hide | Make sure that moving, blinking, scrolling or auto updating content on the web page canbe read by every user. | Avoid moving, blinking scrolling content if possible.Content should not blink more than 3 times per second, if it does blink 3times per second then it is considered as flashing & will fail WCAG.Auto updating content should be provided with a pause button or provide a mechanism for the user to specify when the update can happen.If the entire page contains moving, blinking, scrolling & auto updating content then pause, stop or hide buttons are not required as there is no parallel content.Animation that conveys the users that a page or content is loading doesn’t require to meet this success criterion. |
| Guideline2.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. | Avoid flashing content completely if possible.Make sure that flashing content doesn’t flash more than 3 times per second.Use PEAT to confirm if the flashing content passes this check point. |
| Guideline2.4 Navigable | ||
| 2.4.1 Bypass blocks | Repeated blocks of content on repeated web pages such as top navigation must be easilyskipped by the users those depend on assistive technologies and keyboard only. | Provide a skip link on top of the page to skip navigational menus.Provide skip links to navigate to content on a large page.Make sure that skip link is visible when it receives focus.Make sure that purpose of the link is clear, provide skip link text as skip to main content or skip navigation etc.When providing ARIA landmarks, ensure multiple landmarks of the same type is not provided.If provided, ensure to use aria-label to assign unique names to such landmarks “Primary navigation”, “secondary navigation” etc. |
| 2.4.2 Page titled | Titles of the page should describe the topic or purpose. | Provide a unique title.Make sure that title is between 50-75 characters.Make sure title of the page is the heading level H1 on the page.Title should contain web page name, bit of description & site name.Make sure title describes purpose of the page. |
| 2.4.3 Focus Order | Make sure that elements that recieve focus while operating or navigating the web pagemust be sequential and meaningful. | Avoid using tabindex values that are >1 to manage focus order as they may supersede logical tab orderAlign the focus order with the reading order as much as possible in order to maintain a logical and intuitive navigation of the content. Too much deviation would put a lot of users with disabilities into confusion |
| 2.4.4 Link Purpose (in context) | The target or purpose of the link must be identified by the link text alone or itsassociated content or its surrounding content. | Let the purpose of the link be clear just by the link text alone! E.G. “My Blog”, “Visit our Blog”.Ensure appropriate alt text is provided when only an image stands as a link.Avoid ambiguous links like “here” or “click here”. If they are required make sure that they are placed at the end of the sentence or paragraph so that they are understood from context.Do not duplicate the alt text and the link text when there is an image and the link adjacent to each other and convey the same info or lead to same destination. Rather, wrap the image with the link and provide alt=”” for the image.Ensure Links having the same link text leads to same destination. |
| Guideline 2.5 Input Modalities | ||
| 2.5.1 Pointer Gestures | All functionality that uses multipoint or path-based gestures for operation can beoperated with a single pointer without a path-based gesture, unless a multipoint or path-basedgesture is essential. | Do not use multi-pointer or path based gesture as a sole method to control contentProvide single tap or double tap/click as alternativesAlways have in mind that one mode does fit for all. |
| 2.5.2 Pointer Cancellation | For functionality that can be operated using a single pointer, at least one of the following istrue: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. | Ensure down event alone does not execute any functionalityEnsure Up event reverses or un-does any down event based actionEnsure a mechanism is available to confirm the performed action where down event executes such action |
| 2.5.3 Label in Name | For user interface components with labels that include text or images of text, the namecontains the text that is presented visually. | Ensure the accessible names like aria-label and alt attribute contain the exact match of the visible labelEnsure the visible label text and accessible name text are not interspersedEnsure the accessible name starts exactly with the visible name. |
| 2.5.4 Motion Actuation | Functionality that can be operated by device motion or user motion can also be operated by userinterface 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. | Provide alternatives where motion actuation is usedProvide confirmation or cancelling mechanismAllow system settings to deactivate motion detection |
WCAG Principle 3: Understandable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 3.1 : Readable | ||
| 3.1.1 Language of Page | Programmatically define the primary language of each page. | Ensure each page of your web site has lang attributeEnsure the language code is correctUse appropriate language tokens in terms of language variations like lang=”en-us” for English in US and lang=”en-uk” for English in Britain. |
| Guideline 3.2 Predictable | ||
| 3.2.1 On Focus | Ensure that the context of the element does not change when the user focus on anyelement on the page. Eg: popping up a submenu, submitting a form. | Ensure that no element changes by receiving focus.We should avoid both visual & behavioral modifications to page.A website built using only HTML & CSS will not have on focus by default, one needs to provide this through scripting.One way to test this check point is to unplug the mouse & navigate the page using the keyboard. |
| 3.2.2 On Input | Ensure that change of any user input should not change the context on the page unlessthe user is advised in advance. | Make sure that forms don’t submit on input of data.Make sure that focus doesn’t move to next form control once a form field is populated with data.Provide a submit button for all forms.Make sure that control of how data is populated is in the hands of your users.If there is a change of context, then provide an instruction that is available for all user groups. |
| Guideline 3.3: Input Assistance | ||
| 3.3.1 Error Identification | When input errors can be identified automatically, ensure that items in error areclearly marked and the error message is described in text. | Make sure that errors are in text.Don’t just use color or visual cues to point out form errors.Use aria-describedby to bind the form control with the error programmatically.Don’t disable the submit button! Some websites disable the submit button & will only enable it if the form is filled appropriately. This is bad practice.Provide necessary instructions & be as specific as possible with the errors so that users can take necessary action.Make sure that errors are distinguished from the regular text on the web page. |
| 3.3.2 Labels or Instructions | For elements that require user input, ensure that they have clear labels. If the userinput need additional information provide an instruction. | Always provide visible labels to every form fields and controlsProvide instructions where the form fields require specific data or formatEnsure the labels identify the fields clearlyDo programmatically associate the labels with their respective fieldsProvide group level labels and associate them with the group of form fields where the user input is required in more than one field like phone number or credit card number; also ensure to provide individual labels through title attribute in such scenarios. |
WCAG Principle 4: Robust
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| 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 andelements does not have duplicate attributes. | Use unique idsNest elements according to their specificationAvoid duplicate attributesMake sure that HTML has both start & end tags. |
| 4.1.2 Name, Role, Value | For user interphase components ensure that Name, state, role and value are providedand are properly exposed to user agents and assistive technologies. | Use native HTML elements wherever possibleUSE WAI-ARIA attributes while constructing custom component widgetsMake sure custom widgets are keyboard operable using spacebar or enter keysProvide tabindex=0 for custom widgets so that they receive tab focusMake it a practice to read ARIA specifications to understand the implications and the consequences of ARIA roles, states and properties before using them |
WCAG 2.1 Level AA Check-points
WCAG Principle 1: Perceivable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 1.2: Time-based Media | ||
| 1.2.4 Captions (Live) | Captions must be provided for the entire audio content in live synchronized media. | Provide captions for a live broadcastUse media players or broadcast platforms where live captioning is supported. |
| 1.2.5 Audio Description (Prerecorded) | Ensure that an audio description is provided for the prerecorded video content in thesynchronized media. | Provide audio descriptions where visual aspect is not explained in the dialog of the videoThe audio description can either be separate from the original video or be an integral part of the videoAudio description must include scene changes, settings, actions that are described in dialogues and any other visual information that is not conveyed via a speech or dialogUse media players that support audio descriptions. |
| Guideline 1.3 Adaptable | ||
| 1.3.4 Orientation | Content does not restrict its view and operation to a single display orientation, suchas portrait or landscape, unless a specific display orientation is essential. | Don’t restrict your application or website to just work in landscape or portrait mode.Make sure to honor the device settings while displaying the application in landscape or portrait mode. |
| 1.3.5 Identify Input Purpose | The purpose of each input field collecting information about the user can be programmaticallydetermined 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. | Provide programmatically determinable input purposeUse appropriate token values while using autocomplete attributeDo not use autocomplete on input fields that does not ask for user data. |
| Guideline 1.4: Distinguishable | ||
| 1.4.3 Contrast (Minimum) | Ensure that a minimum visual contrast ratio of 4.5 : 1 is maintained between the textand its background. This minimum contrast ratio should also be maintained in case of images of text. | Develop the style guide in such a way that all the texts that are crucial meet the minimum contrastChoose color schemes that are contrastive enough for everyone to see and readProvide a “Contrast” mode with the help of alternative CSS if you can’t Design and develop the content with the minimum contrast requirement. |
| 1.4.4 Resize text | Ensure that the text is resizable up to 200% without loss of content or functionalityand without the use of assistive technologies. | Where browsers do not support or provide zoom functionality (IE6 as an example), provide alternative CSS for scaling purposeWhen zoomed to 200%, ensure there is no much of horizontal scrolling ( a best practice)Where lengthy user interface components or content like subject line of an email is there, truncate and provide ways along with the instructions to access the content. |
| 1.4.5 Images of text | Use real text as much as possible instead of images of text. | Use CSS styled headings instead of Bitmap imagesProvide site-wide controls to customize the images of texts when there are dynamically generated images of textsUse CSS to specify spacing, alignment, color and the font family of any UI elements, their texts and icons, quotations etcUse keyboard generated symbols wherever possible instead of making them as images. |
| 1.4.10 Reflow | Content can be presented without loss of information or functionality, and without requiringscrolling 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. | Use Responsive Web Design (RWD) from the conception of design itselfUse accessible links, modals, toggle type elements to show or hide contentAvoid horizontal scroll bars in 400%zoomAvoid content overlaps, clipping, content loss and functionality loss. |
| 1.4.11 Non-text Contrast | The visual presentation of the following have a contrast ratio of at least 3:1 againstadjacent color(s): User Interface Components:Visual information required to identify user interface components and states, except forinactive components or where the appearance of the component is determined by the user agentand not modified by the author;Graphical Objects:Parts of graphics required to understand the content, except when a particular presentationof graphics is essential to the information being conveyed. | Ensure hit-areas and focus indicators have 3:1 contrast ratio with their inner or outer backgroundEnsure the checked/unchecked states meet the 3:1 ratio against their adjacent color in order to distinguish the statesEnsure parts of graphs and charts where color is the only way to decipher the information, the contrast ratio is met against adjacent colorsEnsure appropriate color combinations are chosen and defined for UI elements and other graphical objects in the style guides and the design documents in order to avoid uncomfortable retrofitting. |
| 1.4.12 Text Spacing | In content implemented using markup languages that support the following text style properties, noloss of content or functionality occurs by setting all of the following and by changing no otherstyle 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. | Don’t use fixed containers in your CSS styles.Make sure that content reflows without overlapping or text cut-offsUse relative units of font size, line height, spaces between characters, words, lines and paragraphs. |
| 1.4.13 Content on Hover or Focus | Where receiving and then removing pointer hover or keyboard focus triggers additional content tobecome visible and then hidden, the following are true: Dismissable:A mechanism is available to dismiss the additional content without moving pointer hover orkeyboard focus, unless the additional content communicates an input error or does notobscure or replace other content;Hoverable:If pointer hover can trigger the additional content, then the pointer can be moved over theadditional content without the additional content disappearing;Persistent:The additional content remains visible until the hover or focus trigger is removed, the userdismisses 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. | Provide a method to dismiss the additional content that appear on hover or keyboard focus.Make sure that content is present until the user moves away the mouse pointer from the triggering element or content block.Make sure that experience is persistent. |
WCAG Principle 2: Operable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 2.4 Navigable | ||
| 2.4.5 Multiple Ways | Provide multiple ways to identify the required page in a set of pages. Eg: Providesearch, sitemap. | More than one way must be available to meet this success criteriaThough breadcrumb is quite old, it still works if the users want to go back in a process or a layered structureSearch function is most powerful to achieve faster navigation.Menus may become larger and cumbersome; still they work wonders when you look up for a category. |
| 2.4.6 Headings and Labels | The text within the headings and the labels should describe the intent before the userinteracts with them. | Headings must be clear, concise & descriptiveHeadings must follow a sequential order to avoid confusion.Ensure that headings are consistent throughout the siteEnsure that labels are descriptive enough so that users can take necessary actions |
| 2.4.7 Focus visible | Provide a clearly visible focus indicator for all the interactive elements. When theuser navigates through the page, they should be able to identify their current location withoutdifficulty. | Let browsers handle the visible focus for active elementsensure that active element is provided with visible focus.Ensure that when the user is navigating through the page using keyboard visible focus moves along for every element presented on the pageEnsure that there is sufficient contrast between the visible focus & the background of the element, for example if the visible focus is black & the background of the element is black then focus visible is not visually distinguishable. |
WCAG Principle 3: Understandable
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| 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 primarylanguage, programmatically define the language for that content. | Ensure to use appropriate language code (lang=”fr”) wherever the text is in other languageEnsure appropriate language token is used in the lang attribute (lang=”pt-br”).Beware of the exceptions too. |
| Guideline 3.2 Predictable | ||
| 3.2.3 Consistent Navigation | Navigation mechanisms repeated on multiple web pages within a set of web pages must beconsistent each time they are available. | keep navigational menus in the same location.present the navigational menus in the same order on all pages.Represent all the standard elements like logo, search functionality, and skip links etc. in the same location on all the pages.using a standard template will help achieve to pass the success criteria of 3.2.3 consistent navigation. |
| 3.2.4 Consistent Identification | Ensure that the components that have same functionality are identified consistentlythrough-out the website. | Icons & images that are used repeatedly and provide the same function must be provided with same alternative text.Elements with same function are named & labelled consistently.Use icons/images that are consistent. For example print, twitter, Facebook etc.Images will have different meaning in different context, so will need different alternative text depending on the context. |
| 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. | Provide descriptive errorsProvide visible hints that will enable the users to avoid errors during form submissionsAssociate the errors with form controls using aria-describedbyMove the focus to the form control that has the error once validation failed, this reduces the number of key strokesMark the required fields with asterisk visually & programmatically with aria-required. |
| 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. | Make sure proper hints are provided to fill the data in the formsProvide a review information screen where user provided information is populatedProvide a checkbox where user can confirm that they have reviewed all the information and they are ready to submit; enable the submit button only when user checks the checkboxProvide confirmation screen or dialogue when users delete any data. |
WCAG Principle 4: Robust
| CHECK-POINT | SUMMARY | POINTS TO PONDER |
| Guideline 4.1 Compatible | ||
| 4.1.3 Status Messages | In content implemented using markup languages, status messages can be programmaticallydetermined through role or properties such that they can be presented to the user by assistivetechnologies without receiving focus. | Ensure all success toasts and error messages are announced by screen readerDo not fill the pages with live regions. Decide which is an important update and qualifies a status message intelligentlyEnsure focusable messages are not considered as status messages. |
