4

Checklist - The A11Y Project

 2 years ago
source link: https://www.a11yproject.com/checklist/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

The A11Y ProjectSkip to content.

This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.

There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:

wcag-level-a-small.svg

A: Essential If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.

wcag-level-aa-small.svg

AA: Ideal Support Required for multiple government and public body websites. The A11Y Project strives for AA compliance.

wcag-level-aaa-small.svg

AAA: Specialized Support This is typically reserved for parts of websites and web apps that serve a specialized audience.

This checklist targets many, but not all level A and AA concerns. Note that the different levels of WCAG support do not necessarily indicate an increased level of difficulty to implement.

Success criteria

Each item on this checklist has a corresponding WCAG “success criterion.” Success criterion are the specific, testable rules that power the WCAG, described by a reference number and short title. For example, the rule about text resizing is called 1.4.4 Resize text.

Some accessibility issues may have multiple success criterion apply to them. We have identified the one most relevant for each checklist item.

Does this checklist guarantee my site is accessible?

No. However, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.

The issues this checklist prompts you to check for covers a wide range of disability conditions. There is no such thing as “perfect accessibility” or a site being “100% accessible.” You should be wary of companies and services that make such promises. If you need professional accessibility help, use professional accessibility services.

Content

Content is the most important part of your site.

Task: Use plain language and avoid figures of speech, idioms, and complicated metaphors.
Use plain language and avoid figures of speech, idioms, and complicated metaphors.
Task: Make sure that button, a, and label element content is unique and descriptive.
Make sure that button, a, and label element content is unique and descriptive.
Task: Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.
Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.

Global code

Global code is code that affects your entire website or web app.

Task: Validate your HTML.
Validate your HTML.
Task: Use a lang attribute on the html element.
Use a lang attribute on the html element.
Task: Provide a unique title for each page or view.
Provide a unique title for each page or view.
Task: Ensure that viewport zoom is not disabled.
Ensure that viewport zoom is not disabled.
Task: Use landmark elements to indicate important content regions.
Use landmark elements to indicate important content regions.
Task: Ensure a linear content flow.
Ensure a linear content flow.
Task: Avoid using the autofocus attribute.
Avoid using the autofocus attribute.
Task: Allow extending session timeouts.
Allow extending session timeouts.
Task: Remove title attribute tooltips.
Remove title attribute tooltips.

Keyboard

It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.

Task: Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
Task: Check to see that keyboard focus order matches the visual layout.
Check to see that keyboard focus order matches the visual layout.
Task: Remove invisible focusable elements.
Remove invisible focusable elements.

Images

Images are a very common part of most websites. Help make sure they can be enjoyed by all.

Task: Make sure that all img elements have an alt attribute.
Make sure that all img elements have an alt attribute.
Task: Make sure that decorative images use null alt (empty) attribute values.
Make sure that decorative images use null alt (empty) attribute values.
Task: Provide a text alternative for complex images such as charts, graphs, and maps.
Provide a text alternative for complex images such as charts, graphs, and maps.
Task: For images containing text, make sure the alt description includes the image's text.
For images containing text, make sure the alt description includes the image's text.

Headings

Heading elements (h1, h2, h3, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view.

Task: Use heading elements to introduce content.
Use heading elements to introduce content.
Task: Use only one h1 element per page or view.
Use only one h1 element per page or view.
Task: Heading elements should be written in a logical sequence.
Heading elements should be written in a logical sequence.
Task: Don't skip heading levels.
Don't skip heading levels.

Lists

Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.

Task: Use list elements (ol, ul, and dl elements) for list content.
Use list elements (ol, ul, and dl elements) for list content.

Controls

Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.

Task: Use the a element for links.
Use the a element for links.
Task: Ensure that links are recognizable as links.
Ensure that links are recognizable as links.
Task: Ensure that controls have :focus states.
Ensure that controls have :focus states.
Task: Use the button element for buttons.
Use the button element for buttons.
Task: Provide a skip link and make sure that it is visible when focused.
Provide a skip link and make sure that it is visible when focused.
Task: Identify links that open in a new tab or window.
Identify links that open in a new tab or window.

Tables

Tables are a structured set of data that help people understand the relationships between different types of information.

Task: Use the table element to describe tabular data.
Use the table element to describe tabular data.
Task: Use the th element for table headers (with appropriate scope attributes).
Use the th element for table headers (with appropriate scope attributes).
Task: Use the caption element to provide a title for the table.
Use the caption element to provide a title for the table.

Forms

Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.

Task: All inputs in a form are associated with a corresponding label element.
All inputs in a form are associated with a corresponding label element.
Task: Use fieldset and legend elements where appropriate.
Use fieldset and legend elements where appropriate.
Task: Inputs use autocomplete where appropriate.
Inputs use autocomplete where appropriate.
Task: Make sure that form input errors are displayed in list above the form after submission.
Make sure that form input errors are displayed in list above the form after submission.
Task: Associate input error messaging with the input it corresponds to.
Associate input error messaging with the input it corresponds to.
Task: Make sure that error, warning, and success states are not visually communicated by just color.
Make sure that error, warning, and success states are not visually communicated by just color.

Media

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

Task: Make sure that media does not autoplay.
Make sure that media does not autoplay.
Task: Ensure that media controls use appropriate markup.
Ensure that media controls use appropriate markup.
Task: Check to see that all media can be paused.
Check to see that all media can be paused.

Video

Video-specific checks.

Task: Confirm the presence of captions.
Confirm the presence of captions.
Task: Remove seizure triggers.
Remove seizure triggers.

Audio

Audio-specific checks.

Task: Confirm that transcripts are available.
Confirm that transcripts are available.

Appearance

How your website app content looks in any given situation.

Task: Check your content in specialized browsing modes.
Check your content in specialized browsing modes.
Task: Increase text size to 200%.
Increase text size to 200%.
Task: Double-check that good proximity between content is maintained.
Double-check that good proximity between content is maintained.
Task: Make sure color isn't the only way information is conveyed.
Make sure color isn't the only way information is conveyed.
Task: Make sure instructions are not visual or audio-only.
Make sure instructions are not visual or audio-only.
Task: Use a simple, straightforward, and consistent layout.
Use a simple, straightforward, and consistent layout.

Animation

Content that moves, either on its own, or when triggered by a person activating a control.

Task: Ensure animations are subtle and do not flash too much.
Ensure animations are subtle and do not flash too much.
Task: Provide a mechanism to pause background video.
Provide a mechanism to pause background video.
Task: Make sure all animation obeys the prefers-reduced-motion media query.
Make sure all animation obeys the prefers-reduced-motion media query.

Color contrast

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

Task: Check the contrast for all normal-sized text.
Check the contrast for all normal-sized text.
Task: Check the contrast for all large-sized text.
Check the contrast for all large-sized text.
Task: Check the contrast for all icons.
Check the contrast for all icons.
Task: Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
Task: Check text that overlaps images or video.
Check text that overlaps images or video.
Task: Check custom ::selection colors.
Check custom ::selection colors.

Mobile and touch

Things to check mobile experiences for.

Task: Check that the site can be rotated to any orientation.
Check that the site can be rotated to any orientation.
Task: Remove horizontal scrolling.
Remove horizontal scrolling.
Task: Ensure that button and link icons can be activated with ease.
Ensure that button and link icons can be activated with ease.
Task: Ensure sufficient space between interactive items in order to provide a scroll area.
Ensure sufficient space between interactive items in order to provide a scroll area.

Next steps

Remember to periodically check your site to ensure it is still accessible. The A11Y Project also strongly encourages you to verify your testing by hiring a professional tester.

Further reading

TetraLogical has a good in-depth, yet still high-level explanation of the WCAG. Check it out if you want to learn more about its history and principles.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK