The Complete WCAG Checklist

Alternative text needs to be applied to non-text content serving an identical purpose.

How to apply:

• Add a name to any non-text input fields or controls
• Add alternative text to images
• Add short media text and transcripts to videos and audio files

Video-only or audio-only content should have alternatives.

How to apply:

• Supply audio tracks for video-only media
• Supply text transcripts for video-only and audio-only media

Pre-recorded captions need to be added to videos with audio

How to apply:

• Identify each speaker
• Add captions to videos with sounds
• Provide captions for sound effects (non-speech information)
• Provide captions for all spoken words

Supply text transcripts or audio descriptions for videos with sounds.

How to apply:

• Provide a video version for audio descriptions
• Provide the video’s whole text transcript

Content structure and relationships should be obvious.

How to apply:

• Use tables and lists where necessary
• Organize content using sections and subheadings
• Use HTML header tags to mark headings
• Use alternative text and clear labels on forms

Content should be presented in a logical order.

How to apply:

• Use paragraphs in sequence
• Present content in a logical and easy-to-understand order
• Nest headings according to importance
• Separate content from the navigation menu

Instructions should not fully rely on sensory characteristics.

How to apply:

• Avoid solely auditory instructions
• Use text labels and sensory characteristics
• Don’t include instructions that only rely on sensory characteristics

Do not let presentation rely on color alone.

How to apply:

• Create non-color reliant instructions
• Provide non-color reliant charts and graphs 

Ensure audio does not play automatically.

How to apply:

• Do not insert audio files that play automatically

 Functionalities must be keyboard-accessible without specific timings.

How to apply:

• Ensure website elements are accessible when using a keyboard alone
• Do not include keystrokes like holding down “Alt” for a few seconds to finish form submissions

Avoiding keyboard traps helps users easily navigate all content with a keyboard.

How to apply:

• A website should be easily navigable using arrow and tab keys

All users must be able to remap or turn off one-key character shortcuts.

How to apply:

• Provide options to turn off keyboard shortcuts
• Allow users to remap shortcuts to stick to non-character keys
• Ensure shortcuts work when an element is focused

Users should be allowed to turn off controls and extend or adjust time limits.

How to apply:

• Notify users and provide options for time adjustment
• Give user option to turn off time limits before they start
• Give user time extension options before 20-second expiration

Allows users to stop, hide, and pause auto-updating and moving content.

 How to apply:

• Ensure all scrolling, moving, and blinking content can be paused, hidden, or stopped
• Ensure all auto-updating content can be paused, hidden, managed, or stopped

All content flashes must be less than 3 times per second.

How to apply:

• Don’t include something that will flash more than 3 times every second

This allows users to skip repeated content blocks.

How to apply:

• Add a “skip to content” option to every web page to send users to the content they’re interested in
• Include a link at the beginning of the page to each content area
• Include links at the beginning of repeated content to skip it

Users must engage with clear and understandable page titles.

How to apply:

• Ensure every website page has a descriptive and unique meta title

Components are arranged in a logical sequence.

How to apply:

• Ensure web page order is logical and meaningful.

Every link should have a clear purpose.

How to apply:

• Use the context of surrounding text to give a link purpose

Keyboard focus should be visible when accessed.

How to apply:

• Provide a visible indication when elements have keyboard focus 

Users should be able to navigate using page break locators.

• Add <nav role=”doc-pagelist”> to the page navigation in the HTML
• Use <span id=”pg1”> to add designations

A user can operate path-based and multipoint gestures using a single pointer.

How to apply:

• Maps should be pinchable, zoomable, and controllable with one tap or click

Pointer cancellations should not be completed with a single pointer click.

How to apply:

• Stop actions when pointer can be released beyond the target’s boundary
• Ensure actions are completed after the pointer is clicked and released around the target boundary

Components should have a text label, and the component name should contain visible text.

How to apply:

• Avoid actions where pointer can be released outside the target boundary
• Ensure matching component programmatic names and text labels

Motions should operate motion actuation functions, and interface and motion responses should have the ability to be turned off.

How to apply:

• Provide buttons with gesture and motion controls
• Ensures movement-based controls can be turned on and off

Every web page must be assigned a default language.

How to apply:

• Choose the default language using the relevant HTML attribute

Elements should stay the same after enhancing focus.

How to apply:

• Do not include visual and behavioral modifications

An element should stay the same after an input.

How to apply:

• Filled forms must not auto-submit 
• The focus must stay on the current field even after being filled

Errors should be easily identifiable.

How to apply:

• Identify and provide instructions to users on how mistakes are detected
• Include explanations for error solutions

Provide instructions for labeled elements.

How to apply:

• Add a label to all input fields
• Give an example of fields that need a format
• Explain icons in the form

Your website must be error-free.

How to apply:

• HTML must have correct start and end tags
• HTML elements must be nested
• Use special IDs 

All elements must be built for accessibility.

How to apply:

• Use elements and plugins with an HTML markup if provided by a third party
• Use HTML specifications for all website scripts

Include live video captions.

Add pre-recorded videos and audio descriptions.

How to apply:

• Provide audio descriptions as alternative versions

Your website must be able to adjust to landscape and portrait orientations.

How to apply:

• Content must retain meaning in all positions.

Input fields must be programmatically identifiable.

How to apply:

• Specify the intention of input fields using “input type=type.”

The contrast ratio between backgrounds and texts must be at least 4.5:1.

How to apply:

• Use a dark text and light background 
• Use light text and a dark background 

Texts should be resizable to 200% without losing content or function.

Don’t use text images.

Content should retain function and meaning without scrolling in different dimensions.

How to apply:

• Ensure vertical content doesn’t need a horizontal scroll at a 320 CSS pixel width
• Ensure horizontal content doesn’t need a vertical scroll at a 256 CSS pixel height 

The contrast between adjacent colors, user interface components, and graphics should be at least 3:1.

How to apply:

• Ensure graphics have at least a 3:1 contrast to the background color 

Function and content should retain meaning when users change text spacing.

How to apply:

• Paragraph spacing should be at least two times the font size

When hover or focus triggers content to appear, it should be persistent, dismissible, and hoverable.

How to apply:

• Content should be hoverable by the mouse pointer, so it’s moveable

Provides different ways to find website pages.

How to apply:

• Provide a consistent and clear main menu
• Add a search function to all pages

Labels and headings should describe the purpose or topic.

How to apply:

• Provide label descriptions for input fields and controls 

Focus indicators should be easily distinguishable when active.

How to apply:

• The focus indicator should have a contrast ratio of at least 3:1 against surrounding colors

Dragging movement functionalities must be achieved with a single pointer without drags.

The pointer input’s target size should be at least 24 by 24 CSS pixels.

Webpage sections should have a default language assigned to them.

How to apply:

• Choose the default language for every web page section using HTML “lang” attribute

Menus and standard controls should be consistently positioned.

How to apply:

• Place the navigation menus in the same location on every page 

Components must be identifiable with the same function.

How to apply:

• Elements with the same functions should have consistent text alternatives

Suggest solutions when users cause errors.

How to apply:

• If users commit errors, provide a link list so that they can jump back to modify their inputs.

Decrease input error risks for sensitive data.

How to apply:

• Test responses, financial transactions, changes, and legal commitments to user-controlled data should be reversible

Sign language translations should be provided for pre-recorded videos.

Extended audio descriptions should be available for pre-recorded videos.

Text alternatives are provided for pre-recorded videos.

How to apply:

• Full-text transcripts should be provided for links and videos

There should be alternatives for live audio.

How to apply:

• Include script text if the live broadcasts are from prepared scripts

All components’ purposes must be programmatically determinable.

How to apply:

• Utilize ARIA landmarks to identify every page’s region

Contrast ratios between background and texts should be at least 7:1.

Audio-only content should be clear without any or minimal background noise.

How to apply:

• Ensure pre-recorded audios don’t contain background noises

This offers users a range of presentation options for text blocks.

Text images must not be used.

All functionalities must be accessible by keyboard without exceptions.

There should be no time limits on your website.

Users can suppress or postpone unnecessary interruptions.

How to apply:

• Refrain from using automatic redirects or refresh functions based on time delays

All users should be able to save data when re-authenticating.

Users are warned about timeouts that may cause data loss.

How to apply:

• Users should be aware of the duration of timeout periods at the beginning of each task

There should be no content that flashes more than 3 times per second.

Users have the option to disable motion animation.

This ensures users know where they are on the website.

How to apply:

• Use breadcrumbs to aid with navigation.

All link purposes must be clear from the text.

Content must be organized according to section headings.

A focus indicator should be distinguishable when active.

How to apply:

• The element within focus should not be hidden

The pointer’s target size should be 44 x 44 CSS pixels.

There should be no restrictions on input modes.

Unusual words or phrases should be defined.

Abbreviations must be defined. 

How to apply:

• Use the “abbr” HTML tag

Users with 9 years of schooling should see your content as readable.

Words with ambiguous meanings and pronunciations should have a definition.

How to apply:

• Words must be linked to a phonetic guide

The elements should not change without requests.

 There should be detailed instructions when help is needed.

The risk for all input errors must be kept to a minimum.