wcag-reference.txt

# WCAG 2.1 Quick Reference https://www.w3.org/WAI/WCAG21/quickref/

The legal requirement in the United States of an accessible website is purposely ambiguous. All people must be able to use your website. If a person with a disability cannot use your website, it is not ADA-compliant? (read ADA?*)

1. Perceivable
    1.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.1 Non-text Content (A)
          - Provide equivalent text alternatives for all non-text content except for decorations
    1.2 Time-based Media
        Provide alternatives for time-based media.
        1.2.1 Audio-only and Video-only (Prerecorded) (A)
          - pre-recorded video with no dialogue has easily reached text or audio description of what happens visually
          - pre-recorded audio has an easily reached text transcript
        - Provide captions and/or transcripts and/or audio description for all video-only and audio-only media
        1.2.2 Captions (Prerecorded) (A)
          - Provide captions unless it is a complementary to text
        1.2.3 Audio Description or Media Alternative (A) (Prerecorded)
          - Provide audio description or alternative audio for all media
        1.2.4 Captions (Live) (AA)
          - Provide captions for live media
        1.2.5 Audio Description (Prerecorded) (AA)
          - Provide audio description for Prerecorded media
        1.2.6 Sign Language (Prerecorded) (AAA)
          - Provide sign language for Prerecorded media
        1.2.7 Extended Audio Description (Prerecorded) (AAA)
          - Provide extended audio description for Prerecorded media
        1.2.8 Media Alternative (Prerecorded) (AAA)
          - Provide alternative media for Prerecorded media
        1.2.9 Audio-only (Live) (AAA)
          - Provide alternative for audio-only live media
    1.3 Adaptable
        Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
        1.3.1 Info and Relationships (A)
          - Represent information, structure, and relationships visually as well as using ARIA, semantic elements, and landmarks
        1.3.2 Meaningful Sequence (A)
          - The reading order and navigation of content is logical and intuitive
        1.3.3 Sensory Characteristics (A)
          - Instructions for users must rely on more than solely visual cues in visual content or sound or auditory cues in audio content
        1.3.4 Orientation (AA)
          - Do not lock orientation unless necessary
        1.3.5 Identify Input Purpose (AA)
          - Use the autocomplete attribute and apply to common user input fields
          - Use the correct one from https://www.w3.org/TR/WCAG21/#input-purposes
        1.3.6 Identify Purpose (AAA)
          - ARIA landmarks, aria-invalid and aria-required
    1.4 Distinguishable
        Make it easier for users to see and hear content including separating foreground from background.
        1.4.1 Use of Color (A)
          - color must not be the sole method of conveying information or distinguishing visual elements
          - link color contrast is at least 3:1 and has an additional non-color effect when hovered or in focus
        1.4.2 Audio Control (A)
          - a mechanism exists to stop, pause, mute or adjust audio which plays for longer than 3 seconds
        1.4.3 Contrast (Minimum) (AA)
          - text smaller than 24px and not bold has a minimum contrast ratio of 4.5:1 with the background color
          - text smaller than 18.6px and bold has a minimum contrast ratio of 4.5:1 with the background color
          - text at least 24px and not bold has a minimum contrast ratio of 3:1 with the background color
          - text at least 18.6px and bold has a minimum contrast ratio of 3:1 with the background color
        1.4.4 Resize text (AA)
          - all text (including controls) is readable at 200% browser zoom
        1.4.5 Images of Text (AA)
          - no images of text unless essential
        1.4.6 Contrast (Enhanced) (AAA)
          - 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.7 Low or No Background Audio (AAA)
          - background audio 20 dB lower than foreground speech content
        1.4.8 Visual Presentation (AAA)
          - For blocks of text:
              Foreground and background colors can be selected by the user.
              Width is no more than 80 characters or glyphs (40 if CJK).
              Text is not justified (aligned to both the left and the right margins).
              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.
              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.9 Images of Text (No Exception) (AAA)
          - Only images of text for decoration
        1.4.10 Reflow (AA)
          - Vertical scrolling content at a width equivalent to 320 CSS pixels;
          - Horizontal scrolling content at a height equivalent to 256 CSS pixels;
          - No horizontal scrollbars are shown at 400% browser zoom
        1.4.11 Non-text Contrast (AA)
          - User Interface Components and Graphical Objects must have a contrast ratio of at least 3:1
        1.4.12 Text Spacing (AA)
          - there is no loss of content or functionality when the text-spacing bookmarklet/custom CSS is applied
            - 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.
        1.4.13 Content on Hover or Focus (AA)
          - there is no loss of content or functionality when the text-spacing bookmarklet is applied
          - 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
2. Operable
    User interface components and navigation must be operable.
    2.1 Keyboard Accessible
      Make all functionality available from a keyboard
        2.1.1 Keyboard (A)
          - all functionality must be available from the keyboard without specific timing (QTEs)
          - and, shortcut and access keys must not conflict with browser or assistive technology shortcuts
          - https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts
        2.1.2 No Keyboard Trap (A)
          - keyboard focus must not become trapped in a page element
          - and, must be able to navigate to and from all interactive elements using only the keyboard
        2.1.3 Keyboard (No Exception) (AAA)
          - All functionality must be available from the keyboard without specific timing (QTEs)
        2.1.4 Character Key Shortcuts (A)
          - character key shortcuts can be turned off
          - or, character key shortcuts can be remapped
          - or, character key shortcuts are only active when the relevant UI component is in focus
    2.2 Enough Time
      Provide users enough time to read and use content.
        2.2.1 Timing Adjustable (A)
          - page time limits have an option to turn off, adjust or extend the time limit
        2.2.2 Pause, Stop, Hide (A)
          - content that moves, blinks or scrolls automatically lasting longer than 5 seconds must be able to be paused, stopped or hidden
        2.2.3 No Timing (AAA)
          - 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.4 Interruptions (AAA)
          - Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.
        2.2.5 Re-authenticating (AAA)
          - When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.
        2.2.6 Timeouts (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.3 Seizures and Physical Reactions
      Do not design content in a way that is known to cause seizures or physical reactions.
        2.3.1 Three Flashes or Below Threshold (A)
          - page content must not flash more than 3 times per second
        2.3.2 Three Flashes (AAA)
          - Web pages do not contain anything that flashes more than three times in any one second period.
        2.3.3 Animation from Interactions (AAA)
          - Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
    2.4 Navigable
      Provide ways to help users navigate, find content, and determine where they are.
        2.4.1 Bypass Blocks (A)
          - A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
          - skip links are provided to avoid page elements that repeat across multiple pages
          - or, a proper heading structure is provided
          - or, aria/HTML5 landmarks are provided
          - iframes have descriptive, informative or unique titles
        2.4.2 Page Titled (A)
          - page `<title>` is descriptive and informative
        2.4.3 Focus Order (A)
          - the navigation order of link, form elements and interactive components is logical
        2.4.4 Link Purpose (In Context) (A)
          - each link is understandable solely from the displayed text
          - or, each link is understandable from the immediate surrounding content
        2.4.5 Multiple Ways (AA)
          - at least 2 of related pages, table of contents, site map, site search, or list of web pages are provided for non-workflow pages
        2.4.6 Headings and Labels (AA)
          - labels for form controls and interactive controls are informative
          - page headings are informative
        2.4.7 Focus Visible (AA)
          - all interactive elements have a visible focus effect
        2.4.8 Location (AAA)
          - Information about the user's location within a set of Web pages is available. (breadcrumb, indicate location in navigation)
        2.4.9 Link Purpose (Link Only) (AAA)
          - A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.
        2.4.10 Section Headings (AAA)
          - Section headings are used to organize the content.
    2.5 Input Modalities
        Make it easier for users to operate functionality through various inputs beyond keyboard.
        2.5.1 Pointer Gestures (A)
          - path-based multi-point functionality can be operated with single-point actions
        2.5.2 Pointer Cancellation (A)
          - functionality operated by a single mouse click does not use the down-event (use up-event instead)
          - 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)
        2.5.3 Label in Name (A)
          - UI controls which include a visible label have a matching full (or partial) accessible name
        2.5.4 Motion Actuation (A)
          - functionality triggered by a users motion or gestures can be turned off
          - and, functionality can be operated without device motion or user gestures
        2.5.5 Target Size (AAA)
          - the size of the target for pointer 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
        2.5.6 Concurrent Input Mechanisms (AAA)
          - Web content does not restrict use of input modalities (mobile layout should be accessible with keyboard as well)
3. Understandable
    Information and the operation of the user interface must be understandable.
    3.1 Readable
        Make text content readable and understandable.
        3.1.1 Language of Page (A)
          - each page has a lang attribute
        3.1.2 Language of Parts (AA)
          - content in a different language than the page default is identified using the lang attribute
        3.1.3 Unusual Words (AAA)
          - A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.
        3.1.4 Abbreviations (AAA)
          - A mechanism for identifying the expanded form or meaning of abbreviations is available.
        3.1.5 Reading Level (AAA)
          - 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.
        3.1.6 Pronunciation (AAA)
          - A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.
    3.2 Predictable
        Make Web pages appear and operate in predictable ways.
        3.2.1 On Focus (A)
          - when an elements receives focus it must not result in a substantial client-side change to the page
        3.2.2 On Input (A)
          - user initiated input must not result in a substantial client-side change to the page
        3.2.3 Consistent Navigation (AA)
          - repeated navigation patterns are repeated on multiple Web pages and applied in the same relative order across multiple pages (components)
        3.2.4 Consistent Identification (AA)
          - elements with the same functionality are applied consistently across multiple pages (components)
        3.2.5 Change on Request (AAA)
          - Changes of context are initiated only by user request or a mechanism is available to turn off such changes.
    3.3 Input Assistance
        Help users avoid and correct mistakes.
        3.3.1 Error Identification (A)
          - intuitive text based alerts must be provided for form validation cues and errors
        3.3.2 Labels or Instructions (A)
          - a text label (not necessarily a label element) must be provided for form fields
          - sufficient instructions must be provided for form fields
          - a text label (not necessarily a label element), instructions or error message must be provided for required form fields
        3.3.3 Error Suggestion (AA)
          - all client-side detected errors provide suggestions to fix the errors
          - all client-side detected errors are provided in an accessible manner
        3.3.4 Error Prevention (Legal, Financial, Data) (AA)
          - a mechanism exists to reverse any legal, financial or data transaction mistakes
          - or, a mechanism exists to review and correct any legal, financial or data transaction
        3.3.5 Help (AAA)
          - Context-sensitive help is available. (Add help page) (Provide expected data input format/instructions)
        3.3.6 Error Prevention (All) (AAA)
          - At least one: reversible, checked for input errors, confirmation
4. Robust
    Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
    4.1 Compatible
        Maximize compatibility with current and future user agents, including assistive technologies.
        4.1.1 Parsing (A)
          - No errors identified when parsed through W3C validator and parsing bookmarklet applied
          - No duplicate attributes
          - any IDs are unique
        4.1.2 Name, Role, Value (A)
          - user interface elements are used according to their specification
            - https://component.gallery/components/
          - or, custom controls follow the https://www.w3.org/TR/wai-aria-practices-1.1/
          - a programmatic name, role and value exists for all user interface components
        4.1.3 Status Messages (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

*Search for each rule in the table above. (look through a11y project checklist)*