Checklist

Content

Content plays one of the most important part of your website.

Consider plain language without complicated metaphors, idioms etc.

Write content at an 8th grade level.

Make the button, a, and label element content unique and descriptive.

Try to avoid terms like “click here” and “read more” as they do not provide any context. There are people who navigate using a list of buttons or links on a page or view. Using this mode should indicate what will happen if navigated to or activated.

Use left-aligned text for left-to-right language and right-aligned for right-to-left languages.

VISUAL PRESENTATION 1.4.8

It is difficult read center-aligned and justified text.

Left-to-right languages abbreviation: LTR

Right-to-left abbreviation: RTL

Tables

Tables help people understand relationships between different types of information in a structured data set.

Describe tabular data by using the table element

INFO AND RELATIONSHIPS 1.3.1

Use the table element to display data in rows and columns.

For table headers (with appropriate scope attributes) use the th element.

PARSING 4.1.1

Depending on complexity of your table, you may want to consider using scope="row" for row headers and scope="col" for column headers. There are assistive technologies that use the scope attribute to help understand and describe the structure of a table.

To provide a title for the table use the caption element

HEADINGS OR LABELS 2.4.6

A table’s caption should describe the kind of information is in the table.

Lists

With the help of lists elements people know how a collection of items are related, if they are sequential, and the amount of items that are present in a list group.

For list content use list elements (ul, ol and dl)

INFO AND RELATIONSHIPS 1.3.1

This refers to sections of related content, sibling a elements and items visually displayed in a grid-like layout.

Forms

Forms help people enter information into a site for manipulation and processing such as sending messages or placing orders.

All inputs in a form are associated with a corresponding label element.

ON INPUT 3.2.2

To guarantee a high level of browser/assistive technology support use for/id pairing.

Use fieldset and legend elements in appropriate situations.

INFO AND RELATIONSHIPS 1.3.1

Use fieldset to group multiple sections of related inputs in a form and legend for label to describe what this section is for.

Inputs use autocomplete where appropriate.

IDENTIFY INPUT PURPOSE 1.3.5

Autocomplete helps people more quickly and accurately to fill in form fields (for example, name, phone number, address).

Display input errors in a list above the form after submission.

ERROR IDENTIFICATION 3.3.1

That way assistive technology users have a quick high-level understanding of what issues occur in a form. Make sure that a reported error has a link to the corresponding field that has an invalid input.

Associate input error messaging with the input it is associated to.

ERROR IDENTIFICATION 3.3.1

Using aria-describedbyallows assistive technology to easily understand the difference between the input and the error message.

Avoid using ONLY colors for visualising error, warning, and success states.

USE OF COLOR 1.4.1

There are people who are color blind or have other low vision conditions, this might can even concern different cultural understandings for color.

Heading

Heading elements such as h1, h2, h3, etc. help differ the content of the page. They are very important for people who use assistive technology to understand the meaning of a page or view.

Introduce content by using heading elements

HEADINGS OR LABELS 2.4.6

With heading elements you construct a document outline. Avoid using headings for the purpose of purely visual design.

Limit a page or view with one h1 element.

HEADINGS OR LABELS 2.4.6

Using h1 element communicates the high-level purpose of a page or view.

Write heading elements in a logical sequence.

HEADINGS OR LABELS 2.4.6

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.

Make sure heading levels are not skipped and are consistent.

HEADINGS OR LABELS 2.4.6

Heading levels should be consistent in example h2 to h3 to h4 element. A bad example would be h2 to h4 .

Color

Color and contrast is how legible colors are when placed next to, and on top of each other.

Check contrast ratio for all normal-sized text.

CONTRAST 1.4.3

The contrast ratio should be a minimum of 4.5:1 to be compliant with Level AA.

Check contrast ratio for all large-sized text.

CONTRAST 1.4.3

The contrast ratio should be atleast 3:1 to be compliant with Level AA.

Check the contrast for all icons.

1.4.11 NON-TEXT CONTRAST

Level AA compliance requires a contrast ratio of 3.0:1.

Check the contrast of borders of input elements e.g. text input.

NON-TEXT CONTRAST 1.4.11

The contrast ratio should be at least 3.0:1 for Level AA. Input elements can be radio buttons, text input, checkboxes etc.

Check text on images or video.

CONTRAST 1.4.3

It is important the text has good contrast and readable.

Check the custom ::selection colors.

CONTRAST 1.4.3

Make sure the color contrast you set in your ::selection CSS declaration is sufficient. There is a risk that it might not be readable when highlighted.

Keyboard

It is important to be able to navigate content with a keyboard as there are situations when people cannot use a mouse, or might be using other assistive technologies where hovering or precise clicking is not possible.

Make sure the focus style is visible for interactive elements when navigating via keyboard.

FOCUS VISIBLE 2.4.7

It is important to see where active elements are when navigating with a keyboard, voice control, switch* or screen reader.

*An assistive technology used mainly by people with motor impairments

Check so that the keyboard focus order matches the visual layout.

MEANINGFUL SEQUENCE 1.3.2

Make sure that navigating is consistent and moving around the page is predictable.

Avoid focusing on invisible elements.

FOCUS ORDER 2.4.3

Focusing on elements that are invisible can cause confusion because invisible elements are not meant to interact with.

Global code

Global code affects your entire website or web application.

Validate HTML.

PARSING 4.1.1

Valid HTML provides consistent and expected experience across all browsers including assistive technology.

Make sure to use lang attribute on the html element.

LANGUAGE OF PAGE 3.1.1

Lang attribute helps assistive technology like screen readers to pronounce content correctly.

Use unique titles for each page or view.

PAGE TITLED 2.4.2

The title element which is contained in a document’s head element would be the first information announced by assistive technology. This helps tell people know where they are going to start navigating.

Make sure viewport zoom is not disabled.

RESIZE TEXT 1.4.4

Text might need to be resized to a point where people can read.

To indicate important content regions use landmark elements

NAME, ROLE, VALUE 4.1.2

With landmark regions you help communicate important areas of a page or view. For example, use the nav element to wrap the site’s navigation, and the main element to contain the primary content.

Make sure there is a linear content flow.

FOCUS ORDER 2.4.3

Remove tabindex attribute values that are not either 0 or -1. Inherently focusable elements, such as links or button have no require for tabindex. And those elements that are not inherently focusable do not need a tabindex applied to them.

Skip using the autofocus attribute.

FOCUS ORDER 2.4.3

People who have low vision or are blind may be confused when the focus is moves without their permission. autofocus can be a problem for people with motor control disabilities as it might create extra work.

Allow to extend session timeouts

TIMING ADJUSTABLE 2.2.1

Allow people to be able to extend their session if you cannot remove timeouts altogether.

Remove title attribute tooltips.

NAME, ROLE, VALUE 4.1.2

Acceptable use of title attribute would be for labeling an iframe element in order to indicate what content it contains.

Media

Media includes content such as pre-recorded and live audio and video.

Avoid media autoplay.

AUDIO CONTROL 1.4.2

Autoplay can be distracting or disruptive, especially for cognitive disability like ADHD. And certain kinds of autoplaying of animations or videos can trigger vestibular and seizure disorders.

Ensure appropriate markup for media controls.

INFO AND RELATIONSHIPS 1.3.1

Examples like volume sliders using <input type="range">, mute button on audio that shows a pressed toggle state when active.

Make sure all media can be paused.

KEYBOARD 2.1.1

See to provide a global pause function on any media element. Pressing the Space key on a keyboard should pause playback, but make sure you don’t interfere with the Space key’s ability to scroll through the page or view while not focusing on a form control.

Video

Video-specific check.

Add or confirm the presence of captions.

CAPTIONS 1.2.2

A person who cannot hear the audio content of a video can still understand the content when captions are present.

Make sure there are no seizure triggers.

THREE FLASHES OR BELOW THRESHOLD 2.3.1

Seizures can be triggered by certain kinds of flashing or strobing animations.

Audio

Audio-specific checks.

Add or confirm transcripts.

NON-TEXT CONTENT 1.1.1

People who cannot hear can still understand the audio content with transcript.

Images

Images are common and it can be good to broaden the audience by making images accessible.

Consider removing title attribute tooltips.

NAME, ROLE, VALUE 4.1.2

The title attribute has numerous issues. There is an acception for using the title attribute e.g. labeling an iframe element to show what content it contains.

Animation

Animations are content that move when triggered or by themselves.

Ensure that animations do not flash too much.

THREE FLASHES OR BELOW THRESHOLD 2.3.1

Some people are sensitive to certain kinds of strobing or flashing animations and they can trigger seizures. People with cognitive disabilities like ADHD might be very distracted.

Allow to pause background video.

PAUSE, STOP, HIDE 2.2.2

Background video for some can be distracting in situations like when the content is placed over the video content.

See to that all animations obey the prefers-reduced-motion media query.

ANIMATION FROM INTERACTIONS 2.3.3

When the “reduce motion” setting is activated remove animations. When an animation is communicates a meaning for a concept try to slow down its duration.

Controls

Interactive elements such as links and buttons are considered controls, they let a person navigate to interested destination or perform specific actions.

Add the a element for links.

INFO AND RELATIONSHIPS 1.3.1

Links should always have a href attribute whether it is a multiple application page or a Single Page Application (SPA). href attribute in a link is needed so it can be properly exposed to assistive technology.

See to that links are recognised as links.

USE OF COLOR 1.4.1

Justs colouring links is not enough to indicate a link. For example a link with an underline is more recognisable.

See to that controls have :focus states.

FOCUS VISIBLE 2.4.7

Making focus styles visible help people recognise which interactive element has a keyboard focus. That way you know what can be interacted with when using a keyboard.

Use the button element for buttons.

INFO AND RELATIONSHIPS 1.3.1

Buttons are used to example submit data or perform an action. Add type="button" to a button element in order to prevent a browser from attempting to submit a form information when activated.

Add a skip link so it is visible when focused.

BYPASS BLOCKS 2.4.1

The skip link provides quick access to the main content of a page and allows a person to easily bypass globally repeated content.

Warn about links that open in a new tab or window.

G201: GIVING USERS ADVANCED WARNING WHEN OPENING A NEW WINDOW

In general avoid links that open in a window or tab, but if that is neccesary warn users about these actions. By doing this people will not be surprised when interacting and irritating factors reduce.

Appearance

How your website or app contents looks like in different situations.

Check your content in specialised browsing modes.

USE OF COLOR 1.4.1

Activate modes such as Windows High Contrast or Inverted Colors.

Increase text size to 200%.

RESIZE TEXT 1.4.4

Doing this will help users read content when using zoom.

Check that good proximity between content is maintained.

SENSORY CHARACTERISTICS 1.3.3

You can use the straw test to ensure that people who depend on screen zoom can easily discover content.

Make sure color isn’t the only way information used

USE OF COLOR 1.4.1

Apart from color consider form to highlight information.

See to that instructions are not only visual or only audio.

SENSORY CHARACTERISTICS 1.3.3

Use a combination of both visual and audio.

Use a consistent layout that is straight forward

REFLOW 1.4.10

Complicated layouts can be confusing to understand or even use.

Mobile & Touch

Don’t forget about mobile experiences

Concider portrait and landscape orientation.

ORIENTATION 1.3.4

For example if an application or website only supports landscape there might be difficulties when using a mobile phone.

Avoid orizontal scrolling.

REFLOW 1.4.10

Horizontal scrolling makes the interface less accessible and intuitive.

See to that button or link icons can be activated.

TARGET SIZE 2.5.5

It is good to make sure things like hamburger menus, social icons, gallery viewers, and other touch controls are usable by a wide range of people.

See to that there 2.5.5 sufficient space between interactive items in order to provide a scroll area.

BYPASS BLOCKS 2.4.1

Some people who experience motor control issues like hand tremors may have difficulties scrolling past interactive items when there is zero spacing between.

Checklist inspired by a11y Project.