Checklists for Website Accessibility

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

Checklists for Website Accessibility

Once you’re starting to get comfortable with the requirements for web accessibility, you can check your website’s pages against the following checklists.

Simplified Checklist for Website Accessibility

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!

CategoryItem
Colour-basedIs there sufficient contrast between text and background colours?
Colour-basedHave 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?
ImagesDo all non-decorative images have image descriptions? (i.e., alt-text, and/or long descriptions if they are needed)
StructureAre headings correctly used to organize the structure of the site’s content?
Screen-reader compatibilityAre the functionalities of the website accessible using both the keyboard and mouse?
Pre-recorded mediaDo videos have captions (and audio description, if needed)? Do audio recordings like podcasts have transcripts?
FormsAre form fields correctly labeled?
Link textDo all links have meaningful link text? (e.g., “View our Spring Catalogue” instead of “Click Here”.)
Skip navigationDoes the site have a “Skip Navigation” feature which allows screen-reader and keyboard users to skip certain repeated elements?
TablesAre any tables well-organized and structured?
Supplementary contentAre any linked PDFs or Word documents accessible?
JavaScriptIf 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!

Advanced Checklist for Website Accessibility

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.

CriterionLevelChecklist Item
1.1.1 Non-text ContentADo all non-decorative images have alt-text?
1.2.1 Audio-only and Video-only (Prerecorded)AAre 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)ADo pre-recorded videos have captions?
1.2.3 Audio Description or Media Alternative (Prerecorded)AAre there alternate ways of understanding pre-recorded video, like a full text description or audio-description?
1.2.4 Captions (Live)AAIs there captioning for live video?
1.2.5 Audio Description (Prerecorded)AAHas 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 RelationshipsAIs 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 SequenceAIs the reading and navigation order (determined by code order) logical and intuitive?
1.3.3 Sensory CharacteristicsAHave 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 OrientationAACan the website operate fully in both landscape and portrait orientation?
1.3.5 Identify Input PurposeAAHave 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 ColorAHave you ensured that color is not used as the sole method of conveying content or distinguishing visual elements?
1.4.2 Audio ControlAAre 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)AAIs 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 textAACan text can be resized up to 200% larger than the original, without causing any issues with content or function?
1.4.5 Images of TextAAHave you avoided using images of text unless they are absolutely necessary?
1.4.10 ReflowAACan users magnify web pages by up to 400% without losing functionality?
1.4.11 Non-text ContrastAAIs there sufficient contrast between non-text content (like buttons, radio button indicators, graphics, etc.) and background? (At least 3:1)
1.4.12 Text SpacingAACan 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 FocusAAWhen "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 KeyboardAAre users able to operate all of the functions on a site using a keyboard interface?
2.1.2 No Keyboard TrapAAre 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 ShortcutsAIf 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 AdjustableAAIf 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, HideAAFor 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 ThresholdAHave 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 BlocksAAre 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
ADoes each page have descriptive <title> information?
2.4.3 Focus OrderAIs the navigation order of links, form elements, etc. logical and intuitive?
2.4.4 Link Purpose (In Context)ADoes every active link have useful link text? (e.g., the words "View our Spring Catalogue" instead of "Click Here”)".
2.4.5 Multiple WaysAAIs 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 LabelsAAAre 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 VisibleAIs 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 GesturesAIf 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 CancellationAIs 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 NameAFor 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 ActuationAHave 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
AIs the language of the page defined in the HTML element of each page?
3.1.2 Language of PartsAAIs 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 FocusACan users explore the content of a page without triggering an unexpected change of context?
3.2.2 On InputACan 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 NavigationAADo 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 IdentificationAAWhere 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 IdentificationAWhen 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 InstructionsAAre 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 SuggestionAADo users receive appropriate suggestions for correction of an input error (where it is possible)?
3.3.4 Error Prevention (Legal, Financial, Data)AAIf 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 ParsingAHave you ensured that all elements have complete start and end tags (like <p></p>, for a very basic example)?
4.1.2 Name, Role, ValueAIs 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 MessagesAAIf 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)

Download the Checklist

Grab both the simplified and advanced checklists here.

External Links to More Information

WAVE Web Accessibility Evaluation Tool

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.

5 Website Accessibility Checkers You Need Today

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.

WebAIM’s WCAG 2 Checklist

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

Want to discuss this resource?