Web Accessibility Checklist
By Julian Salas | Date Accessed: August 23, 2022
Images should have meaningful alternative text
Images should have meaningful and contextual alternative text which describes the image. Alternative text is read by screen readers in place of images, displayed in place of images if the image is not loaded and provides semantic meaning to images which can be read by search engines.
<img loading="lazy" src="image1.jpg" alt="Luke Skywalker" />
Links should be visually identifiable
Links should be visually identifiable and distinguishable from the standard copy. Use underlines as an easy way to show users when a link is present. If underlines aren’t used, make sure there is 3:1 contrast between link text and body text or some other visual identifier.
Use descriptive section headings
Break up long form content with section headings. They are useful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment, who may navigate by skipping between headings. Headings and labels should be clear and describe the intended topic.
Use correct semantic HTML element structure for your content
Choose the correct element for the current context to create a good web experience. Use correct heading tags to create a comprehensible page structure. Headings should not skip a level. All pages should have a
<h1> tag which describes the page.
<h1>Cars</h1> <h2>Honda</h2> <h3>Civic</h3> <h3>Fit</h3> <h2>Ford</h2> <h3>Focus</h3> <h2>Toyota</h2> <h3>Prius</h3> <h3>Corolla</h3>
Headings can be styled to look like other headings for design purposes.
Forms have descriptive labels
Each form input should have a label that accurately describes it’s purpose. Use
aria-label for elements that don’t have a visible label. Provide format if applicable (i.e date: MM/DD/YYY)
Information should not depend on color, sound, shape, size, or visual location
Be sure that information is not dependent on color, shape, size or location. There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.
Text and background color should have sufficient contrast
Check the text and background color to ensure an optimal contrast ratio so that it can be read by people with moderately low vision. Text should have a contrast ratio of at least 4.5:1 with the background. Color contrast should at least pass WCAG AA success criterion (AAA for mobile).
Content scales properly when zoomed/enlarged
Test web pages by zooming the page up to 200% as well as enlarging the text by 200%. Content should be readable and the page should not visually break when using these constraints.
Use a descriptive title tag
Web pages should have a title tag that accurately describes the page function or purpose. The title is typically the first content read by screen readers when the page is loaded.
Support keyboard navigation
Many users are physically unable to use a mouse, and might be navigating through the page using only a keyboard. Testing a website with a keyboard requires no special tools or skills, simply try tabbing your website using the keyboard only; don’t touch the mouse. Be sure to avoid any keyboard traps where the user becomes stuck in a keyboard loop. Make sure the order of all clickable elements on the page is logical.
Focus states should be visible for keyboard users
Ensure all clickable elements have a visible focus state to show keyboard users where they are on the page. Use the
:focus CSS selector to style this behavior. The user should never lose focus when tabbing through the elements of a page.
Use correct HTML5 input types
Using the correct input type is not only semantic, but will display the correct keyboard type on mobile devices and save the user from multiple annoying taps.
Content that automatically changes has the ability to be paused
Users must be able to pause movement on automatically changing content (carousels, slideshows, etc.) as it may be too fast or distracting, making text difficult to read. All functionality should be keyboard accessible. Changes to carousel or slideshow items must be communicated to all users, including screen reader users.
Limit or remove any flashing elements
Flashing elements are generally a bad idea, but if needed be sure flashing is less than 3 Hz (3 times a second).
Users should be able to navigate content using a screen reader
Pages should be designed for screen reader compatibility. Screen readers allow visually impaired users to consume web content through assistive technology that converts text into speech. It is important to structure markup properly to allow users to correctly navigate the content. Test web pages using a screen reader to verify correct page structure, link content, image alternative text, and spelling mistakes.
Allow keyboard users to skip navigation
Give keyboard users the ability to skip over all of the links, corporate icons, search bars and other navigation elements and allow them to navigate to the beginning of the page content.
Offer multiple ways to find pages on your website
Provide multiple ways for users to find your website’s pages by:
- Adding an HTML sitemap page (which links to every page on your website).
- Including a search function on every page.
- Providing a clear and consistent main navigation menu.
Avoid mouse only interactions
Do not rely on hover states to convey information as this approach is not screen reader, keyboard or mobile accessible.
Set focus on modals, popovers, alerts etc.
Interactions which pull the user away from their current state of the page must give context and correctly put their focus state back to where they were on the page. Pressing the Escape key `Esc` should also close all dialogs.
Site should not time out unexpectedly
Be sure the site doesn’t time out without user acknowledgement. Allow the user to request more time. Allow session re-authentication without loss of data.
Multimedia should have alternative ways to be consumed
Ensure that multimedia elements are accessible and can be consumed by everyone. Videos should have options for captioning. Audio-only content should have transcripts. Media players should be keyboard accessible. Allow audio volume to be controlled.
Ensure audio and video is not played automatically unless that is the expected behaviour
Media that is played automatically may confuse users and execute functionality that is out of the users control. Non-sighted users who depend on screen readers may not be able to understand or navigate the page.
Use the HTML lang attribute
The HTML lang attribute (
<html lang="en">) is used to identify the language of text content on the web. This information helps screen readers switch language profiles to provide a better user experience.
Use understandable inputs labels
Labels should be clear and understandable so they identify the controls in a form and the user knows what information is expected to be entered. Labels should always be visible.
Forms have helpful and accessible error and verification messages
Use descriptive error explanations close to the invalid input, explaining what is wrong and how to fix it. Simply coloring the field red is not enough. Error messages should be in text which explains the error along with how to fix it and should be accessible by screen readers.
Make data available for graphs, charts, maps, SVGs etc. through assistive technology
Make sure data is accessible via screen readers. Some chart or map plugins do not allow for data to be read by screen readers. Look for images of text where the same presentation can be accomplished using true text. Provide text alternatives for non-text content. Allow Scalable Vector Graphics (SVG) content to be as accessible as possible. Place the SVG element in the HTML directly, provide a ‘title’, provide a ‘description’, make it focusable and give it a role attribute.
Links should be descriptive and provide intent
Avoid links with non-descriptive text (i.e. “Click Here”). Have the link describe where the user will go when clicking (or tapping on a mobile device). Any destructive actions, such as deleting sensitive information, should be clearly expressed. Utilize
aria-label to give context to screen readers (i.e. “Learn More
<a href="/cats" aria-label="Learn More About Cats">Learn More</a>“).
Avoid links that open a new tab or window. If nessesary provide an indication of the behavior (text or icon).
Table data is accessible to non-sighted users
Tables allow users to visually associate data contextually. This is not possible for non-sighted users. Be sure to use proper table elements, and not to style other elements to look like a table. Use the <caption> tag to describe the data that the table represents. Table headers should never be empty. Use the scope attribute to properly associate data cells with appropriate headers.
Use ARIA landmarks where applicable
Accessible Rich Internet Applications (ARIA) allow assistive technologies to convey appropriate information to people with disabilities. ARIA in HTML is a combination of ‘roles’ (which identify an element’s purpose) and ‘aria’ attributes (which describe things about it and what it’s up to).
Decorative images should not be visible to screen readers
Hide decorative, accent or any images that do not convey any information from screen readers. Move these images to CSS and use them as background images as they are purely for style. Using ‘aria-hidden’ attribute is also a viable option.
Pages are understandable with no styles enabled
Testing web pages with styles disabled is a great way to catch some accessibility issues like page structure, non-informational images readable by screen reader, as well as other issues like heading order. Use a tool like the WAVE Evaluation Tool to test pages with no styles.
Web page size should not exceed 500k
Having a small page size ensures users with a slower bandwidth can access your page.
HTML should be valid and error-free
Valid HTML allows both browsers and screen reader software to accurately render pages.
- Ensure element IDs are unique.
- Find missing or unbalanced HTML tags in your documents
- Remove stray characters
- Correct missing and invalid attributes
About This Article:
A Life Worth Living has copied the content of this article under fair use in order to preserve as a post in our resource library for preservation in accessible format. Explicit permission pending.
Link to Original Article: https://webaccessibilitychecklist.com