Web Content Accessibility Guidelines (WCAG)

WCAG 2.1 Web Accessibility Checklist 

Perceivable 

WCAG 2.1 Standard: “Information and user interface components must be presentable to users in ways they can perceive.” 

• Text alternatives
  • Users can access a text alternative that serves an equivalent purpose for all non-text content (e.g. images, video) 
  • Closed Captions or Subtitles are included for all video and audio content  
  • A thorough audio description is included for all audio elements, including information about speakers and background noise, where relevant 
  • If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities
• Adaptability
  • Users can access content in a number of different ways, including the use of assistive tools like screen readers
  • Content is organized in simple formats like outlines or structured walkthroughs 
  • Content structure and organization can be programmatically determined–that is, interpreted from markup language or API choice via assistive technology 
  • Understanding and operating content does not rely on solely on sensory characteristics such as shape, size, visual location, orientation or sound 
• Distinguishable

  • Users can identify which elements of a website are most pertinent for their needs

  • Site elements and sections are clearly defined, both on the front-end and in HTML tags and structure

  • Color is not the sole means used to convey meaning, structure, or purpose of content 

  • Contrast is used to clearly illustrate differences between site elements. *The minimum recommended contrast ratio for text and images is 4.5:1* 

  • Text can be resized up to 200% via browser or assistive technology without losing content functionality or context 

  • Avoid images of text unless essential

  • If any audio on a web page plays automatically, a mechanism to pause, restart, or alter content volume is provided 

Operable

WCAG 2.1 Standard: “User interface components and navigation must be operable.” 

• Keyboard Navigable
  • Users who can’t operate a mouse are given keyboard-based navigation options 
  • Keyboard navigation options should not be time-bound for specific keystrokes 
  • Tabbing moves the cursor or site focus from section-to-section 
  • No keyboard trap (2.1.2) — users must be able to move focus away from any component using only a keyboard
  • Visible focus indicator (2.4.7 + 2.4.11 in 2.2) — focus must be clearly visible and meet minimum contrast and thickness requirements in WCAG 2.2
  • Clickable targets must be at least 24x24 CSS pixels unless an exception applies.
• Enough Time
  • Users can access media at their own pace 
  • Ample time is provided for task completion, and where applicable, users can turn off a time limit before encountering it 
  • Pausing is enabled for timed tasks 
  • Users can alter the speed of content playback 
  • Interruptions to the content presentation are postponed or suppressed entirely 
  • Users must be able to extend or turn off time limits unless essential (2.2.1)
• Seizures
  • Users prone to seizures should be warned of flashing site elements  
  • Web pages do not contain content that flashes more than three times per one second period 
• Navigable
  • Web pages have titles that describe their topic or purpose  
  • More than one way is available to locate a web page, except where the page is the result of, or a step in, a process 
  • Information about a user’s location within a set of web pages is available to help them orient themselves 
  • Focus order must be logical (2.4.3)
  • Link purpose must be clear (2.4.4)
  • Focused elements must not be hidden or covered by other content (NEW in WCAG 2.2 – 2.4.12)
  • Focus indicators must be clearly visible and meet minimum contrast and size requirements
  • Dragging actions must have a single-pointer alternative

Understandable

WCAG 2.1 Standard: “Information and the operation of user interface must be understandable.” 

• Readable
  • Page language defined (3.1.1)
  • The default language of each Web page is specified within the underlying HTML header code 
  • A mechanism for identifying the expanded meaning of abbreviations is included
• Predictable
  • Content on a page adheres to a central organization that doesn’t change when a user engages with or focuses on a particular element of the page  
  • Navigation patterns are consistent across a site 
  • Help mechanisms (such as contact information or chat support) must appear in a consistent location across pages where provided
• Input Assistance
  • Error-correction and detection mechanisms are used to assist users entering information to forms or other input points 
  • Comprehensive, text-based help is offered for all areas of your site, particularly those where users have to enter information 
  • For web pages that cause legal commitment or financial transactions: Submissions are reversible (where possible) and given ample opportunity to be checked and reviewed by the user 
  • Redundant entry prevention (3.3.7) — users shouldn’t have to re-enter the same information
  • Accessible authentication (3.3.8) — login processes must not rely solely on memory tests

Robust

WCAG 2.1 Standard: “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. “ 

• Compatible 

  In content implemented using markup languages

  • Elements are nested according to their specifications
  • Elements do not contain duplicate attributes
  • any IDs are unique, except where the specifications allow these features
  • Name, role, value programmatically determinable
  • Status messages programmatically available
  • Proper use of ARIA

   

WCAG Video Checklist

• Video player
  • Is the video player accessible (i.e. there are no keyboard traps)? 
  • Can the video player be started and operated using the keyboard? 
  • Does the video start only at the viewer's request and not automatically? 
  • If the video starts automatically, is there a mechanism to pause or stop the video at the start of the page before the video?  
  • Can the video volume be modified?  
  • Can the video volume be modified with the keyboard? 
  • If the video provides a text alternative is it labeled as such? 
  • Are links to the video files descriptive?  
  • Can you select a video without causing a change prior to the current focus?  
  • Does the video exclude flashing content that flashes more than three times per second? 
  • Is the content accessible with assistive technology?
  • Does the script expose name/role/value properly?
• Captions

  Level A

  • Do videos include captions?
  • Do captions accurately reflect spoken dialogue and relevant sounds?
  • Captions are required for prerecorded video with audio

  Level AA

  • Is the color contrast of the video captions sufficient?
• Transcripts
  • Do videos have transcripts?   
  • Is the video transcript link clear?  
  • Does the video transcript provide equivalent information to the video? 
  • Does the video transcript only contain information in the video (i.e. not information that is not included in the video)? 
  • Is the video transcript accessible? 
  • Is the video transcript or a link to the transcript immediately before or after the video?  
  • Is the end of transcript marked if it is on the same page as the video? 
  • Does the video transcript (when on a different page to the video) provide a method of returning back to the original video? 
  • Do interactive transcripts keep track with the video content? 
  • Can the current position in the interactive transcript be determined without relying on color (i.e. isn’t marked with color alone)? 
  • Transcripts are required for audio-only content
  • Transcripts for video are strongly recommended but not strictly required if captions + audio description are present
• Audio Descriptions
  • Do videos have audio descriptions?