Accessibility Checklist βœ…

I'm committed to making sure the online world is an accessible place. Below is a checklist to help you get started based off the widely accepted Web Content Accessibility Guidelines (WCAG) πŸ€—

WCAG 2.1 Level A

Each section can be expanded, and has links to the respective section on the WC3 website for more information.

πŸ“Έ Provide text alternatives for non-text content

Content such as images need to have a text alternative so the information can be accessible to all. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so they can read it.

For CAPTCHAs as they tend to push the edge of human abilitiies in order to defeat automated processes, having a few CAPTCHA alternatives, providing access to a human customer service rep who can bypass the CAPTCHAΒ for the user, or not requiring CAPTCHAs for authorized users are a few ways to get around this.

Additional Information By W3

🎀 Ensure an alternative to video-only and audio-only content

The same idea as above with images, by providing a text alternative to video-only and audio-only content, you give all users the ability to consume the content in a way that matches their needs.

You can do this easily by linking to video transcripts and writing a brief summary of what the video or audio content is about.

Additional Information By W3

πŸ“Ή Ensure that videos with audio has captions

Along with transcripts for video-only and audio-only content, providing captions inside the content itself so a user can read the captions while watching the video.

This benefits those who are deaf or have hearing loss, as well as users in public spaces who can't use their audio.

Additional Information By W3

🎨 Create an audio description or media alternative

Whereas the above points relate to creating an additional way to consume what's being said in video-only or audio-only content, this is specifically around providing audio or text prompts to help people who have difficulty watching video or other synchronized media content, including people who have difficulty perceiving or understanding moving images.

An example could be describing a scene change in a video, introducing new characters, and describing what is happening during pauses in dialogue.

Additional Information By W3

⭐ Ensure a clear information hierarchy and ensure forms are clearly labeled with required items and errors

Sighted users can perceive structure and relationships of information through various visual cues - links being blue and underscored, errors or discounts being highlighted in red, headings being larger, bold font in paragraphs, bullet points, etc.

Screen readers often can pull a lot of this information if it's clearly labeled in the code.

Sometimes technologies do not provide a means to programmatically deteremine and share these cues to all users, and in those cases, we can provide additional prompts to ensure the information comes across correctly.

One example is adding an asterisk (*) on form fields that are required.

Another example is if form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are programmatically associated with the appropriate form fields so that assistive technology users can determine the required fields.

Additional Information By W3

🌈 Provide a clear information hierarchy

Content on websites often have a clear sequence in which you should consume the content. A sequence is meaningful if the order cannot be changed without affecting its meaning.

For example if there are two independent articles on a page, and one articles gives context to the other, there is a meaningful sequence.

This is often defined through HTML in the form of tables and ordered lists having meaningful sequence, and unordered lists not.

The goal of this is to have the content presented in the same order written as it is in spoken form.

Additional Information By W3

πŸ‘ƒ Create a clear explanation of sensory characteristics

The goal of this Success Criterion is to ensure that every user can access intructions for using the content, even when they cannot percieve the shape or size or use information about spaciatl location or orientation.

Although these cues are very effective, including those with cognitive limitations, and should continue to be used, this is about ensuring users who are blind or have low vision to also access the same level of depth.

Some users using assistive technology won't be able to perceive shape or position.

For example on an online survey or onboarding sequence might have an arrow on the right hand of the screen point right suggesting 'next' and an arrow on the left hand side point left suggesting 'back'. Which this is a handy cue, this information won't be able to be understood by some assistive technology, so adding a clear "Next" label on the arrow and instructions which state "to move to the next section, select the green arrow labelled 'next' in the lower right hand corner below the last survey question."

Additional Information By W3

🟩 Provide assistance when using colour

Colour is a very important part of ensuring web content is accessible, aesthetically pleasing, and usable. However, some users have difficulty perceiving colour.

Sometimes colour is used to indicate action, such as a link being blue. Other times it can be used to prompt a response, such as highlighting on form fields to indicate a required form field has been left blank.

However there are plenty of users who often experience limited colour vision, such as older users, users with colour blindness, people using text-only displayed, and more.

By adding clear tags you can enhance the experience to those who can't perceive colour. For example in the New Zealand road code which often uses cars of two colours to describe situations can mention the position and colour of each car in the image.

A red car is waiting while indicating to turn right, giving way to the blue car going straight.
A red car is waiting while indicating to turn right, giving way to the blue car going straight.

Another example could be on forms, adding icons whose alternative text says 'required' on the required field .

Additional Information By W3

πŸ”Š Provide audio control

Individuals using screen reading software can find it hard to hear the speech output if there is other audio playing at the same time.

This is made even worse as the audio for most screen reading software is controlled the same way as the sound playing from the video so it's crucial to be able to turn off the sound coming from web content quickly and easily.

To solve this, you can display audio controls on the video, or add the ability to easily silence any audio from the page.

In most cases, audio that automatically plays can be annoying for any user so it's usually best to avoid this.

Additional Information By W3

⌨ Making sure content is accessible via the keyboard

Users that are blind (who cannot use devices such as a mouse which requires hand-eye coordination), have low vision (who may have trouble finding or tracking a pointer indicator on the screen), or have hand tremors who find using a mouse more difficult need to be able to navigate a website through keyboard alone.

One example of making your content accessible for a program that allows drag drop functionality, is to also allow users to "cut" and "paste" with a keyboard.

Another example is by making sure drop downs like menus are able to be targeted through tabbing and opened.

Additional Information By W3

πŸ₯… Ensure there are no keyboard traps

Plug-ins on websites or embedded applications such as calendar software can sometimes trap users inside the embedded application and not let users exit the through the keyboard alone.

Ensure every plug-in or embedded application allows users to leave.

Examples of this could be calendar software, booking software for car hire companies, embedded checkout software for eCommerce, or embedded maps on contact pages.

Another example is pop-up software that makes the 'x' to close the pop-up impossible to select with a keyboard.

Additional Information By W3

πŸ€— Understanding character key shortcuts

Shortcuts often help users save time when using web applications such as our email, or our calendar.

While these single character shortcuts can be valuable for keyboard users, they can become inappropriate and frustrating for speech input users, and even for keyboard users who are prone to accidentally hit keys.

To ensure this isn't an issue, you need to allow users to either turn off or reconfigure shortcuts that are made up of only character keys.

For example, a speech-input user named Kim has her cursor focus in the main window of a web mail application that uses common keyboard shortcuts to navigate ("k"), archive ("y") and mute messages ("m"). A coworker named Mike enters her office and says "Hey Kim" and her microphone picks that up. The Y of "hey" archives the current message. K in "Kim" moves down one conversation and M mutes a message or thread. And, if Kim looks up and says "Hey Mike" without remembering to turn off the microphone, the same three things happen in a different sequence.

Additional Information By W3

⏰ Allowing users to adjust time limits

The goal of this Success Criterion is to ensure that users with disabilities have the adequate time to interact with content whenever possible.

Users with disabilities such as low-vision, blindness, cognitive limitations, or dexterity impairments may take longer to interact with content such as filling out forms. And if there's a time limit, it makes the process more difficult and in some cases impossible for these users.

There are a range of exceptions here such as if the time limit is due to a real-life event.

To resolve this, simply giving users the ability to turn off the time limit before encountering it, allowing users to adjust the time limit, allowing users to extend the limit at least 20-seconds before the time expires, and more.

Additional Information By W3

⏸ Allowing users to pause, stop, and hide distracting content

The goal of this Success Criterion is to ensure that users can avoid distraction during their interaction with a website.

"Moving, blinking and scrolling" refers to visible content that conveys a sense of motion.

This is any information that (1) starts automatically, (2) lasts for more than five seconds, and (3) is present in parallel with other content.

If those three criteria are met, there needs to be a way for a user to pause, stop, or hide it.

The same goes for auto-updating information such as weather updates, stock-tickers, or games.

Additional Information By W3

πŸ’‘ Ensuring content has three flashes or below

The goal of this Success Criterion is to allow users full access to the content of a site without inducing seizures due to photosensitivity.

This could include video content, or GIFs that contain scenes involving very bright lightning flashes.

Solutions are either editing the content so the content only flashes three times in any one second period or less, or removing the content altogether.

Additional Information By W3

⚑ Allow users to bypass repeated blocks

The goal of this Success Criterion is to allow people who use assistive technology to skip repeated sections of websites.

Most websites contain content that's repeated consistently, such as navbars, blocks for advertising, search icons, and more. If your website or app contains a lot of these blocks, giving users a link to skip to the main content is recommended.

While sighted users can quickly navigate to the main section of content, users who use assistive technology might have to tab 40+ times on each new page to actually get to the main content.

Example solutions from W3:

  • A news organization's home page contains a main story in the middle of the page, surrounded by many blocks and sidebars for advertising, searching, and other services. There is a link at the top of the page that jumps to the main story. Without using this link, a keyboard user needs to tab through approximately 40 links to reach the main story; the screen reader user has to listen to 200 words; and the screen magnifier user must search around for the location of the main body.
  • An e-commerce website includes a long list of filters prior to the search results listing. A link above the list enables users to skip the filters and get to the product results quickly.
Additional Information By W3

🧊 Provide clear page titles

The goal of this Success Criterion is to allow users to quickly find content and understand where they are on a website or app through a clear page and section title.

You can see the title of a page by looking at the tab on your browser.

On top of helping a range of users such as people with cognitive disabilities like short-term memory or reading disabilities, clear titles help all users quickly and easily identify whether the information contained on a page is useful and relevant to their needs.

If a meta title isn't pre-defined, your page title will also be shown on search engines like Google and a clear title can help improve the number of users who find you through search.

Additional Information By W3

πŸ” Creating a clear focus order

The goal of this success criterion is to allow users to quickly navigate content in a logical way.

This can help users with mobility impairments who rely on keyboard access, those with disabilities who can become disorientated if the focus moves somewhere unexpected, or users using a screen magnifier who can only see a small portion of the page.

An example of a clear focus order is on YouTube where you tab through the controls down the bottom of a video, and each time if focuses on a new control each time going left to right.

An example of a unclear focus order would be on a web form, where the focus jumps from the first question, to the last question, then back up to the second question, and so on.

Additional Information By W3

πŸ€” Creating descriptive links

Assistive technology often has the ability for the user to see a list of all the links a web page contains so the user can quickly move towards the information they're looking to find.

However, if the link isn't descriptive, then the user will have a much harder time navigating the website.

An example of bad link text is 'learn more' or 'click here' as by itself the text of these links describe nothing about what the user is learning more about.

On the other hand, take a look at Wikipedia for inspiration on descriptive links.

Additional Information By W3

πŸ‘ˆ Allowing pointer gestures

All functionality that uses multi-point or path-based gestures for operation can use for operation can also be operated with a single pointer without path-based gesture, unless it is essential.

For example, a map widget on a website that allows a pinch to zoom (multi-point gesture) also has a plus and minus arrow to allow users to zoom in and out with a single pointer.

Another example is a kanban widget like Trello which allows users to drag and drop (path-based gesture) to also allow users to move an element between columns by selecting the element with a single tap or click, and then activating an arrow button to move the selected element.

Additional Information By W3

❌ Allowing pointer cancellation

People with various disabilities can inadvertently initiate touch or mouse events with unwanted results.

The goal of this is to allow users to easily cancel pointer operations, and to allow users to quickly recover from hitting the wrong target.

One example is a drag and drop app, where when you click down and hold, you select an element, and when you release the click, it drops the element. To help users recover quickly, if the user drops the element outside the target area, the program could move the element back to its original position.

Additional Information By W3

🏷 Put labels in the name

Most controls are accompanied by a visible text label.

Those same controls have a programmatic name, also known as the Accessible Name.

Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name.

In the example image below, "B", "I", and "ABC" appear on icons in a text editor, where they are meant to symbolize the functions for Bold, Italics, and Spelling, respectively. In such a case, the accessible name should be the function the button serves, e.g., "Spell check" or "Check spelling".

Figure 1A detail of the rich text editor in Github, showing a variety of unlabeled icons, including icons resembling text characters.
The rich text editor in Github, showing a variety of unlabeled icons, including icons resembling text characters.

‍

Additional Information By W3

πŸš— Ensure everyone can access and turn off motion features

The intent of this success criterion is to ensure that functions triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device, can also be operated by more conventional user interface components.

On top of this, some users may accidentally activate these commands due to tremors or other motor impairments so the user must also have the ability to turn these motion features off.

One example is on some phones which have the functionality to shake the phone to undo the last action you did. You can make this more accessible by adding in a button to be able to undo, and giving the user the ability to turn this feature off.

Additional Information By W3

β›³ Correctly declare the language of a page

Content developers who are creating content on web pages must declare the correct language to make it easier for people who use assistive technology to quickly understand the language of a page.

For example, if you have a page that's predominantly in German with some English, you can declare the language by setting the lang attribute on the html element to German (de).

Below you can see a screenshot of the backend of our website built on Webflow where we have set the language of this website to English (en), since most of our content is currently in English.

The backend of Webflow which allows you to set site-wide and page specific languages.
The backend of Webflow which allows you to set site-wide and page specific languages.

This is also best practice to help your content rank higher on Google.

Additional Information By W3

πŸ‘€ Ensure predictable control when changing focus on a page

The goal of this is to simply ensure that functionality is predictable as a user goes through your website or app.

Focus is usually controlled via the keyboard (e.g. tabbing to control), the mouse (e.g. clicking on a text field).

We want to make sure that an element doesn't change context when it receives focus.

For example, you don't want links opening automatically, pop-ups appearing, or forms submitting when you initially focus on the element.

Examples fromΒ W3:

  • Example 1: A dropdown menu - A dropdown menu on a page allows users to choose between jump destinations. If the person uses the keyboard to move down to a choice and activates it (with a spacebar or enter key) it will jump to a new page. However, if the person moves down to a choice and either hits the escape or the tab key to move out of the pulldown menu – it does not jump to a new screen as the focus shifts out of the dropdown menu.
  • Example of a Failure: A help dialog - When a field receives focus, a help dialog window describing the field and providing options opens. As a keyboard user tabs through the Web page, the dialog opens, moving the keyboard focus away from the control every time the user attempts to tab past the field.
Additional Information By W3

🎁 Ensure predictable outcomes on inputs

Similar to the above, the goal here is to ensure that each input has a predictable outcome.

This could be as simple as ensuring that when a user selects 'agree to terms and conditions' that this stays selected when the user tabs onto the next field.

Examples from W3:

  • A form is provided for creating calendar entries in a Web based calendaring and scheduling application. Along with the standard fields for subject, time and location, there is a set of radio buttons to select the type of calendar entry to create. The calendar entry type can be meeting, appointment or reminder. If the user selects the radio for meeting, additional fields are displayed on the page for entering the meeting participants. Different fields appear if the reminder button is chosen. Because only parts of the entry change and the overall structure remains the same the basic context remains for the user.
  • A form contains fields representing US phone numbers. All of the numbers have a three digit area code followed by a three digit prefix and finally a four digit number, and each part of the phone number is entered into a separate field. When the user completes the entry of one field the focus automatically moves to the next field of the phone number. This behavior of phone fields is described for the user at the beginning of the form.
Additional Information By W3

πŸ’£ Give users clear error identification

The goal here is to give users a very clear indication if an error has occurred, and help them easily determine what's wrong.

It's not enough for a form to display 'oops something went wrong' or highlight the form in red for example. Instead the form needs to clearly articulate which field needs the users attention.

Errors must at a minimum be identified with text as screen readers can often not pick up highlight-only errors and the user will have no idea that there any errors occurred.

This helps users with colour-blindness or low vision understand errors since the website isn't only relying on colour prompts. On top of this, you'll be making your website more accessible to users with cognitive, language, and learning disabilities who have difficulty understanding the meaning represented by icons and other visual cues.

Examples by W3:

  • Identifying errors in a form submission - An airline Web site offers a special promotion on discounted flights. The user is asked to complete a simple form that asks for personal information such as name, address, phone number, seating preference and e-mail address. If any of the fields of the form are either not completed or completed incorrectly, an alert is displayed notifying the user which field or fields were missing or incorrect.‍
  • Providing multiple cues - The user fails to fill in two fields on the form. In addition to describing the error and providing a unique character to make it easy to search for the fields, the fields are highlighted in yellow to make it easier to visually search for them as well
Additional Information By W3

🎫 Provide clear form labels or instructions

The goal of this success criterion is to help users understand what information a form requires. Especially if the form is requesting the information in a specific way (such as abbreviations, dates that require a specific format, or NZ bank-account information that requires 2, 4, 7, 3 number format).

Examples by W3:

  • A field for entering a date contains initial text which indicates the correct format for the date.
  • A field for entering a given name is clearly labeled with "Given Name" and the field for family name is labeled "Family Name" to avoid confusion over which name is requested.
  • In a form which contains both required and optional fields, the required fields and/or the optional fields are clearly labeled as such.
Additional Information By W3

πŸ‘“ Ensure accurate parsing

The goal of this is to ensure that user agents, including assistive technologies, can accurately interpret or parse content.

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Additional Information By W3

πŸ€— Clear names, roles, and values

The intent of this is to ensure that Assistive Technologies (AT) can gather information about, activate (or set) and keep up to date on the status of user interface controls in the content.

When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification the conditions of this provision will be met.

If custom controls are created, however, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies.

A particularly important state of a user interface control is whether or not it has focus.

The focus state of a control can be programmatically determined, and notifications about change of focus are sent to user agents and assistive technology. Other examples of user interface control state are whether or not a checkbox or radio button has been selected, or whether or not a collapsible tree or list node is expanded or collapsed.

Additional Information By W3

WCAG 2.1 Level AA (Coming Soon)

WCAG 2.1 Level AAAΒ (Coming Soon)