Skip to content

Instantly share code, notes, and snippets.

@Inclushe

Inclushe/wcag-categorized.md

Last active May 10, 2022 20:38
Show Gist options
  • Save Inclushe/27489e8d5cced8e1b4a67fa1559bd198 to your computer and use it in GitHub Desktop.
Save Inclushe/27489e8d5cced8e1b4a67fa1559bd198 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wcag-categorized.md

WCAG 2.1 Categorized

  • Sources
  • Accessibility tools
    • Screen readers (use one)
      • NVDA
      • MacOS VoiceOver
      • Windows Narrator
    • Display modes
      • High Contrast (Forced colors)
      • Reader Mode
      • Reduce Motion
    • Screen magnifiers (use one)
      • Windows Screen Magnifier
      • MacOS Zoom
    • Alternative input methods
    • Speech recognition software
  • Disabilities
    • Motor
      • Not everyone uses a mouse or taps their screen. Some people exclusively use a keyboard or custom switch input devices.
    • Vision
      • People who are blind or low vision use the internet using a screen reader or extreme zoom tools.
    • Hearing
      • Some people rely on captions or transcripts to consume audio or video.
    • Cognitive
      • There is a wide range of cognitive differences that can be accommodated by design and code.
      • Some have serious difficulty concentrating, remembering or making decisions.
  • Levels
    • A: Essential
      • If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.
    • AA: Ideal Support
      • Required for multiple government and public body websites.
    • AAA: Specialized Support
      • This is typically reserved for parts of websites and web apps that serve a specialized audience.
  • Principles
    • Perceivable - Information and user interface components must be presentable to users in ways they can perceive. (1)
      • Text Alternatives - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. (1.1)
      • Time-based Media - Provide alternatives for time-based media. (1.2)
      • Adaptable - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. (1.3)
      • Distinguishable - Make it easier for users to see and hear content including separating foreground from background. (1.4)
    • Operable - User interface components and navigation must be operable. (2)
      • Keyboard Accessible - Make all functionality available from a keyboard. (2.1)
      • Enough Time - Provide users enough time to read and use content. (2.2)
      • Seizures and Physical Reactions - Do not design content in a way that is known to cause seizures or physical reactions. (2.3)
      • Navigable - Provide ways to help users navigate, find content, and determine where they are. (2.4)
      • Input Modalities - Make it easier for users to operate functionality through various inputs beyond keyboard. (2.5)
    • Understandable - Information and the operation of the user interface must be understandable. (3)
      • Readable - Make text content readable and understandable. (3.1)
      • Predictable - Make Web pages appear and operate in predictable ways. (3.2)
      • Input Assistance - Help users avoid and correct mistakes. (3.3)
    • Robust - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. (4)
      • Compatible - Maximize compatibility with current and future user agents, including assistive technologies. (4.1)
  • Media
    • General
      • Text Alternatives - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. (1.1)
      • Time-based Media - Provide alternatives for time-based media. (1.2)
      • Non-text Content - Provide text alternatives for any non-text content (1.1.1) (A)
      • Captions (Prerecorded) - Provide captions for prerecorded content unless it is a complementary to text (1.2.2) (A)
      • Audio Description or Media Alternative (Prerecorded) - Provide audio description or media alternative for prerecorded non-text content (1.2.3) (A)
      • Media Alternative (Prerecorded) - Provide media alternative for prerecorded non-text content (1.2.8) (AAA)
      • Page content must not flash more than 3 times per second (2.3.1) (A) (2.3.2) (AAA)
      • Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. (2.3.3) (AAA)
        • Make sure all animation obeys the prefers-reduced-motion media query.
    • Images
      • Use alt text (1.1.1) (A)
      • Use null alt (empty) attribute values for decorative images. (1.1.1) (A)
      • Provide a text alternative for complex images such as charts, graphs, and maps. (1.1.1) (A)
      • No images of text unless essential or for decoration (1.4.5) (AA)
        • For images containing text, make sure the alt description includes the image's text.
        • No Exception (1.4.9) (AAA)
    • Audio
      • Audio-only and Video-only (Prerecorded) - Prerecorded audio only content must have a transcript/captions (1.2.1) (A)
      • Audio-only (Live) - Live audio only content must have a transcript/captions (1.2.9) (AAA)
    • Content with audio
      • Audio Control - There must be a mechanism to stop, pause, mute or adjust audio which plays for longer than 3 seconds (1.4.2) (A)
      • Captions (Live) - Provide captions for live content with audio (1.2.4) (AA)
      • Audio content must have no background audio or background audio 20 dB lower than foreground speech content (1.4.7) (AAA)
      • Provide extended audio description for prerecorded non-text content that pauses the video if there is insufficient time to describe content between pauses (1.2.7) (AAA)
      • Provide sign language interpretation for prerecorded audio content (1.2.6) (AAA)
    • Video
      • Provide a mechanism to pause background video.
      • Prerecorded video only content must have an audio description or transcript/captions (1.2.1) (A)
      • Provide audio description for prerecorded video content (1.2.5) (AA)
      • Remove seizure triggers (2.3.1) (A) (2.3.2) (AAA)
        • Videos must not flash more than 3 times per second
    • PDFs
      • Provide text/HTML alternative (1.1.1) (A)
  • Content
    • Animation
      • Remove seizure triggers (2.3.1) (A) (2.3.2) (AAA)
        • Page content must not flash more than 3 times per second
      • Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. (2.3.3) (AAA)
    • Text
      • All text (including controls) is readable at 200% browser zoom level (1.4.4) (AA)
      • there is no loss of content or functionality when the text-spacing bookmarklet/custom CSS is applied (1.4.12) (AA)
        • Line height (line spacing) to at least 1.5 times the font size
        • Spacing following paragraphs to at least 2 times the font size
        • Letter spacing (tracking) to at least 0.12 times the font size
        • Word spacing to at least 0.16 times the font size
      • Use microdata attributes https://en.wikipedia.org/wiki/Microdata_(HTML) (1.3.6) (AAA)
      • Make lines of text at most 80 characters long (1.4.8) (AAA)
      • Do not justify text (1.4.8) (AAA)
      • Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. (1.4.8) (AAA)
      • Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window. (1.4.8) (AAA)
      • Each page has a lang attribute (3.1.1) (A)
      • Content in a different language than the page default is identified using the lang attribute (3.1.2) (AA)
      • Eliminate words or phrases used in an unusual or restricted way, including idioms and jargon, unless a mechanism is available for identifying their specific definitions. (3.1.3) (AAA)
      • A mechanism for identifying the expanded form or meaning of abbreviations is available. (3.1.4) (AAA)
      • Use plain language and avoid figures of speech, idioms, and complicated metaphors. (3.1.5) (AAA)
        • Write content at an 8th grade reading level
        • When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.
      • A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation. (3.1.6) (AAA)
    • Structure
      • Represent information, structure, and relationships visually as well as using ARIA, semantic elements, and landmarks (1.3.1) (A)
        • Make sure that button, a, and label element content is unique and descriptive without context.
        • Use list elements (ol, ul, and dl elements) for list content.
        • Use the a element for links.
        • Links should always have an href attribute.
        • Use the button element for buttons.
        • Identify links that open in a new tab or window.
        • Use the table element to describe tabular data.
          • Use the th element for table headers (with appropriate scope attributes).
          • Use the caption element to provide a title for the table.
        • Ensure that media controls use appropriate markup.
      • The reading order and navigation of content is logical and intuitive and matches the visual layout (1.3.2) (A)
      • Use ARIA landmarks, aria-invalid and aria-required (1.3.6) (AAA)
      • Page <title> is unique, descriptive, and informative (2.4.2) (A)
      • The focus/navigation order of link, form elements and interactive components is logical (2.4.3) (A)
        • Remove tabindex attribute values that aren't either 0 or -1.
        • 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.
        • Elements that are inherently focusable, such as links or button elements, do not require a tabindex.
        • Elements that are not inherently focusable should not have a tabindex applied to them outside of very specific use cases.
        • Avoid using the autofocus attribute.
      • Each link is understandable from the displayed text only (2.4.9) (AAA) or from the immediate surrounding content (2.4.4) (A)
      • At least 2 of related pages, table of contents, site map, site search, or list of web pages are provided (2.4.5) (AA)
      • Page headings are informative (2.4.6) (AA)
        • Heading elements construct a document outline, and should not be used for purely visual design.
        • Use only one h1 element per page or view.
        • Heading elements should be written in a logical sequence.
        • Don't skip heading levels.
      • All interactive elements have a visible focus effect (2.4.7) (AA)
      • Information about the user's location within a set of Web pages is available. (breadcrumb, indicate location in navigation) (2.4.8) (AAA)
      • Section headings are used to organize the content. (2.4.10) (AAA)
      • Validate your HTML. (4.1.1) (A)
        • No errors identified when parsed through W3C validator and parsing bookmarklet applied
        • No duplicate attributes
        • IDs are unique
      • Viewport zoom must not be disabled (1.4.4) (AA)
    • Interface/Navigation/Components
      • Instructions for users must rely on more than solely visual cues in visual content or sound or auditory cues in audio content (1.3.3) (A)
        • Double-check that good proximity between content is maintained.
        • Ensure people who depend on screen zoom software can still easily discover all content.
      • Use ARIA landmarks, aria-invalid and aria-required (1.3.6) (AAA)
      • User Interface Components and Graphical Objects must have a contrast ratio of at least 3:1 (1.4.11) (AA)
      • There is no loss of content or functionality when the text-spacing bookmarklet is applied (1.4.13) (AA)
        • additional content triggered on hover or keyboard focus can be dismissed without moving mouse or keyboard focus
        • and, if hover triggers the content pointer can be moved to hovered content without disappearing
        • and, additional content remains visible until hover or focus trigger is removed or user dismisses it
      • Do not lock orientation unless necessary (1.3.4) (AA)
      • Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for 320x256px. (1.4.10) (AA)
        • Do not hide information at breakpoints.
        • Remove horizontal scrolling.
      • No vertical scrolling content at a width equivalent to 320 CSS pixels (1.4.10) (AA)
      • No horizontal scrolling content at a height equivalent to 256 CSS pixels (1.4.10) (AA)
        • Remove horizontal scrolling.
      • A mechanism is available to bypass blocks of content that are repeated on multiple Web pages (2.4.1) (A)
        • Skip links are provided to avoid page elements that repeat across multiple pages
          • Make sure that it is visible when focused.
        • or, a proper heading structure is provided
        • or, Aria/HTML5 landmarks are provided
        • iframes have descriptive, informative or unique titles
        • Ensure sufficient space between interactive items in order to provide a scroll area.
      • Repeated navigation patterns are repeated on multiple Web pages and applied in the same relative order across multiple pages (components) (3.2.3) (AA)
      • Elements with the same functionality are applied consistently across multiple pages (components) (3.2.4) (AA)
      • Changes of context are initiated only by user request or a mechanism is available to turn off such changes. (3.2.5) (AAA)
      • Context-sensitive help is available. (3.3.5) (AAA)
        • Add help next to element
        • Add help page
        • Provide expected data input format/instructions
      • User interface elements are used according to their specification (4.1.2) (A)
      • Status messages should have appropriate roles and properties (4.1.3) (AA)
        • All client-side updated success or action outcome messages use role=status
        • All client-side updated error or warning messages use role=alert
        • All client-side updated log or progress messages use role=log
        • Use aria-live for updating elements/live regions
    • Control
      • Keyboard Accessible - Make all functionality available from a keyboard (2.1.1) (A)
      • Keyboard focus must not become trapped in a page element (2.1.2) (A)
        • and, must be able to navigate to and from all interactive elements using only the keyboard
      • Character key shortcuts (No holding Ctrl, Shift, etc + key) can be turned off, remapped, or only active when the relevant UI component is in focus (2.1.4) (A)
      • Make it easier for users to operate functionality through mouse and touch. (2.5)
        • Path-based multi-point functionality can be operated with single-point actions (2.5.1) (A)
        • Functionality operated by a single mouse click does not use the down-event (use up-event instead) (2.5.2) (A)
          • Or, the functionality can be undone
          • Or, the up-event reverses the action of the down-event
          • Or, the down event is essential for the function (i.e. onscreen keyboard)
        • Functionality can be operated without device motion or user gestures (2.5.4) (A)
          • Functionality that uses device motion or user gestures can be turned off
        • Ensure that button and link icons can be activated with ease. (2.5.5) (AAA)
          • The size of the target for keyboard inputs is at least 44 by 44 CSS pixels.
            • Except when equivalent link or control on the same page
            • Except when inline a sentence or block of text
            • Except when determined by user agent
            • Except when essential
        • Web content does not restrict use of input modalities (mobile layout should be accessible with keyboard as well) (2.5.6) (AAA)
      • When an elements receives focus it must not result in a substantial client-side change to the page (3.2.1) (A)
      • All interactive elements have a visible focus effect (2.4.7) (AA)
    • Time
      • Provide users enough time to read and use content. (2.2) (A)
      • Page time limits have an option to turn off, adjust or extend the time limit (2.2.1) (A)
      • Content that moves, blinks or scrolls automatically lasting longer than 5 seconds must be able to be paused, stopped or hidden (2.2.2) (A)
      • Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events. (2.2.3) (AAA)
      • Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. (2.2.4) (AAA)
      • When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. (2.2.5) (AAA)
      • Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions. (2.2.6) (AAA)
    • Color
      • Color must not be the sole method of conveying information or distinguishing visual elements (1.4.1) (A)
      • Ensure that links are recognizable as links. (1.4.1) (A)
      • Link color contrast is at least 3:1 and has an additional non-color effect when hovered or in focus (1.4.1) (A)
      • Use an contrast checker to satisfy AA requirements (1.4.3) (AA)
        • https://contrast-ratio.com/#
        • https://www.tpgi.com/color-contrast-checker/
        • Check the contrast for all normal-sized text (4.5:1).
        • Check the contrast for all large-sized text (3:1).
        • Check the contrast for all icons (3:1).
        • Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.) (3:1).
        • Check text that overlaps images or video.
        • Check custom ::selection colors.
      • The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for large text, decoration, logos (1.4.6) (AAA)
      • Allow foreground and background colors to be selected by the user (1.4.8) (AAA)
      • Check your content in specialized browsing modes, such as Windows High Contrast or Inverted Colors. (1.4.1) (A)
    • Forms/Controls
      • Use the autocomplete attribute and apply to common user input fields (1.3.5) (AA)
      • Use the correct one from https://www.w3.org/TR/WCAG21/#input-purposes (1.3.5) (AA)
      • Labels for form controls and interactive controls are informative (2.4.6) (AA)
      • Use fieldset and legend elements when there are multiple sections of related inputs. (1.3.1) (A)
      • UI controls which include a visible label have a matching full (or partial) accessible name (2.5.3) (A)
      • User initiated input must not result in a substantial client-side change to the page (3.2.2) (A)
        • All inputs in a form are associated with a corresponding label element.
      • Intuitive text based alerts must be provided for form validation cues and errors (3.3.1) (A)
        • Make sure that form input errors are displayed in list above the form after submission.
        • Associate input error messaging with the input it corresponds to.
      • A text label (not necessarily a label element) must be provided for form fields (3.3.2) (A)
        • Sufficient instructions must be provided for form fields
        • Instructions or error message must be provided for required form fields
      • All client-side detected errors provide suggestions to fix the errors and are provided in an accessible manner (3.3.3) (AA)
      • A mechanism exists to reverse or review and correct any legal, financial or data transaction mistakes (3.3.4) (AA)
      • Context-sensitive help is available. (3.3.5) (AAA)
        • Add help next to element
        • Add help page
        • Provide expected data input format/instructions
      • Errors must be reversible, checked for input errors for errors, or for user confirmation (3.3.6) (AAA)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment