Website Accessibility Checklist

This checklist is to be used as a tool to ensure new and existing websites, apps, digital services, and products meet WCAG 2.1 AA conformance. The first half of this checklist is the quick reference guide to WCAG 2.1 as published by the Web Content Accessibility Group: The second half is noteworthy items used to meet applicable criteria, as first developed by the A11Y Project. Opens In A New Window

WCAG 2.1 Checklist Level A

Guideline - Must Meet Conformance

Summary

1.1.1 – Non-text Content Opens In A New Window - Provide text alternatives for non-text content.

1.2.1 – Audio-only and Video-only (Pre-recorded) Opens In A New Window - Provide an alternative to video-only and audio-only content.

1.2.2 – Captions (Pre-recorded) Opens In A New Window - Provide captions for videos with audio.

1.2.3 – Audio Description or Media Alternative (Pre-recorded) Opens In A New Window - Video with audio has a second alternative.

1.3.1 – Info and Relationships Opens In A New Window - Logical structure.

1.3.2 – Meaningful Sequence Opens In A New Window - Present content in a meaningful order.

1.3.3 – Sensory Characteristics Opens In A New Window - Use more than one sense for instructions

1.4.1 – Use of Color Opens In A New Window - Don’t use presentation that relies solely on color.

1.4.2 – Audio Control Opens In A New Window - Don’t play audio automatically.

2.1.1 – Keyboard Opens In A New Window - Accessible by keyboard only.

2.1.2 – No Keyboard Trap Opens In A New Window - Don’t trap citizens using keyboard.

2.2.1 – Timing Adjustable Opens In A New Window - Time limits have citizen controls.

2.1.4 - Character Key Shortcut Opens In A New Window-Make all keyboard shorcuts easily configurable.

2.2.2 – Pause, Stop, Hide Opens In A New Window - Provide citizen controls for moving content.

2.3.1 – Three Flashes or Below Opens In A New Window - No content flashes more than three times per second.

2.4.1 – Bypass Blocks Opens In A New Window - Provide a ‘Skip to Content’ link.

2.4.2 – Page Titled Opens In A New Window - Use helpful and clear page titles.

2.4.3 – Focus Order Opens In A New Window - Logical order of components.

2.4.4 – Link Purpose (In Context) Opens In A New Window - Every link’s purpose is clear from its context.

2.5.1 - Pointer Gestures Opens In A New Window - Make all multipoint/path-based gestures operable with a single pointer.

2.5.2 - Pointer Cancellation Opens In A New Window - Make the pointer have the ability to cancel an operation.

2.5.3 - Label in Name Opens In A New Window - Make sure labels and code match what is visually presented.

2.5.4 - Motion Actuation Opens In A New Window - When using motion activation for a task, make sure there are options for others to complete the same task.

3.1.1 – Language of Page Opens In A New Window - Page has a language assigned.

3.2.1 – On Focus Opens In A New Window - Elements do not change when they receive focus.

3.2.2 – On Input Opens In A New Window - Elements do not change when they receive input.

3.3.1 – Error Identification Opens In A New Window - Clearly identify input errors.

3.3.2 – Labels or Instructions Opens In A New Window - Label elements and give instructions.

4.1.1 – Parsing Opens In A New Window - No major code errors.

4.1.2 – Name, Role, Value Opens In A New Window - Build all elements for accessibility.

WCAG 2.1 Checklist Level AA

Guideline - Must Meet Conformance

Summary

1.2.4 – Captions (Live) Opens In A New Window - Live videos have captions.

1.2.5 – Audio Description (Pre-recorded) Opens In A New Window - Citizens have access to audio description for video content.

1.3.4 - Orientation Opens In A New Window - Content isn't restricted due to orientation of the device.

1.3.5 - Identify Input Purpose Opens In A New Window - Programmatically setup up input fields to identify data capture to make it easier to fill out.

1.4.3 – Contrast (Minimum) Opens In A New Window - Contrast ratio between text and background is at least 4.5:1.

1.4.4 – Resize Text Opens In A New Window - Text can be resized to 200% without loss of content or function.

1.4.5 – Images of Text Opens In A New Window - Don’t use images of text.

1.4.10 - Reflow Opens In A New Window - Make sure that content reflows without having to scroll left to right.

1.4.11 - Non-Text Contrast Opens In A New Window - Make sure color contrast of citizen components, states, and graphical objects meets at least 3:1 against adjacent colors.

1.4.12 - Text Spacing Opens In A New Window - Ensure that text content has sufficient spacing.

1.4.13 - Content on Hover or Focus Opens In A New Window - Make sure that content that appears on hover and focus is unobtrusive.

2.4.5 – Multiple Ways Opens In A New Window - Offer several ways to find pages.

2.4.6 – Headings and Labels Opens In A New Window - Use clear headings and labels.

2.4.7 – Focus Visible Opens In A New Window - Ensure keyboard focus is visible and clear.

3.1.2 – Language of Parts Opens In A New Window - Tell citizens when the language on a page changes.

3.2.3 – Consistent Navigation Opens In A New Window - Use menus consistently.

3.2.4 – Consistent Identification Opens In A New Window - Use icons and buttons consistently.

3.3.3 – Error Suggestion Opens In A New Window - Suggest fixes when citizens make errors.

3.3.4- Error Prevention (Legal, Financial, Data) Opens In A New Window - Reduce the risk of input errors for sensitive data.

4.1.3 - Status Messages Opens In A New Window - Provide confirmation of task completion.

WCAG 2.1 Checklist Level AAA

Guideline - Strive for Conformance Where and When Appropriate

Summary

1.2.6 – Sign Language (Pre-recorded) Opens In A New Window - Provide sign language translations for videos.

1.2.7 – Extended Audio description (Pre-recorded) Opens In A New Window - Provide extended audio description for videos.

1.2.8 – Media Alternative (Pre-recorded) Opens In A New Window - Provide a text alternative to videos.

1.2.9 – Audio Only (Live) Opens In A New Window - Provide alternatives for live audio.

1.3.6 - Identify Purpose Opens In A New Window - Allow for components, icons, and regions to be viewed contextually with symbols.

1.4.6 – Contrast (Enhanced) Opens In A New Window - Contrast ratio between text and background is at least 7:1.

1.4.7 – Low or No Background Audio Opens In A New Window - Audio is clear for listeners to hear.

1.4.8 – Visual Presentation Opens In A New Window - Offer citizens a range of presentation options.

1.4.9 – Images of Text (No Exception) Opens In A New Window - Don’t use images of text.

2.1.3 – Keyboard (No Exception) Opens In A New Window - Accessible by keyboard only, without exception.

2.2.3 – No Timing Opens In A New Window - No time limits.

2.2.4 – Interruptions Opens In A New Window - Don’t interrupt citizens.

2.2.5 – Re-authenticating Opens In A New Window - Save citizen data when re-authenticating.

2.2.6 - Timeouts Opens In A New Window - Provide citizens enough time to read and use content.

2.3.2 – Three Flashes Opens In A New Window - No content flashes more than three times per second.

2.3.3 - Animation from Interactions Opens In A New Window - Do not design content in a way that is known to cause seizures or physical reactions.

2.4.8 – Location Opens In A New Window - Let citizens know where they are.

2.4.9 – Link Purpose (Link Only) Opens In A New Window - Every link’s purpose is clear from its text.

2.4.10 – Section Headings Opens In A New Window - Break up content with headings.

2.5.5 - Target Size Opens In A New Window - Make the target area for pointer inputs large enough to use.

2.5.6 - Concurrent Input Mechanisms Opens In A New Window - Do not restrict the use of multiple input modes (mouse, keyboard, speech, stylus, etc).

3.1.3 – Unusual words Opens In A New Window - Explain any strange words.

3.1.4 – Abbreviations Opens In A New Window - Explain any abbreviations.

3.1.5 – Reading Level Opens In A New Window - Citizens with nine years of school can read your content.

3.1.6 – Pronunciation Opens In A New Window - Explain any words that are hard to pronounce.

3.2.5 – Change on Request Opens In A New Window - Don’t change elements on your website until citizens ask.

3.3.5 – Help Opens In A New Window - Provide detailed help and instructions.

3.3.6 – Error Prevention (All) Opens In A New Window - Reduce the risk of all input errors.

Implementation Guidelines

Everyone who works on Commonwealth of Pennsylvania digital services and products has a role to play in making resources accessible and inclusive. We highly encourage Accessibility for Teams Opens In A New Window to learn how to embed accessibility and inclusive design practices into your team’s workflow.

Tools to Validate Accessibility

Everyone who works on Commonwealth of Pennsylvania digital services and products must ensure adherence to high level of accessibility and usability criteria. Our selection of tools is designed to help designers, developers, product managers, and content developers ensure they are meeting the needs of citizens. Our tools include, but are not limited to:

Accessibility Checklist

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 Opens In A New Window.

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

Does this Checklist Guarantee my Service is Accessible?

No. However, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site. Refer to the above list of WCAG 2.1 Success Criteria for specific conformance. 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".

Content

Content is the most important part of your site.

Use plain language and avoid figures of speech, idioms, and complicated metaphors.

3.1.2 Language of Parts Opens In A New Window - Write content at an 8th grade reading level Opens In A New Window.

Make sure that button, a, and label element content is unique and descriptive.

1.3.1 Info and Relationships Opens In A New Window - Terms like "click here" and "read more" do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.

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

1.3.1 Info and Relationships Opens In A New Window - Centered-aligned or justified text is difficult to read.

Global Code

Global code is code that affects your entire website.

Validate your HTML.

4.1.1 Parsing Opens In A New Window - Valid HTML Opens In A New Window helps to provide an consistent, expected experience across all browsers and assistive technology.

Use a lang attribute on the html element.

3.1.1 Language of Page Opens In A New Window - This helps screen readers to pronounce content correctly Opens In A New Window.

Provide a unique title for each page or view.

2.4.2 Page Titled Opens In A New Window - The title element, contained in the document's head element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.

Ensure that viewport zoom is not disabled.

1.4.4 Resize text Opens In A New Window - Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for sites with a native app-like experience (even native apps should respect Operating System settings for resizing text).

Use landmark elements to indicate important content regions.

4.1.2 Name, Role, Value Opens In A New Window - Landmark regions help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the nav element to wrap a site's navigation, or the main element to contain the primary content of a page.

Ensure a linear content flow.

2.4.3 Focus Order Opens In A New Window - Remove tabindex attribute values that aren't either 0 or -1. Elements that are inherently focusable, such as links or buttons, do not require a tabindex. Elements that are not inherently focusable should not have a tabindexapplied to them outside of very specific use cases.

Avoid using the autofocus attribute.

2.4.3 Focus Order Opens In A New Window - People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, autofocus can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.

Remove session timeouts.

2.2.1 Timing Adjustable Opens In A New Window - If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.

Remove title attribute tooltips.

4.1.2 Name, Role, Value Opens In A New Window - The title attribute has numerous issues Opens In A New Window, and should not be used if the information provided is important for all people to access. An acceptable use for title would be labeling an iframe element to indicate what content it contains.

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.

Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.

2.4.7 Focus Visible Opens In A New Window - Can a person navigating with a keyboard, switch Opens In A New Window, or screen reader see where they currently are on the page?

Check to see that keyboard focus order matches the visual layout.

1.3.2 Meaningful Sequence Opens In A New Window - Can a person navigating with a keyboard or screen reader move around the page in a predictable way?

Remove invisible focusable elements.

2.4.3 Focus Order Opens In A New Window - Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals.

Images

Images are a very common part of most websites. There are techniques you can use to help make sure they are enjoyable by all.

All images

Make sure that all img elements have an alt attribute.

1.1.1 Non-text Content. Opens In A New Window - alt attributes (alt text) give a description of an image for people who may not be able to view them. When an altttribute isn't present on an image, a screen reader may announce the image's file name and path instead, failing to communicate the image’s content.

Make sure that decorative images have empty alt attribute values.

1.1.1 Non-text Content Opens In A New Window - Decorative images do not communicate information that is required to understanding the website's content. Historically they were used for flourishes and spacer gif images Opens In A New Window, but are less relevant for modern websites. Empty alt attributes are also sometimes known as null alt attributes.

Provide a text alternative for complex images such as charts, graphs, and maps.

1.1.1 Non-text Content Opens In A New Window - Is there plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating.

For images containing text, make sure the alt description includes the image's text.

1.1.1 Non-text Content Opens In A New Window - For example, the FedEx logo should have an alt value of "FedEx."

SVGs

SVGs are images described using markup.

Make sure that svg elements include the code focusable="false" when they are the child element of a focusable element.

1.3.1 Info and Relationships Opens In A New Window - This prevents Internet Explorer from allowing focus to navigate through the child elements of an SVG that is meant to be decorative.

Add aria-hidden="true" to svg that is decorative.

4.1.2 Name, Role, Value Opens In A New Window - This is equivalent to an empty/null alt value on a non-svg image.

Make sure that svg utilizing the use element has whitespace between the svg and use elements.

2.1.2 No Keyboard Trap Opens In A New Window - This solves a bug in Safari which sometimes creates hidden tab-stops when navigating.

Ensure that img elements with an svg source includes the role="img"attribute.

4.1.2 Name, Role, Value Opens In A New Window - VoiceOver on macOS and iOS will not correctly convey the element as an image if role="img" is not present.

Headings

Heading elements (h1, h2, h3, etc.) help break up the content of the page into related "chunks" of information.

Use heading elements to introduce content.

2.4.6 Headings or Labels Opens In A New Window - Heading elements construct a document outline, and should not be used for purely visual design.

Use only one h1 element per page or view.

2.4.6 Headings or Labels Opens In A New Window - The h1 element should be used to communicate the high-level purpose of the page or view. Do not use the h1 element for a heading that does not change between pages or views (for example, the site's name).

Heading elements should be written in a logical sequence.

2.4.6 Headings or Labels Opens In A New Window - The order of heading elements Opens In A New Window should descend, based on the "depth" of the content. For example, an h4 element should not appear on a page before an h3 element.

Don't skip heading levels.

2.4.6 Headings or Labels Opens In A New Window - For example, don't jump from a h2 to a h4, skipping a h3 element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.

Lists

Lists let people know the content is related, and how many items are included in the grouping.

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

1.3.1 Info and Relationships Opens In A New Window - This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements.

Controls

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

Use the a element for links.

1.3.1 Info and Relationships Opens In A New Window - Links should always have a href attribute, even when used in Single Page Applications. Without a href attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an onclick event, in place of a href attribute.

Ensure that links are recognizable.

1.4.1 Use of Color Opens In A New Window - Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.

Ensure that controls have :focus states.

2.4.7 Focus Visible Opens In A New Window - Visible focus styles help people determine wihch interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination.

Use the button element for buttons.

1.3.1 Info and Relationships Opens In A New Window - Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus.

Provide a skip link and make sure that it is visible when focused.

2.4.1 Bypass Blocks Opens In A New Window - A skip link Opens In A New Window can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget.

Identify links that open in a new window.

G201: Giving users advanced warning when opening a new window Opens In A New Window - Doing this will help people understand what will happen when activating the link. Ideally this information should be communicated in a way that is available to all citizens.

Tables

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

Use the table element to describe tabular data.

1.3.1 Info and Relationships Opens In A New Window - Do you need to display data in rows and columns? Use the table element.

Use th for table headers (with appropriate scope attributes).

4.1.1 Parsing Opens In A New Window - Depending on how complex your table is Opens In A New Window, you may also consider using scope="col" for column headers, scope="row" for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table.

Use the caption element to provide a title for the table.

2.4.6 Headings or Labels Opens In A New Window - The table's caption should describe what kind of information the table contains.

Forms

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

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

3.2.2 On Input Opens In A New Window - Use a for/id pairing to guarantee the highest level of browser/assistive technology support.

Use fieldset and legend elements where appropriate.

1.3.1 Info and Relationships Opens In A New Window - Does your form contain multiple sections of related inputs? Use fieldset to group them, and legend to provide a label for what this section is for.

Inputs use autocomplete where appropriate.

1.3.5 Identify Input Purpose Opens In A New Window - Providing a mechanism Opens In A New Window to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example name, address, phone number).

Make sure that form input errors are displayed in list above the form after submission.

3.3.1 Error Identification Opens In A New Window - This provides citizens using assistive technology a way to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.

Associate input error messaging with the input it corresponds to.

3.3.1 Error Identification Opens In A New Window - Techniques such as using aria-describedby Opens In A New Window allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.

Make sure that error, warning, and success states are not visually communicated by just color.

1.4.1 Use of Color Opens In A New Window - People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator.

Media

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

Make sure that media does not autoplay.

1.4.2 Audio Control Opens In A New Window - Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders.

Ensure that media controls use appropriate markup.

1.3.1 Info and Relationships Opens In A New Window - Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <input type="range">.

Check to see that all media can be paused.

2.1.1 Keyboard Opens In A New Window - Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the Space key can pause playback. Make sure you also don't interfere with the Space key's ability to scroll the page/view when not focusing on a form control.

Video

Confirm the presence of captions.

1.2.2 Captions Opens In A New Window - Captions allow a person who cannot hear the audio content of a video to still understand its content.

Remove seizure triggers.

2.3.1 Three Flashes or Below Threshold Opens In A New Window - Certain kinds of strobing or flashing animations will trigger seizures.

Audio

Confirm that transcripts are available.

1.1.1 Non-text Content Opens In A New Window - Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them.

Appearance

How your site content looks in any given situation.

Check your content in specialized browsing modes.

1.4.1 Use of Color Opens In A New Window - Activate modes such as Windows High Contrast Opens In A New Window or inverted colors Opens In A New Window. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?

Increase text size to 200%.

1.4.4 Resize text Opens In A New Window - Is the content still readable? Does increasing the text size cause content to overlap?

Double-check that good proximity between content is maintained.

1.3.3 Sensory Characteristics Opens In A New Window - Use the straw test Opens In A New Window to ensure people who depend on screen zoom software can still easily discover all content.

Make sure color isn't the only way information is conveyed.

1.4.1 Use of Color Opens In A New Window - Can you still see where links are among body content if everything is grayscale?

Use a simple, straightforward, and consistent layout.

1.4.10 Reflow Opens In A New Window - A complicated layout can be confusing to understand and use.

Animation

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

Ensure animations are subtle and not do not flash too much.

2.3.1 Three Flashes or Below Threshold Opens In A New Window - Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD.

Provide a mechanism to pause background video.

2.2.2 Pause, Stop, Hide Opens In A New Window - Background video can be distracting, especially if content is placed over it.

Make sure all animation obeys the prefers-reduced-motion media query.

2.3.3 Animation from Interactions Opens In A New Window - Remove animations when the "reduce motion" setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down.

Color Contrast

Color contrast Opens In A New Window is how legible colors are when placed next to, and on top of each other.

Check the contrast for all normal-sized text.

1.4.3 Contrast Opens In A New Window - Level AA compliance requires a contrast ratio of 4.5:1.

Check the contrast for all large-sized text.

1.4.3 Contrast Opens In A New Window - Level AA compliance requires a contrast ratio of 3:1.

Check the contrast for all icons.

1.4.11 Non-text Contrast Opens In A New Window - Level AA compliance requires a contrast ratio of 3.0:1.

Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).

1.4.11 Non-text Contrast Opens In A New Window - Level AA compliance requires a contrast ratio of 3.0:1.

Check text that overlaps images or video.

1.4.3 Contrast Opens In A New Window - Is text still legible?

Check custom ::selection colors.

1.4.3 Contrast Opens In A New Window - Is the color contrast you set in your ::selection Opens In A New Window CSS declaration sufficient? Otherwise someone may not be able read it if they highlight it.

Mobile/Touch

Things to check to best support different device form factors.

Check that the site can be rotated to any orientation.

1.3.4 Orientation Opens In A New Window - Does the site only allow portrait orientation?

Remove horizontal scrolling.

1.4.10 Reflow Opens In A New Window - Requiring someone to scroll horizontally can be difficult for some, irritating for all.

Button and link icons can be activated with ease.

2.5.5 Target Size Opens In A New Window - It's good to make sure things like hamburger menus, social icons, gallery viewers, and other touch controls are usable by a wide range of hand and stylus sizes.

Ensure sufficient space between clickable items in order to provide a scroll area.

2.4.1 Bypass Blocks Opens In A New Window - Some people who experience hand tremors Opens In A New Window have a very difficult time scrolling past clickable items which feature zero spacing.