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.

Example:

<img loading="lazy" src="image1.jpg" alt="Luke Skywalker" />

Read More:

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.

Read More:

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.

Read More:

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.

Example:

<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>

Tip:

Headings can be styled to look like other headings for design purposes.

Read More:

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)

Read More:

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.

Read More:

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).

Read More

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.

Read More:

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.

Read More:

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.

Read More

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.

Read More:

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.

Read More:

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.

Read More:

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).

Read More:

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.

Read More:

Tools:

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.

Read More:

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.

Read More:

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.

Read More:

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.

Read More:

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.

Read More:

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.

Read More:

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.

Read More:

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.

Read More:

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).

Read More:

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.

Read More:

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).

Resources:

Read More:

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.

Tools:

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.

Read More:

Web page size should not exceed 500k

Having a small page size ensures users with a slower bandwidth can access your page.

Tools:

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