The following checklist is based on the work of The A11Y Project and uses the WCAG 2.2 standard as a cross-reference. For each topic, there is a testable success criterion taken from the WCAG 2.2 standard.
The checklist should be seen as the first step in making your product accessible. The checklist will improve the accessibility of your product, but it will not guarantee a fully accessible experience and does not cover all the WCAG 2.2 Level A and Level AA success criteria. To become fully Level AA compliant, then please follow the Accessibility Guidelines.
Global code
Global code is code that affects the whole application, website or webapp.
This helps assistive technology such as screen readers to pronounce content correctly.
The title element, contained in the document's head element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.
Some people need to increase the size of the text to a point where they can read it. Do not stop them from doing this, even for web apps with a native app-like experience. Even native apps should respect Operating System settings for resizing text.going to start navigating.
Landmark regions help communicate the layout and important areas of a page or view – and can allow quick access to these regions. For example, use the nav element to wrap a site's navigation, and the main element to contain the primary content of a page.
Remove tabindex attribute values that aren't either 0 or -1. Elements that are inherently focusable, such as links or button elements, do not require a tabindex. Elements that are not inherently focusable should not have a tabindex applied to them except for very specific use cases.
People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, autofocus can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.
If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.
The title attribute has numerous issues, and should not be used if the information provided is important for all people to access. An acceptable use for the title attribute would be labelling an iframe element to indicate what content it contains.
Keyboard navigation
It is essential that your interface and content can be operated and navigated using a keyboard.
Can a person navigating with a keyboard, switch, voice control, or screen reader see where they currently are on the page?
Can a person navigate the page using a keyboard or a screen reader in a predictable way?
Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive dropdown menus, off-screen navigations, or modals.
Appearance
The how the UI looks like and how it is presented in different circumstances e.g., when changing the text size or specialized browsing modes.
Activate modes such as Windows High Contrast or Inverted Colours. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?
Is the content still readable? Does increasing the text size cause content to overlap?
Use the straw test to ensure people who depend on screen zoom software can still easily discover all content.
Can you still see where links are among body content if everything is grayscale?
A complicated layout can be confusing to understand and use.
Colour contrast
How distinguishable colours are when they are placed on top or next to each other.
Level AA compliance requires a contrast ratio of 4.5:1.
Level AA compliance requires a contrast ratio of 3:1.
Level AA compliance requires a contrast ratio of 3.0:1.
Level AA compliance requires a contrast ratio of 3.0:1.
Is the colour contrast you set in your ::selection CSS declaration sufficient? Otherwise, someone may not be able to read it if they highlight it.
Headings
Headings help structure content into a logical typographic hierarchy that breaks up the content in meaningful way. A strict typographic hierarchy helps especially people that uses assistive technologies to understand the meaning of a page.
Heading elements construct a document outline, and should not be used for purely visual design.
The h1 element should be used to communicate the high-level purpose of the page or view. Do not use the h1 element for a heading that does not change between pages or views (for example, the site's name).
The order of heading elements should descend, based on the 'depth' of the content. For example, a h4 element should not appear on a page before the first h3 element declaration. A tool such as headingsMap can help you evaluate this.
For example, don't jump from a h2 to a h4, skipping a h3 element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.
Controls
Controls are interactive UI elements that allow users to navigate through the application or trigger actions.
Links should always have a href attribute, even when used in Single Page Applications (SPAs). Without a href attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an onclick event, in place of a href attribute.
Colour alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.
Visible focus styles help people determine which interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination.
Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus. You can add type='button' to a button element to prevent the browser from attempting to submit form information when activated.
A skip link can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget.
Terms like 'click here' and 'read more' do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.
Lists
A list is a set of related items that are grouped together.
This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements.
Tables
A tables is a structured set of data that are mostly arranged in rows and columns.
Do you need to display data in rows and columns? Use the table element.
Depending on how complex your table is, you may also consider using scope='col' for column headers, and scope='row' for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table.
Images
Images are widely used to enhance the communication and to enrich the user experience.
alt attributes (alt text) give a description of an image for people who may not be able to view them. When an alt attribute isn't present on an image, a screen reader may announce the image's file name and path instead. This fails to communicate the image's content.
Null alt attributes are also sometimes known as empty alt attributes. They are made by including no information between the opening and closing quotes of an alt attribute. Decorative images do not communicate information that is required to understand the website's overall meaning. Historically they were used for flourishes and spacer gif images but tend to be less relevant for modern websites and web apps.
Is there a plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating.
For example, the FedEx logo should have an alt value of 'FedEx.'
Forms
Forms allow users to enter information into the application or site for processing, storage and manipulation e.g., creating an account or placing an order.
Use a for/id pairing to guarantee the highest level of browser/assistive technology support.
Does your form contain multiple sections of related inputs? Use fieldset to group them, and legend to provide a label for what this section is for.
Providing a mechanism to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number).
This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.
Techniques such as using aria-describedby allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.
People who are colour blind, who have other low vision conditions, or different cultural understandings for colour may not see the state change or understand what kind of feedback the state represents if colour is the only indicator.
Media
Media is pre-recorded or live audio or video content.
Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of auto-playing video and animation can be a trigger for vestibular and seizure disorders.
Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <input type='range'>.
Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the Space key can pause playback. Make sure you also don't interfere with the Space key's ability to scroll the page/view when not focusing on a form control.
Animation
Applying motion to UI elements, controls or content. The animation can be activated by its own or triggered though a user interaction.
Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD.
Background video can be distracting, especially if content is placed over it.
Mobile
A few things that can make mobile experiences more accessible.
Does the site only allow portrait orientation?
Requiring someone to scroll horizontally can be difficult for some, irritating for all.
Next steps
If you have met all the success criteria in the Accessibility Checklist then your product has become much more accessible and you are well on your way to become Level AA compliant. To become fully Level AA compliant, then follow the Accessibility Guidelines.