This resource offers two checklists for web accessibility one: a simplified one, which will help ensure that a site has paid close attention to accessibility standards, and a more advanced one based on the WCAG guidelines.
Subject(s):
Website Accessibility
Resource Type(s):
Checklist
Audience:
Technical
Before reading this, you might want to read:
Once you’re starting to get comfortable with the requirements for web accessibility, you can check your website’s pages against the following checklists.
This simplified checklist will give you a good idea about how accessible your site is. Using an automated accessibility checker (like the Web Accessibility Initiative’s WAVE tool) is another great step, but automated checking will never be able to catch everything!
| Category | Item |
|---|---|
| Colour-based | Is there sufficient contrast between text and background colours? |
| Colour-based | Have colour-based instructions been avoided? (e.g., if there is an error, is it just highlighted in red? Or is there text that describes the error? |
| Images | Do all non-decorative images have image descriptions? (i.e., alt-text, and/or long descriptions if they are needed) |
| Structure | Are headings correctly used to organize the structure of the site’s content? |
| Screen-reader compatibility | Are the functionalities of the website accessible using both the keyboard and mouse? |
| Pre-recorded media | Do videos have captions (and audio description, if needed)? Do audio recordings like podcasts have transcripts? |
| Forms | Are form fields correctly labeled? |
| Link text | Do all links have meaningful link text? (e.g., “View our Spring Catalogue” instead of “Click Here”.) |
| Skip navigation | Does the site have a “Skip Navigation” feature which allows screen-reader and keyboard users to skip certain repeated elements? |
| Tables | Are any tables well-organized and structured? |
| Supplementary content | Are any linked PDFs or Word documents accessible? |
| JavaScript | If there is any JavaScript, is it properly coded? |
This checklist is a great start — but once you become more familiar with web accessibility, you will want to use the Advanced Checklist!
The checklist below is based on the Web Content Accessibility Guidelines 2.1, which are a detailed and thorough set of guidelines for web accessibility – if you aren’t yet familiar with them, you should definitely take a look at the Suggested Prerequisites before trying to tackle this list! The Introduction to Web Accessibility Standards, Requirements, & Legislation (including WCAG) will be particularly useful, as it explains (in greater depth) how to meet each criterion.
If you meet every criterion on this list, that means that your site is definitely compliant with WCAG 2.1 AA — the recommended level of accessibility according to legislation! But before you dive in, note that a technical understanding will be required in order to be sure that they are indeed met. If someone at your organization does not have the technical knowledge needed, you may want to consider hiring someone to audit your website! Check out Reviewing Website Accessibility in the Suggested Prerequisites for more information.
| Criterion | Level | Checklist Item |
|---|---|---|
| 1.1.1 Non-text Content | A | Do all non-decorative images have alt-text? |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Are there alternate ways of understanding pre-recorded audio-only and video-only media? Like, are there transcripts for podcasts, or audio descriptions for silent videos? |
| 1.2.2 Captions (Prerecorded) | A | Do pre-recorded videos have captions? |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | A | Are there alternate ways of understanding pre-recorded video, like a full text description or audio-description? |
| 1.2.4 Captions (Live) | AA | Is there captioning for live video? |
| 1.2.5 Audio Description (Prerecorded) | AA | Has audio description been included for pre-recorded video? (Note: unlike 1.2.3, audio description is required to meet this; alternate approaches like a text description only meets 1.2.3, Level A). Note that audio description is only required if there is relevant visual content that is not presented in the audio. |
| 1.3.1 Info and Relationships | A | Is semantic markup used to designate headings (<h1>), regions/landmarks, lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <blockquote>, <aside>, etc.?Are tables used for tabular data? Are text labels associated with form input elements? |
| 1.3.2 Meaningful Sequence | A | Is the reading and navigation order (determined by code order) logical and intuitive? |
| 1.3.3 Sensory Characteristics | A | Have you ensured that instructions do not rely upon shape, size, or visual location, or sound? I.e., “Click the green arrow to advance”; “A ‘ding’ will indicate that your time is up.")? |
| 1.3.4 Orientation | AA | Can the website operate fully in both landscape and portrait orientation? |
| 1.3.5 Identify Input Purpose | AA | Have you ensured that the purpose of form fields (like name, email address, password) can be understood by the user's software/computer? In other words, have you used correct HTML mark-up for forms? |
| 1.4.1 Use of Color | A | Have you ensured that color is not used as the sole method of conveying content or distinguishing visual elements? |
| 1.4.2 Audio Control | A | Are users able to pause, stop, mute, or control the volume of any audio that plays for more than 3 seconds? |
| 1.4.3 Contrast (Minimum) | AA | Is there sufficient contrast between text and its background? (4.5:1 for 18pt size and lower, 3:1 for larger size text). |
| 1.4.4 Resize text | AA | Can text can be resized up to 200% larger than the original, without causing any issues with content or function? |
| 1.4.5 Images of Text | AA | Have you avoided using images of text unless they are absolutely necessary? |
| 1.4.10 Reflow | AA | Can users magnify web pages by up to 400% without losing functionality? |
| 1.4.11 Non-text Contrast | AA | Is there sufficient contrast between non-text content (like buttons, radio button indicators, graphics, etc.) and background? (At least 3:1) |
| 1.4.12 Text Spacing | AA | Can users adapt paragraph spacing to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the font size, with loss of content or functionality? |
| 1.4.13 Content on Hover or Focus | AA | When "hover text" appears, is the text: • Dismissible (meaning that without moving the pointer or focus, the user must be able to dismiss the hover text, i.e. by hitting Escape); • Hoverable (meaning that the user can move the pointer around the hover text (Wikipedia pages do this well)); and • Persistent (meaning that the hover text must remain until the user dismisses it, or moves the pointer or focus away)? |
| 2.1.1 Keyboard | A | Are users able to operate all of the functions on a site using a keyboard interface? |
| 2.1.2 No Keyboard Trap | A | Are users able to move keyboard focus away from a component of a site or page (like a calendar widget or modal dialog box) using the standard keyboard interface? Or, if this is not possible, are users advised on how to move focus away? |
| 2.1.4 Character Key Shortcuts | A | If the site has keyboard shortcuts that use only a textual character, does the user have the option of one or more of the following: disabling them; remapping/reassigning them; or ensuring that the unique shortcuts are only active when the component that uses them is being interacted with? |
| 2.2.1 Timing Adjustable | AA | If content on a site (like log-in periods, amount of time given to complete a purchase, etc.) has a time limit, is at least one of the following options available? • the user can turn off the time limit; • the user can adjust the time limit; or • the user is warned before the time limit expires, and is given at least 20 seconds to extend the time limit with a simple action. There are exceptions for real-time restrictions (like an auction), if the time limit is essential, or if the time limit is more than 20 hours. |
| 2.2.2 Pause, Stop, Hide | AA | For content that moves, blinks, scrolls, or auto-updates, is the following true? • 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 an option for the user to pause, stop, or hide it (unless the effect is essential); and • For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is an option 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. |
| 2.3.1 Three Flashes or Below Threshold | A | Have you ensured that the site does not contain anything that flashes more than three times in any one second period? (Unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red) |
| 2.4.1 Bypass Blocks | A | Are users able to bypass blocks of content that are repeated on multiple Web pages? (e.g., is there a link at the top of each page that goes directly to the main content area?) |
| 2.4.2 Page Titled | A | Does each page have descriptive <title> information? |
| 2.4.3 Focus Order | A | Is the navigation order of links, form elements, etc. logical and intuitive? |
| 2.4.4 Link Purpose (In Context) | A | Does every active link have useful link text? (e.g., the words "View our Spring Catalogue" instead of "Click Here”)". |
| 2.4.5 Multiple Ways | AA | Is there more than one way to locate a particular page on the site? (e.g., having both menu navigation and a search function — or more!) |
| 2.4.6 Headings and Labels | AA | Are headings and labels descriptive and useful, and do they accurately describe the section they head, the paragraph they introduce, or the function of the form field they are labeling? |
| 2.4.7 Focus Visible | A | Is it visually apparent which page element has the current keyboard focus? (e.g., like a blinking cursor in a search field, or highlighted text when you navigate to it) |
| 2.5.1 Pointer Gestures | A | If there is a site function that is designed to be accomplished by using either "multi-point" or "path-based" gestures (like zooming into a map by pinching and zooming with two fingers on a touch-screen, or drawing a pattern to unlock a phone): Can the function be achieved by using a single pointer or with a non-path based approach? (e.g., clicking plus or minus to zoom, or giving users the option of using a passcode instead of a pattern). |
| 2.5.2 Pointer Cancellation | A | Is one or more of the following true for any site function that is activated with a "single-pointer" input (e.g., a single tap or a click, double-taps and clicks, long presses, and path-based gestures)? • There is "No down-event" (meaning that the down-event (e.g., when the user clicks but has not yet released, or taps but has not lifted their finger) does not execute the function); • The user can "Abort or Undo"(meaning that the function is completed on the up-event (e.g., when the user releases the click or lifts their finger), and a mechanism is available to abort the function before completion (like moving the pointer away before releasing) or to undo the function after completion (like an option to "Cancel" if a dialog is opened); • An "Up Reversal" is built in, meaning that if the down-event triggers an action or behaviour (like causing a pop-up to appear, or playing a video), the up-event reverses any outcome of the preceding down-event (i.e., the pop-up disappears, or the video stops playing; • Or, the function is "Essential", meaning that completing the function on the down-event is essential — a common example is when there is a keyboard emulator — having the "down-event" of the keystroke trigger the appearance of the letter is normal behaviour — this is OK! |
| 2.5.3 Label in Name | A | For user interface components with labels (like buttons) that include text or images of text, does the "programmatic" name (the one that can be read by the computer) contain the text that is presented visually? |
| 2.5.4 Motion Actuation | A | Have you ensured that any function that is activated by motion (like shaking a device to undo an action or an input) can also be accomplished by an interface component (like a button to "Cancel" or "Undo")? |
| 3.1.1 Language of Page | A | Is the language of the page defined in the HTML element of each page? |
| 3.1.2 Language of Parts | AA | Is the language of phrases/text in other languages identified using the lang attribute? (e.g., “<p>This book is the epitome of the saying <span lang=”fr”>l’esprit d’escalier”</span>.</p>)Note: There are exceptions, like names (e.g., Marcel Proust), technical terms (e.g., zeitgeist), or words/phrases that are common in English (or the main language of the site) (e.g., rendezvous, etc.). |
| 3.2.1 On Focus | A | Can users explore the content of a page without triggering an unexpected change of context? |
| 3.2.2 On Input | A | Can users change the "setting" of an interface component (e.g., check a checkbox, enter text into a field, etc.) without triggering a change of context? |
| 3.2.3 Consistent Navigation | AA | Do navigational mechanisms (e.g., navigation menus, search fields, "skip to navigation" links, etc.) occur in the same relative order across multiple web pages on the website? |
| 3.2.4 Consistent Identification | AA | Where there are components with the same functionality (e.g., a button that "skips to the next page", or an icon of an envelope that users can click to send a message to a person, etc.), are they identified consistently? |
| 3.3.1 Error Identification | A | When input errors are automatically detected, is the item that is in error identified and described to the user in text? |
| 3.3.2 Labels or Instructions | A | Are there clear labels and/or instructions to users to help ensure that they are able to easily and correctly fill out forms? |
| 3.3.3 Error Suggestion | AA | Do users receive appropriate suggestions for correction of an input error (where it is possible)? |
| 3.3.4 Error Prevention (Legal, Financial, Data) | AA | If the website has pages that cause legal commitments or financial transactions for the user, that modify or delete user-controllable data in data storage systems, or that submit user test responses, is at least one of the following true? The commitment/transaction/submission is: • Reversible (meaning that submissions can be reversed); • Checked (meaning that data entered by the user is checked for input errors and the user is provided an opportunity to correct them); and/or • Confirmed (meaning that there is an available mechanism for reviewing, confirming, and correcting information before finalizing the submission). |
| 4.1.1 Parsing | A | Have you ensured that all elements have complete start and end tags (like <p>…</p>, for a very basic example)? |
| 4.1.2 Name, Role, Value | A | Is markup used in a way that facilitates accessibility? This includes following the HTML specifications and using forms, form labels, frame titles, etc. appropriately. Note: when HTML is not sufficient, ARIA can be used to enhance accessibility |
| 4.1.3 Status Messages | AA | If an important status message is presented and focus is not set to that message, is the message announced to screen reader users? (Typically via an ARIA alert or live region) |
Grab both the simplified and advanced checklists here.
An accessibility checking tool that checks for possible accessibility issues on a web page. Issues that are automatically found are indicated, and it also provides information to help with manual checking. It is a great place to start testing a website, but does require some technical knowledge of WCAG.
This blog post recommends five automated tools that can be used to check web accessibility. It mentions that manual testing is also needed in addition to automated checks. Tools discussed are WAVE: Website Accessibility Evaluation tool, SortSite, aXe: the Accessibility Engine, Pa11y, and Tota11y.
This checklist, produced by the Web Accessibility Initiative, presents their recommendations for implementing accessibility principles and techniques for those seeking WCAG conformance. The language they use significantly simplifies and condenses the official WCAG 2.1 specification and supporting materials to make it easier to implement and verify for web pages.
Content Source Acknowledgement
Test Project: Accessibility Testing Best Practices
World Wide Web Consortium – Web Accessibility Initiative: WCAG 2.1 at a Glance
Berkeley Web Access: Top 10 Tips for Making Your Website Accessible