Information and user interface components must be presentable to users in ways they can perceive.
", "handle": "Perceivable", "title": "Information and user interface components must be presentable to users in ways they can perceive.", "versions": [ "2.0", "2.1", "2.2" ], "guidelines": [ { "id": "text-alternatives", "num": "1.1", "alt_id": [ "text-equiv" ], "content": "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.
", "handle": "Text Alternatives", "title": "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.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "non-text-content", "num": "1.1.1", "alt_id": [ "text-equiv-all" ], "content": "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.\n
\n \nIf non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)\n
\n \nIf non-text content is time-based media, then text alternatives at least provide descriptive\n identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)\n
\n \nIf non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text\n content.\n
\n \nIf non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text\n content.\n
\n \nIf the purpose of non-text content is to confirm that content is being accessed by\n a person rather than a computer, then text alternatives that identify and describe\n the purpose of the non-text content are provided, and alternative forms of CAPTCHA\n using output modes for different types of sensory perception are provided to accommodate\n different disabilities.\n
\n \nIf non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented\n in a way that it can be ignored by assistive technology.\n
\n \nProvide alternatives for time-based media.
", "handle": "Time-based Media", "title": "Provide alternatives for time-based media.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "audio-only-and-video-only-prerecorded", "num": "1.2.1", "alt_id": [ "media-equiv-av-only-alt" ], "content": "For prerecorded\n audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:\n
\n \nAn alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.\n
\n \nEither an alternative for time-based media or an audio track is provided that presents\n equivalent information for prerecorded video-only content.\n
\n \nCaptions are provided for all prerecorded\n audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.\n
", "handle": "Captions (Prerecorded)", "title": "Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G93", "technology": "general", "title": "Providing open (always visible) captions" }, { "id": "G87", "technology": "general", "title": "Providing closed captions", "suffix": "using any of the following techniques:", "using": [ { "id": "SM11", "technology": "smil", "title": "Providing captions through synchronized text streams in SMIL 1.0" }, { "id": "SM12", "technology": "smil", "title": "Providing captions through synchronized text streams in SMIL 2.0" }, { "id": "H95", "technology": "html", "title": "Using the track element to provide captions" }, { "title": "Using any readily available media format that has a video player that supports closed captioning" } ] } ], "failure": [ { "id": "F8", "technology": "failures", "title": "Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects" }, { "id": "F75", "technology": "failures", "title": "Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page" }, { "id": "F74", "technology": "failures", "title": "Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative" } ] } }, { "id": "audio-description-or-media-alternative-prerecorded", "num": "1.2.3", "alt_id": [ "media-equiv-audio-desc" ], "content": "An alternative for time-based media or audio description of the prerecorded\n video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.\n
", "handle": "Audio Description or Media Alternative (Prerecorded)", "title": "An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G69", "technology": "general", "title": "Providing an alternative for time based media", "suffix": "using one of the following techniques:", "using": [ { "id": "G58", "technology": "general", "title": "Placing a link to the alternative for time-based media immediately next to the non-text content" } ] }, { "title": "Linking to the alternative for time-based media", "suffix": "using one of the following techniques:", "using": [ { "id": "H53", "technology": "html", "title": "Using the body of the object element" } ] }, { "id": "G78", "technology": "general", "title": "Providing a second, user-selectable, audio track that includes audio descriptions" }, { "id": "G173", "technology": "general", "title": "Providing a version of a movie with audio descriptions", "suffix": "using one or more of the following techniques:", "using": [ { "id": "SM6", "technology": "smil", "title": "Providing audio description in SMIL 1.0" }, { "id": "SM7", "technology": "smil", "title": "Providing audio description in SMIL 2.0" }, { "id": "G226", "technology": "general", "title": "Providing audio descriptions by incorporating narration in the soundtrack" } ] }, { "id": "G8", "technology": "general", "title": "Providing a movie with extended audio descriptions", "suffix": "using one of the following techniques:", "using": [ { "id": "SM1", "technology": "smil", "title": "Adding extended audio description in SMIL 1.0" }, { "id": "SM2", "technology": "smil", "title": "Adding extended audio description in SMIL 2.0" } ] }, { "id": "G203", "technology": "general", "title": "Using a static text alternative to describe a talking head video" } ], "advisory": [ { "id": "H96", "technology": "html", "title": "Using the track element to provide audio descriptions" } ] } }, { "id": "captions-live", "num": "1.2.4", "alt_id": [ "media-equiv-real-time-captions" ], "content": "Captions are provided for all live\n audio content in synchronized media.\n
", "handle": "Captions (Live)", "title": "Captions are provided for all live audio content in synchronized media.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "and": [ { "id": "G9", "technology": "general", "title": "Creating captions for live synchronized media" }, { "id": "G93", "technology": "general", "title": "Providing open (always visible) captions" } ] }, { "and": [ { "id": "G9", "technology": "general", "title": "Creating captions for live synchronized media" }, { "id": "G87", "technology": "general", "title": "Providing closed captions" } ], "using": [ { "id": "SM11", "technology": "smil", "title": "Providing captions through synchronized text streams in SMIL 1.0" }, { "id": "SM12", "technology": "smil", "title": "Providing captions through synchronized text streams in SMIL 2.0" }, { "title": "Using any readily available media format that has a video player that supports closed captioning" } ] } ], "sufficientNote": "Captions may be generated using real-time text translation service." } }, { "id": "audio-description-prerecorded", "num": "1.2.5", "alt_id": [ "media-equiv-audio-desc-only" ], "content": "Audio description is provided for all prerecorded\n video content in synchronized media.\n
", "handle": "Audio Description (Prerecorded)", "title": "Audio description is provided for all prerecorded video content in synchronized media.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "G78", "technology": "general", "title": "Providing a second, user-selectable, audio track that includes audio descriptions" }, { "id": "G173", "technology": "general", "title": "Providing a version of a movie with audio descriptions", "suffix": "using one or more of the following techniques:", "using": [ { "id": "SM6", "technology": "smil", "title": "Providing audio description in SMIL 1.0" }, { "id": "SM7", "technology": "smil", "title": "Providing audio description in SMIL 2.0" }, { "id": "G226", "technology": "general", "title": "Providing audio descriptions by incorporating narration in the soundtrack" } ] }, { "id": "G8", "technology": "general", "title": "Providing a movie with extended audio descriptions", "suffix": "using one of the following techniques:", "using": [ { "id": "SM1", "technology": "smil", "title": "Adding extended audio description in SMIL 1.0" }, { "id": "SM2", "technology": "smil", "title": "Adding extended audio description in SMIL 2.0" } ] }, { "id": "G203", "technology": "general", "title": "Using a static text alternative to describe a talking head video" } ], "advisory": [ { "id": "H96", "technology": "html", "title": "Using the track element to provide audio descriptions" } ], "failure": [ { "id": "F113", "technology": "failures", "title": "Failure of Success Criterion 1.2.5 due to not using available pauses in dialogue to provide audio descriptions of important visual content" } ] } }, { "id": "sign-language-prerecorded", "num": "1.2.6", "alt_id": [ "media-equiv-sign" ], "content": "Sign language interpretation is provided for all prerecorded\n audio content in synchronized media.\n
", "handle": "Sign Language (Prerecorded)", "title": "Sign language interpretation is provided for all prerecorded audio content in synchronized media.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G54", "technology": "general", "title": "Including a sign language interpreter in the video stream" }, { "id": "G81", "technology": "general", "title": "Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player", "suffix": "using one of the following techniques:", "using": [ { "id": "SM13", "technology": "smil", "title": "Providing sign language interpretation through synchronized video streams in SMIL 1.0" }, { "id": "SM14", "technology": "smil", "title": "Providing sign language interpretation through synchronized video streams in SMIL 2.0" } ] } ] } }, { "id": "extended-audio-description-prerecorded", "num": "1.2.7", "alt_id": [ "media-equiv-extended-ad" ], "content": "Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded\n video content in synchronized media.\n
", "handle": "Extended Audio Description (Prerecorded)", "title": "Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G8", "technology": "general", "title": "Providing a movie with extended audio descriptions", "suffix": "using one of the following techniques:", "using": [ { "id": "SM1", "technology": "smil", "title": "Adding extended audio description in SMIL 1.0" }, { "id": "SM2", "technology": "smil", "title": "Adding extended audio description in SMIL 2.0" } ] } ], "advisory": [ { "id": "H96", "technology": "html", "title": "Using the track element to provide audio descriptions" } ] } }, { "id": "media-alternative-prerecorded", "num": "1.2.8", "alt_id": [ "media-equiv-text-doc" ], "content": "An alternative for time-based media is provided for all prerecorded\n synchronized media and for all prerecorded video-only media.\n
", "handle": "Media Alternative (Prerecorded)", "title": "An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If the content is prerecorded synchronized media:", "techniques": [ { "id": "G69", "technology": "general", "title": "Providing an alternative for time based media", "suffix": "using one of the following techniques:", "using": [ { "id": "G58", "technology": "general", "title": "Placing a link to the alternative for time-based media immediately next to the non-text content" } ] }, { "title": "Linking to the alternative for time-based media", "suffix": "using one of the following techniques:", "using": [ { "id": "H53", "technology": "html", "title": "Using the body of the object element" } ] } ] }, { "title": "Situation B: If the content is prerecorded video-only:", "techniques": [ { "id": "G159", "technology": "general", "title": "Providing an alternative for time-based media for video-only content" } ] } ], "failure": [ { "id": "F74", "technology": "failures", "title": "Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative" } ] } }, { "id": "audio-only-live", "num": "1.2.9", "alt_id": [ "media-equiv-live-audio-only" ], "content": "An alternative for time-based media that presents equivalent information for live\n audio-only content is provided.\n
", "handle": "Audio-only (Live)", "title": "An alternative for time-based media that presents equivalent information for live audio-only content is provided.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G151", "technology": "general", "title": "Providing a link to a text transcript of a prepared statement or script if the script is followed" }, { "id": "G150", "technology": "general", "title": "Providing text based alternatives for live audio-only content" }, { "id": "G157", "technology": "general", "title": "Incorporating a live audio captioning service into a web page" } ] } } ] }, { "id": "adaptable", "num": "1.3", "alt_id": [ "content-structure-separation" ], "content": "Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
", "handle": "Adaptable", "title": "Create content that can be presented in different ways (for example simpler layout) without losing information or structure.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "info-and-relationships", "num": "1.3.1", "alt_id": [ "content-structure-separation-programmatic" ], "content": "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.\n
", "handle": "Info and Relationships", "title": "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:", "techniques": [ { "id": "ARIA11", "technology": "aria", "title": "Using ARIA landmarks to identify regions of a page" }, { "id": "H101", "technology": "html", "title": "Using semantic HTML elements to identify regions of a page" }, { "id": "ARIA12", "technology": "aria", "title": "Using role=heading to identify headings" }, { "id": "ARIA13", "technology": "aria", "title": "Using aria-labelledby to name regions and landmarks" }, { "id": "ARIA16", "technology": "aria", "title": "Using aria-labelledby to provide a name for user interface controls" }, { "id": "ARIA17", "technology": "aria", "title": "Using grouping roles to identify related form controls" }, { "id": "ARIA20", "technology": "aria", "title": "Using the region role to identify a region of the page" }, { "and": [ { "id": "G115", "technology": "general", "title": "Using semantic elements to mark up structure" }, { "id": "H49", "technology": "html", "title": "Using semantic markup to mark emphasized or special text" } ] }, { "id": "G117", "technology": "general", "title": "Using text to convey information that is conveyed by variations in presentation of text" }, { "id": "G140", "technology": "general", "title": "Separating information and structure from presentation to enable different presentations" }, { "id": "ARIA24", "technology": "aria", "title": "Semantically identifying a font icon with role=\"img\"" }, { "title": "Making information and relationships conveyed through presentation programmatically determinable", "suffix": "using the following techniques:", "using": [ { "id": "G138", "technology": "general", "title": "Using semantic markup whenever color cues are used" }, { "id": "H51", "technology": "html", "title": "Using table markup to present tabular information" }, { "id": "PDF6", "technology": "pdf", "title": "Using table elements for table markup in PDF Documents" }, { "id": "PDF20", "technology": "pdf", "title": "Using Adobe Acrobat Pro's Table Editor to repair mistagged tables" }, { "id": "H39", "technology": "html", "title": "Using caption elements to associate data table captions with data tables" }, { "id": "H63", "technology": "html", "title": "Using the scope attribute to associate header cells with data cells in data tables" }, { "id": "H43", "technology": "html", "title": "Using id and headers attributes to associate data cells with header cells in data tables" }, { "id": "H44", "technology": "html", "title": "Using label elements to associate text labels with form controls" }, { "id": "H65", "technology": "html", "title": "Using the title attribute to identify form controls when the label element cannot be used" }, { "id": "PDF10", "technology": "pdf", "title": "Providing labels for interactive form controls in PDF documents" }, { "id": "PDF12", "technology": "pdf", "title": "Providing name, role, value information for form fields in PDF documents" }, { "id": "H71", "technology": "html", "title": "Providing a description for groups of form controls using fieldset and legend elements" }, { "id": "H85", "technology": "html", "title": "Using optgroup to group option elements inside a select" }, { "id": "H48", "technology": "html", "title": "Using ol, ul and dl for lists or groups of links" }, { "id": "H42", "technology": "html", "title": "Using h1-h6 to identify headings" }, { "id": "PDF9", "technology": "pdf", "title": "Providing headings by marking content with heading tags in PDF documents" }, { "id": "PDF11", "technology": "pdf", "title": "Providing links and link text using the Link annotation and the /Link structure element in PDF documents" }, { "id": "PDF17", "technology": "pdf", "title": "Specifying consistent page numbering for PDF documents" }, { "id": "PDF21", "technology": "pdf", "title": "Using List tags for lists in PDF documents" }, { "id": "H97", "technology": "html", "title": "Grouping related links using the nav element" } ] } ] }, { "title": "Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:", "techniques": [ { "id": "G117", "technology": "general", "title": "Using text to convey information that is conveyed by variations in presentation of text" }, { "title": "Making information and relationships conveyed through presentation programmatically determinable or available in text", "suffix": "using the following techniques:", "using": [ { "id": "T1", "technology": "text", "title": "Using standard text formatting conventions for paragraphs" }, { "id": "T2", "technology": "text", "title": "Using standard text formatting conventions for lists" }, { "id": "T3", "technology": "text", "title": "Using standard text formatting conventions for headings" } ] } ] } ], "advisory": [ { "id": "C22", "technology": "css", "title": "Using CSS to control visual presentation of text" }, { "id": "G162", "technology": "general", "title": "Positioning labels to maximize predictability of relationships" }, { "id": "ARIA1", "technology": "aria", "title": "Using the aria-describedby property to provide a descriptive label for user interface controls" }, { "id": "ARIA2", "technology": "aria", "title": "Identifying a required field with the aria-required property" }, { "id": "G141", "technology": "general", "title": "Organizing a page using headings" } ], "failure": [ { "id": "F2", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text" }, { "id": "F33", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content" }, { "id": "F34", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content" }, { "id": "F42", "technology": "failures", "title": "Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links" }, { "id": "F43", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content" }, { "id": "F46", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables" }, { "id": "F48", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information" }, { "id": "F90", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes" }, { "id": "F91", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 for not correctly marking up table headers" }, { "id": "F92", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information" }, { "id": "F111", "technology": "failures", "title": "Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name" } ] } }, { "id": "meaningful-sequence", "num": "1.3.2", "alt_id": [ "content-structure-separation-sequence" ], "content": "When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.\n
", "handle": "Meaningful Sequence", "title": "When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G57", "technology": "general", "title": "Ordering the content in a meaningful sequence", "suffix": "for all the content in the web page" }, { "id": "G57", "technology": "general", "title": "Ordering the content in a meaningful sequence", "prefix": "Marking sequences in the content as meaningful using one of the following techniques AND", "suffix": "for those sequences", "using": [ { "id": "H34", "technology": "html", "title": "Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline" }, { "id": "H56", "technology": "html", "title": "Using the dir attribute on an inline element to resolve problems with nested directional runs" }, { "id": "C6", "technology": "css", "title": "Positioning content based on structural markup" }, { "id": "C8", "technology": "css", "title": "Using CSS letter-spacing to control spacing within a word" } ] }, { "id": "C27", "technology": "css", "title": "Making the DOM order match the visual order" }, { "id": "PDF3", "technology": "pdf", "title": "Ensuring correct tab and reading order in PDF documents" } ], "failure": [ { "id": "F34", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content" }, { "id": "F33", "technology": "failures", "title": "Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content" }, { "id": "F32", "technology": "failures", "title": "Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word" }, { "id": "F49", "technology": "failures", "title": "Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized" }, { "id": "F1", "technology": "failures", "title": "Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS" } ] } }, { "id": "sensory-characteristics", "num": "1.3.3", "alt_id": [ "content-structure-separation-understanding" ], "content": "Instructions provided for understanding and operating content do not rely solely on\n sensory characteristics of components such as shape, color, size, visual location, orientation,\n or sound.\n
\n \nFor requirements related to color, refer to Guideline 1.4.
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
\n \t\t\t\t\nExamples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where content is not necessarily restricted to landscape or portrait display orientation.
The purpose of each input field collecting information about the user can be programmatically determined when:
\n \nIn content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.
", "handle": "Identify Purpose", "title": "In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.", "versions": [ "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Programmatically indicating the purpose of icons, regions and user interface components" }, { "id": "ARIA11", "technology": "aria", "title": "Using ARIA landmarks to identify regions of a page" }, { "title": "Using microdata to markup user interface components (future link)" } ], "advisory": [ { "title": "Enabling user agents to find the version of the content that best fits their needs" }, { "title": "Using semantics to identify important features (e.g.,coga-simplification=\"simplest\")"
},
{
"title": "Using aria-invalid and aria-required"
}
]
}
}
]
},
{
"id": "distinguishable",
"num": "1.4",
"alt_id": [
"visual-audio-contrast"
],
"content": "Make it easier for users to see and hear content including separating foreground from background.
", "handle": "Distinguishable", "title": "Make it easier for users to see and hear content including separating foreground from background.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "use-of-color", "num": "1.4.1", "alt_id": [ "visual-audio-contrast-without-color" ], "content": "Color is not used as the only visual means of conveying information, indicating an\n action, prompting a response, or distinguishing a visual element.\n
\n \nThis success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.
If any audio on a web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio\n volume independently from the overall system volume level.\n
\n \nSince any content that does not meet this success criterion can interfere with a user's\n ability to use the whole page, all content on the web page (whether or not it is used\n to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.\n
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:\n
\n \nLarge-scale text and images of large-scale text have a contrast ratio of at least 3:1;\n
\n \nText or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant\n other visual content, have no contrast requirement.\n
\n \nText that is part of a logo or brand name has no contrast requirement.
\n \nExcept for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.\n
", "handle": "Resize Text", "title": "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "G142", "technology": "general", "title": "Using a technology that has commonly-available user agents that support zoom" }, { "and": [ { "title": "Ensuring that text containers resize when the text resizes" }, { "title": "using measurements that are relative to other measurements in the content" } ], "using": [ { "id": "C28", "technology": "css", "title": "Specifying the size of text containers using em units" }, { "title": "Techniques for relative measurements", "using": [ { "id": "C12", "technology": "css", "title": "Using percent for font sizes" }, { "id": "C13", "technology": "css", "title": "Using named font sizes" }, { "id": "C14", "technology": "css", "title": "Using em units for font sizes" } ] }, { "title": "Techniques for text container resizing", "using": [ { "id": "SCR34", "technology": "client-side-script", "title": "Calculating size and position in a way that scales with text size" }, { "id": "G146", "technology": "general", "title": "Using liquid layout" } ] } ] }, { "id": "G178", "technology": "general", "title": "Providing controls on the web page that allow users to incrementally change the size of all text on the page up to 200 percent" }, { "id": "G179", "technology": "general", "title": "Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width" } ], "advisory": [ { "id": "C17", "technology": "css", "title": "Scaling form elements which contain text" }, { "id": "C20", "technology": "css", "title": "Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized" }, { "id": "C22", "technology": "css", "title": "Using CSS to control visual presentation of text" } ], "failure": [ { "id": "F69", "technology": "failures", "title": "Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured" }, { "id": "F80", "technology": "failures", "title": "Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%" }, { "id": "F94", "technology": "failures", "title": "Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text" } ] } }, { "id": "images-of-text", "num": "1.4.5", "alt_id": [ "visual-audio-contrast-text-presentation" ], "content": "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:\n
\n \nThe image of text can be visually customized to the user's requirements;\n
\n \nA particular presentation of text is essential to the information being conveyed.\n
\n \nLogotypes (text that is part of a logo or brand name) are considered essential.
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:\n
\n \nLarge-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;\n
\n \nText or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant\n other visual content, have no contrast requirement.\n
\n \nText that is part of a logo or brand name has no contrast requirement.
\n \nFor prerecorded\n audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio\n CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression\n such as singing or rapping, at least one of the following is true:\n
\n \nThe audio does not contain background sounds.
\n \nThe background sounds can be turned off.
\n \nThe background sounds are at least 20 decibels lower than the foreground speech content,\n with the exception of occasional sounds that last for only one or two seconds.\n
\n \nPer the definition of \"decibel,\" background sound that meets this requirement will\n be approximately four times quieter than the foreground speech content.\n
For the visual presentation of blocks of text, a mechanism is available to achieve the following:\n
\nContent is not required to use these values. The requirement is that a mechanism is available for users to change these presentation aspects. The mechanism can be provided by the browser or other user agent. Content is not required to provide the mechanism.
Writing systems for some languages use different presentation aspects to improve readability and legibility. If a presentation aspect in this success criterion is not used in a writing system, content in that writing system does not need to use that presentation setting and can conform without it. Authors are encouraged to follow guidance for improving readability and legibility of text in their writing system.
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.\n
\n \nLogotypes (text that is part of a logo or brand name) are considered essential.
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
\nExcept for parts of the content which require two-dimensional layout for usage or meaning.
\n \n320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.
Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
\n \t\t\t\t\t\nIn content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
\n \nException: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.
\n\nContent is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost.
Writing systems for some languages use different text spacing settings, such as paragraph start indent. Authors are encouraged to follow locally available guidance for improving readability and legibility of text in their writing system.
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
\n\nException: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
\n\n \tExamples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute [HTML].
Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
This criterion applies to content that appears in addition to the triggering component itself. Since hidden components that are made visible on keyboard focus (such as links used to skip to another part of a page) do not present additional content they are not covered by this criterion.
User interface components and navigation must be operable.
", "handle": "Operable", "title": "User interface components and navigation must be operable.", "versions": [ "2.0", "2.1", "2.2" ], "guidelines": [ { "id": "keyboard-accessible", "num": "2.1", "alt_id": [ "keyboard-operation" ], "content": "Make all functionality available from a keyboard.
", "handle": "Keyboard Accessible", "title": "Make all functionality available from a keyboard.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "keyboard", "num": "2.1.1", "alt_id": [ "keyboard-operation-keyboard-operable" ], "content": "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying\n function requires input that depends on the path of the user's movement and not just\n the endpoints.\n
\n \nThis exception relates to the underlying function, not the input technique. For example,\n if using handwriting to enter text, the input technique (handwriting) requires path-dependent\n input but the underlying function (text input) does not.\n
This does not forbid and should not discourage providing mouse input or other input\n methods in addition to keyboard operation.\n
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface,\n and, if it requires more than unmodified arrow or tab keys or other standard exit\n methods, the user is advised of the method for moving focus away.\n
\n \nSince any content that does not meet this success criterion can interfere with a user's\n ability to use the whole page, all content on the web page (whether it is used to\n meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.\n
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.\n
", "handle": "Keyboard (No Exception)", "title": "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "No additional techniques exist for this success criterion. Follow techniques for Success Criterion 2.1.1. If that is not possible because there is a requirement for path-dependent input, then it is not possible to meet this Level AAA success criterion." } ] } }, { "id": "character-key-shortcuts", "num": "2.1.4", "alt_id": [], "content": "If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
\n\nProvide users enough time to read and use content.
", "handle": "Enough Time", "title": "Provide users enough time to read and use content.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "timing-adjustable", "num": "2.2.1", "alt_id": [ "time-limits-required-behaviors" ], "content": "For each time limit that is set by the content, at least one of the following is true:
\n \nThe user is allowed to turn off the time limit before encountering it; or
\n \nThe user is allowed to adjust the time limit before encountering it over a wide range\n that is at least ten times the length of the default setting; or\n
\n \nThe user is warned before time expires and given at least 20 seconds to extend the\n time limit with a simple action (for example, \"press the space bar\"), and the user\n is allowed to extend the time limit at least ten times; or\n
\n \nThe time limit is a required part of a real-time event (for example, an auction),\n and no alternative to the time limit is possible; or\n
\n \nThe time limit is essential and extending it would invalidate the activity; or\n
\n \nThe time limit is longer than 20 hours.
\n \nThis success criterion helps ensure that users can complete tasks without unexpected\n changes in content or context that are a result of a time limit. This success criterion\n should be considered in conjunction with Success Criterion 3.2.1, which puts limits on changes of content or context as a result of user action.\n
For moving, blinking, scrolling, or auto-updating information, all of the following are true:\n
\n \nFor any moving, blinking or scrolling information that (1) starts automatically, (2)\n lasts more than five seconds, and (3) is presented in parallel with other content,\n there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity\n where it is essential; and\n
\n \nFor any auto-updating information that (1) starts automatically and (2) is presented\n in parallel with other content, there is a mechanism for the user to pause, stop,\n or hide it or to control the frequency of the update unless the auto-updating is part\n of an activity where it is essential.\n
\n \nFor requirements related to flickering or flashing content, refer to Guideline 2.3.\n
Since any content that does not meet this success criterion can interfere with a user's\n ability to use the whole page, all content on the web page (whether it is used to\n meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.\n
Content that is updated periodically by software or that is streamed to the user agent\n is not required to preserve or present information that is generated or received between\n the initiation of the pause and resuming presentation, as this may not be technically\n possible, and in many situations could be misleading to do so.\n
An animation that occurs as part of a preload phase or similar situation can be considered\n essential if interaction cannot occur during that phase for all users and if not indicating\n progress could confuse users or cause them to think that content was frozen or broken.\n
Timing is not an essential part of the event or activity presented by the content, except for non-interactive\n synchronized media and real-time events.\n
", "handle": "No Timing", "title": "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.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G5", "technology": "general", "title": "Allowing users to complete an activity without any time limit" } ] } }, { "id": "interruptions", "num": "2.2.4", "alt_id": [ "time-limits-postponed" ], "content": "Interruptions can be postponed or suppressed by the user, except interruptions involving\n an emergency.\n
", "handle": "Interruptions", "title": "Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G75", "technology": "general", "title": "Providing a mechanism to postpone any updating of content" }, { "id": "G76", "technology": "general", "title": "Providing a mechanism to request an update of the content instead of updating automatically" }, { "id": "SCR14", "technology": "client-side-script", "title": "Using scripts to make nonessential alerts optional" } ], "failure": [ { "id": "F40", "technology": "failures", "title": "Failure due to using meta redirect with a time limit" }, { "id": "F41", "technology": "failures", "title": "Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page" } ] } }, { "id": "re-authenticating", "num": "2.2.5", "alt_id": [ "time-limits-server-timeout" ], "content": "When an authenticated session expires, the user can continue the activity without\n loss of data after re-authenticating.\n
", "handle": "Re-authenticating", "title": "When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Providing options to continue without loss of data", "suffix": "using one of the following techniques:", "using": [ { "id": "G105", "technology": "general", "title": "Saving data so that it can be used after a user re-authenticates" }, { "id": "G181", "technology": "general", "title": "Encoding user data as hidden or encrypted data in a re-authorization page" } ] } ], "sufficientNote": "Refer to Techniques for Addressing Success Criterion 2.2.1 for techniques related to providing notifications about time limits.", "failure": [ { "id": "F12", "technology": "failures", "title": "Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism for saving user's input and re-establishing that information upon re-authentication" } ] } }, { "id": "timeouts", "num": "2.2.6", "alt_id": [], "content": "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.
\n \nPrivacy regulations may require explicit user consent before user identification has been authenticated and before user data is preserved. In cases where the user is a minor, explicit consent may not be solicited in most jurisdictions, countries or regions. Consultation with privacy professionals and legal counsel is advised when considering data preservation as an approach to satisfy this success criterion.
Do not design content in a way that is known to cause seizures or physical reactions.
", "handle": "Seizures and Physical Reactions", "title": "Do not design content in a way that is known to cause seizures or physical reactions.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "three-flashes-or-below-threshold", "num": "2.3.1", "alt_id": [ "seizure-does-not-violate" ], "content": "Web pages do not contain anything that flashes more than three times in any one second period,\n or the flash is below the general flash and red flash thresholds.\n
\n \nSince any content that does not meet this success criterion can interfere with a user's\n ability to use the whole page, all content on the web page (whether it is used to\n meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.\n
Web pages do not contain anything that flashes more than three times in any one second period.\n
", "handle": "Three Flashes", "title": "Web pages do not contain anything that flashes more than three times in any one second period.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G19", "technology": "general", "title": "Ensuring that no component of the content flashes more than three times in any 1-second period" } ] } }, { "id": "animation-from-interactions", "num": "2.3.3", "alt_id": [], "content": "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
", "handle": "Animation from Interactions", "title": "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.", "versions": [ "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "C39", "technology": "css", "title": "Using the CSS prefers-reduced-motion query to prevent motion" }, { "id": "SCR40", "technology": "client-side-script", "title": "Using the CSS prefers-reduced-motion query in JavaScript to prevent motion" }, { "title": "Gx: Allowing users to set a preference that prevents animation" } ] } } ] }, { "id": "navigable", "num": "2.4", "alt_id": [ "navigation-mechanisms" ], "content": "Provide ways to help users navigate, find content, and determine where they are.
", "handle": "Navigable", "title": "Provide ways to help users navigate, find content, and determine where they are.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "bypass-blocks", "num": "2.4.1", "alt_id": [ "navigation-mechanisms-skip" ], "content": "A mechanism is available to bypass blocks of content that are repeated on multiple web pages.\n
", "handle": "Bypass Blocks", "title": "A mechanism is available to bypass blocks of content that are repeated on multiple web pages.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "title": "Creating links to skip blocks of repeated material", "suffix": "using one of the following techniques:", "using": [ { "id": "G1", "technology": "general", "title": "Adding a link at the top of each page that goes directly to the main content area" }, { "id": "G123", "technology": "general", "title": "Adding a link at the beginning of a block of repeated content to go to the end of the block" }, { "id": "G124", "technology": "general", "title": "Adding links at the top of the page to each area of the content" } ] }, { "title": "Grouping blocks of repeated material in a way that can be skipped", "suffix": "using one of the following techniques:", "using": [ { "id": "ARIA11", "technology": "aria", "title": "Using ARIA landmarks to identify regions of a page" }, { "id": "H69", "technology": "html", "title": "Providing heading elements at the beginning of each section of content" }, { "id": "PDF9", "technology": "pdf", "title": "Providing headings by marking content with heading tags in PDF documents" }, { "id": "H64", "technology": "html", "title": "Using the title attribute of the iframe element" }, { "id": "SCR28", "technology": "client-side-script", "title": "Using an expandable and collapsible menu to bypass block of content" } ] } ], "advisory": [ { "id": "C6", "technology": "css", "title": "Positioning content based on structural markup" }, { "id": "H97", "technology": "html", "title": "Grouping related links using the nav element" } ] } }, { "id": "page-titled", "num": "2.4.2", "alt_id": [ "navigation-mechanisms-title" ], "content": "Web pages have titles that describe topic or purpose.\n
", "handle": "Page Titled", "title": "Web pages have titles that describe topic or purpose.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "and": [ { "id": "G88", "technology": "general", "title": "Providing descriptive titles for web pages" }, { "title": "associating a title with a web page" } ], "using": [ { "id": "H25", "technology": "html", "title": "Providing a title using the title element" }, { "id": "PDF18", "technology": "pdf", "title": "Specifying the document title using the Title entry in the document information dictionary of a PDF document" } ] } ], "advisory": [ { "id": "G127", "technology": "general", "title": "Identifying a web page's relationship to a larger collection of web pages" } ], "failure": [ { "id": "F25", "technology": "failures", "title": "Failure of Success Criterion 2.4.2 due to the title of a web page not identifying the contents" } ] } }, { "id": "focus-order", "num": "2.4.3", "alt_id": [ "navigation-mechanisms-focus-order" ], "content": "If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive\n focus in an order that preserves meaning and operability.\n
", "handle": "Focus Order", "title": "If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G59", "technology": "general", "title": "Placing the interactive elements in an order that follows sequences and relationships within the content" }, { "title": "Giving focus to elements in an order that follows sequences and relationships within the content", "suffix": "using one of the following techniques:", "using": [ { "id": "C27", "technology": "css", "title": "Making the DOM order match the visual order" }, { "id": "PDF3", "technology": "pdf", "title": "Ensuring correct tab and reading order in PDF documents" } ] }, { "title": "Changing a web page dynamically", "suffix": "using one of the following techniques:", "using": [ { "id": "SCR26", "technology": "client-side-script", "title": "Inserting dynamic content into the Document Object Model immediately following its trigger element" }, { "id": "H102", "technology": "html", "title": "Creating modal dialogs with the HTML dialog element" }, { "id": "SCR27", "technology": "client-side-script", "title": "Reordering page sections using the Document Object Model" } ] } ], "failure": [ { "id": "F44", "technology": "failures", "title": "Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability" }, { "id": "F85", "technology": "failures", "title": "Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order" } ] } }, { "id": "link-purpose-in-context", "num": "2.4.4", "alt_id": [ "navigation-mechanisms-refs" ], "content": "The purpose of each link can be determined from the link text alone or from the link text together with its\n programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.\n
", "handle": "Link Purpose (In Context)", "title": "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G91", "technology": "general", "title": "Providing link text that describes the purpose of a link" }, { "id": "H30", "technology": "html", "title": "Providing link text that describes the purpose of a link for anchor elements" }, { "id": "H24", "technology": "html", "title": "Providing text alternatives for the area elements of image maps" }, { "title": "Allowing the user to choose short or long link text", "suffix": "using one of the following techniques:", "using": [ { "id": "G189", "technology": "general", "title": "Providing a control near the beginning of the web page that changes the link text" }, { "id": "SCR30", "technology": "client-side-script", "title": "Using scripts to change the link text" } ] }, { "id": "G53", "technology": "general", "title": "Identifying the purpose of a link using link text combined with the text of the enclosing sentence" }, { "title": "Providing a supplemental description of the purpose of a link", "suffix": "using one of the following techniques:", "using": [ { "id": "H33", "technology": "html", "title": "Supplementing link text with the title attribute" }, { "id": "C7", "technology": "css", "title": "Using CSS to hide a portion of the link text" } ] }, { "title": "Identifying the purpose of a link using link text combined with programmatically determined link context", "suffix": "using one of the following techniques:", "using": [ { "id": "ARIA7", "technology": "aria", "title": "Using aria-labelledby for link purpose" }, { "id": "ARIA8", "technology": "aria", "title": "Using aria-label for link purpose" }, { "id": "H77", "technology": "html", "title": "Identifying the purpose of a link using link text combined with its enclosing list item" }, { "id": "H78", "technology": "html", "title": "Identifying the purpose of a link using link text combined with its enclosing paragraph" }, { "id": "H79", "technology": "html", "title": "Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells" }, { "id": "H81", "technology": "html", "title": "Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested" } ] }, { "and": [ { "id": "G91", "technology": "general", "title": "Providing link text that describes the purpose of a link" }, { "title": "semantically indicating links" } ], "using": [ { "id": "PDF11", "technology": "pdf", "title": "Providing links and link text using the Link annotation and the /Link structure element in PDF documents" }, { "id": "PDF13", "technology": "pdf", "title": "Providing replacement text using the /Alt entry for links in PDF documents" } ] } ], "advisory": [ { "id": "H2", "technology": "html", "title": "Combining adjacent image and text links for the same resource" }, { "id": "H80", "technology": "html", "title": "Identifying the purpose of a link using link text combined with the preceding heading element" } ], "failure": [ { "id": "F63", "technology": "failures", "title": "Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link" }, { "id": "F89", "technology": "failures", "title": "Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link" } ] } }, { "id": "multiple-ways", "num": "2.4.5", "alt_id": [ "navigation-mechanisms-mult-loc" ], "content": "More than one way is available to locate a web page within a set of web pages except where the web page is the result of, or a step in, a process.\n
", "handle": "Multiple Ways", "title": "More than one way is available to locate a web page within a set of web pages except where the web page is the result of, or a step in, a process.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "title": "Using two or more of the following techniques:", "using": [ { "id": "G125", "technology": "general", "title": "Providing links to navigate to related web pages" }, { "id": "G64", "technology": "general", "title": "Providing a Table of Contents" }, { "id": "G63", "technology": "general", "title": "Providing a site map" }, { "id": "G161", "technology": "general", "title": "Providing a search function to help users find content" }, { "id": "G126", "technology": "general", "title": "Providing a list of links to all other web pages" }, { "id": "G185", "technology": "general", "title": "Linking to all of the pages on the site from the home page" } ] } ], "advisory": [ { "id": "PDF2", "technology": "pdf", "title": "Creating bookmarks in PDF documents" } ] } }, { "id": "headings-and-labels", "num": "2.4.6", "alt_id": [ "navigation-mechanisms-descriptive" ], "content": "Headings and labels describe topic or purpose.\n
", "handle": "Headings and Labels", "title": "Headings and labels describe topic or purpose.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "G130", "technology": "general", "title": "Providing descriptive headings" }, { "id": "G131", "technology": "general", "title": "Providing descriptive labels" } ], "sufficientNote": "Headings and labels must be programmatically determined, per Success Criterion 1.3.1." } }, { "id": "focus-visible", "num": "2.4.7", "alt_id": [ "navigation-mechanisms-focus-visible" ], "content": "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.\n
", "handle": "Focus Visible", "title": "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "G149", "technology": "general", "title": "Using user interface components that are highlighted by the user agent when they receive focus" }, { "id": "C15", "technology": "css", "title": "Using CSS to change the presentation of a user interface component when it receives focus" }, { "id": "G165", "technology": "general", "title": "Using the default focus indicator for the platform so that high visibility default focus indicators will carry over" }, { "id": "G195", "technology": "general", "title": "Using an author-supplied, visible focus indicator" }, { "id": "C40", "technology": "css", "title": "Creating a two-color focus indicator to ensure sufficient contrast with all components" }, { "id": "C45", "technology": "css", "title": "Using CSS :focus-visible to provide keyboard focus indication" }, { "id": "SCR31", "technology": "client-side-script", "title": "Using script to change the background color or border of the element with focus" } ], "failure": [ { "id": "F55", "technology": "failures", "title": "Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received" }, { "id": "F78", "technology": "failures", "title": "Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator" } ] } }, { "id": "location", "num": "2.4.8", "alt_id": [ "navigation-mechanisms-location" ], "content": "Information about the user's location within a set of web pages is available.\n
", "handle": "Location", "title": "Information about the user's location within a set of web pages is available.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G65", "technology": "general", "title": "Providing a breadcrumb trail" }, { "id": "G63", "technology": "general", "title": "Providing a site map" }, { "id": "G128", "technology": "general", "title": "Indicating current location within navigation bars" }, { "id": "G127", "technology": "general", "title": "Identifying a web page's relationship to a larger collection of web pages" } ], "advisory": [ { "id": "PDF14", "technology": "pdf", "title": "Providing running headers and footers in PDF documents" }, { "id": "PDF17", "technology": "pdf", "title": "Specifying consistent page numbering for PDF documents" } ] } }, { "id": "link-purpose-link-only", "num": "2.4.9", "alt_id": [ "navigation-mechanisms-link" ], "content": "A mechanism is available to allow the purpose of each link to be identified from link text alone,\n except where the purpose of the link would be ambiguous to users in general.\n
", "handle": "Link Purpose (Link Only)", "title": "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.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "ARIA8", "technology": "aria", "title": "Using aria-label for link purpose" }, { "id": "G91", "technology": "general", "title": "Providing link text that describes the purpose of a link" }, { "id": "H30", "technology": "html", "title": "Providing link text that describes the purpose of a link for anchor elements" }, { "id": "H24", "technology": "html", "title": "Providing text alternatives for the area elements of image maps" }, { "title": "Allowing the user to choose short or long link text", "suffix": "using one of the following techniques:", "using": [ { "id": "G189", "technology": "general", "title": "Providing a control near the beginning of the web page that changes the link text" }, { "id": "SCR30", "technology": "client-side-script", "title": "Using scripts to change the link text" } ] }, { "title": "Providing a supplemental description of the purpose of a link", "suffix": "using one of the following techniques:", "using": [ { "id": "C7", "technology": "css", "title": "Using CSS to hide a portion of the link text" } ] }, { "title": "Semantically indicating links", "suffix": "using one of the following techniques:", "using": [ { "id": "PDF11", "technology": "pdf", "title": "Providing links and link text using the Link annotation and the /Link structure element in PDF documents" }, { "id": "PDF13", "technology": "pdf", "title": "Providing replacement text using the /Alt entry for links in PDF documents" } ] } ], "advisory": [ { "id": "H2", "technology": "html", "title": "Combining adjacent image and text links for the same resource" }, { "id": "H33", "technology": "html", "title": "Supplementing link text with the title attribute" } ], "failure": [ { "id": "F84", "technology": "failures", "title": "Failure of Success Criterion 2.4.9 due to using a non-specific link such as \"click here\" or \"more\" without a mechanism to change the link text to specific text." }, { "id": "F89", "technology": "failures", "title": "Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link" } ] } }, { "id": "section-headings", "num": "2.4.10", "alt_id": [ "navigation-mechanisms-headings" ], "content": "Section headings are used to organize the content.\n
\n \n\"Heading\" is used in its general sense and includes titles and other ways to add a\n heading to different types of content.\n
This success criterion covers sections within writing, not user interface components. User interface components are covered under Success Criterion 4.1.2.\n
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
\n\nWhere content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this success criterion.
Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered visually hidden due to author-created content.
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.
", "handle": "Focus Not Obscured (Enhanced)", "title": "When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.", "versions": [ "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "C43", "technology": "css", "title": "Using CSS scroll-padding to un-obscure content" } ], "failure": [ { "title": "An interaction that causes content to appear over the component with keyboard focus, visually covering part of the focus indicator. This behavior might be encountered with advertising or promotional material meant to provide more information about a product as the user navigates through a catalogue." }, { "title": "A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page, a focused item is partially obscured by the footer because content in the viewport scrolls without sufficient scroll padding." } ] } }, { "id": "focus-appearance", "num": "2.4.13", "alt_id": [], "content": "When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
\nExceptions:
\nWhat is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.
Make it easier for users to operate functionality through various inputs beyond keyboard.
", "handle": "Input Modalities", "title": "Make it easier for users to operate functionality through various inputs beyond keyboard.", "versions": [ "2.1", "2.2" ], "successcriteria": [ { "id": "pointer-gestures", "num": "2.5.1", "alt_id": [], "content": "All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
\n \t\t\t\t\t\nThis requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).
For functionality that can be operated using a single pointer, at least one of the following is true:
\n \t\t\t\t\t\nFunctions that emulate a keyboard or numeric keypad key press are considered essential.
This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
\n\nA best practice is to have the text of the label at the start of the name.
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
\n \nThe size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
\nWeb content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
", "handle": "Concurrent Input Mechanisms", "title": "Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.", "versions": [ "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Only using high-level, input-agnostic event handlers, such asfocus, blur, click, in Javascript (Potential future technique)"
},
{
"title": "Registering event handlers for keyboard/keyboard-like and pointer inputs simultaneously in Javascript; see Example 1 in Pointer Events Level 2 (Potential future technique)"
}
],
"failure": [
{
"id": "F98",
"technology": "failures",
"title": "Failure due to interactions being limited to touch-only on touchscreen devices"
}
]
}
},
{
"id": "dragging-movements",
"num": "2.5.7",
"alt_id": [],
"content": "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
\nThis requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:
\nTargets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.
Information and the operation of the user interface must be understandable.
", "handle": "Understandable", "title": "Information and the operation of the user interface must be understandable.", "versions": [ "2.0", "2.1", "2.2" ], "guidelines": [ { "id": "readable", "num": "3.1", "alt_id": [ "meaning" ], "content": "Make text content readable and understandable.
", "handle": "Readable", "title": "Make text content readable and understandable.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "language-of-page", "num": "3.1.1", "alt_id": [ "meaning-doc-lang-id" ], "content": "The default human language of each web page can be programmatically determined.\n
", "handle": "Language of Page", "title": "The default human language of each web page can be programmatically determined.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "H57", "technology": "html", "title": "Using the language attribute on the HTML element" }, { "id": "PDF16", "technology": "pdf", "title": "Setting the default language using the /Lang entry in the document catalog of a PDF document" }, { "id": "PDF19", "technology": "pdf", "title": "Specifying the language for a passage or phrase with the Lang entry in PDF documents" } ], "advisory": [ { "id": "SVR5", "technology": "server-side-script", "title": "Specifying the default language in the HTTP header" } ] } }, { "id": "language-of-parts", "num": "3.1.2", "alt_id": [ "meaning-other-lang-id" ], "content": "The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words\n or phrases that have become part of the vernacular of the immediately surrounding\n text.\n
", "handle": "Language of Parts", "title": "The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "H58", "technology": "html", "title": "Using language attributes to identify changes in the human language" }, { "id": "PDF19", "technology": "pdf", "title": "Specifying the language for a passage or phrase with the Lang entry in PDF documents" } ] } }, { "id": "unusual-words", "num": "3.1.3", "alt_id": [ "meaning-idioms" ], "content": "A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.\n
", "handle": "Unusual Words", "title": "A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If the word or phrase has a unique meaning within the web page:", "techniques": [ { "id": "G101", "technology": "general", "title": "Providing the definition of a word or phrase used in an unusual or restricted way", "suffix": "for the first occurrence of the word or phrase in a web page using one of the following techniques:", "using": [ { "id": "G55", "technology": "general", "title": "Linking to definitions", "using": [ { "id": "H40", "technology": "html", "title": "Using description lists" } ] }, { "id": "G112", "technology": "general", "title": "Using inline definitions", "using": [ { "id": "H54", "technology": "html", "title": "Using the dfn element to identify the defining instance of a word or phrase" } ] } ] }, { "id": "G101", "technology": "general", "title": "Providing the definition of a word or phrase used in an unusual or restricted way", "suffix": "for each occurrence of the word or phrase in a web page using one of the following techniques:", "using": [ { "id": "G55", "technology": "general", "title": "Linking to definitions", "using": [ { "id": "H40", "technology": "html", "title": "Using description lists" } ] }, { "id": "G62", "technology": "general", "title": "Providing a glossary" }, { "id": "G70", "technology": "general", "title": "Providing a function to search an online dictionary" } ] } ] }, { "title": "Situation B: If the word or phrase means different things within the same web page:", "techniques": [ { "id": "G101", "technology": "general", "title": "Providing the definition of a word or phrase used in an unusual or restricted way", "suffix": "for each occurrence of the word or phrase in a web page using one of the following techniques:", "using": [ { "id": "G55", "technology": "general", "title": "Linking to definitions", "using": [ { "id": "H40", "technology": "html", "title": "Using description lists" } ] }, { "id": "G112", "technology": "general", "title": "Using inline definitions", "using": [ { "id": "H54", "technology": "html", "title": "Using the dfn element to identify the defining instance of a word or phrase" } ] } ] } ] } ] } }, { "id": "abbreviations", "num": "3.1.4", "alt_id": [ "meaning-located" ], "content": "A mechanism for identifying the expanded form or meaning of abbreviations is available.\n
", "handle": "Abbreviations", "title": "A mechanism for identifying the expanded form or meaning of abbreviations is available.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If the abbreviation has only one meaning within the web page:", "techniques": [ { "id": "G102", "technology": "general", "title": "Providing the expansion or explanation of an abbreviation", "suffix": "for the first occurrence of the abbreviation in a web page using one of the following techniques:", "using": [ { "id": "G97", "technology": "general", "title": "Providing the first use of an abbreviation immediately before or after the expanded form" }, { "id": "G55", "technology": "general", "title": "Linking to definitions" }, { "id": "PDF8", "technology": "pdf", "title": "Providing definitions for abbreviations via an E entry for a structure element" } ] }, { "id": "G102", "technology": "general", "title": "Providing the expansion or explanation of an abbreviation", "suffix": "for all occurrences of the abbreviation in a web page using one of the following techniques:", "using": [ { "id": "G55", "technology": "general", "title": "Linking to definitions" }, { "id": "G62", "technology": "general", "title": "Providing a glossary" }, { "id": "G70", "technology": "general", "title": "Providing a function to search an online dictionary" }, { "id": "PDF8", "technology": "pdf", "title": "Providing definitions for abbreviations via an E entry for a structure element" } ] } ] }, { "title": "Situation B: If the abbreviation means different things within the same web page:", "techniques": [ { "id": "G102", "technology": "general", "title": "Providing the expansion or explanation of an abbreviation", "suffix": "for all occurrences of abbreviations in a web page using one of the following techniques:", "using": [ { "id": "G55", "technology": "general", "title": "Linking to definitions" }, { "id": "PDF8", "technology": "pdf", "title": "Providing definitions for abbreviations via an E entry for a structure element" } ] } ] } ], "advisory": [ { "id": "H28", "technology": "html", "title": "Providing definitions for abbreviations by using the abbr element" } ] } }, { "id": "reading-level", "num": "3.1.5", "alt_id": [ "meaning-supplements" ], "content": "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\n secondary education level, is available.\n
", "handle": "Reading Level", "title": "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.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G86", "technology": "general", "title": "Providing a text summary that can be understood by people with lower secondary education level reading ability" }, { "id": "G103", "technology": "general", "title": "Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes" }, { "id": "G79", "technology": "general", "title": "Providing a spoken version of the text" }, { "id": "G153", "technology": "general", "title": "Making the text easier to read" }, { "id": "G160", "technology": "general", "title": "Providing sign language versions of information, ideas, and processes that must be understood in order to use the content" } ], "sufficientNote": "Different sites may address this success criterion in different ways. An audio version of the content may be helpful to some users. For some people who are deaf, a sign language version of the page may be easier to understand than a written language version since sign language may be their first language. Some sites may decide to do both or other combinations. No technique will help all users who have difficulty. So different techniques are provided as sufficient techniques here for authors trying to make their sites more accessible. Any numbered technique or combination above can be used by a particular site and it is considered sufficient by the Working Group." } }, { "id": "pronunciation", "num": "3.1.6", "alt_id": [ "meaning-pronunciation" ], "content": "A mechanism is available for identifying specific pronunciation of words where meaning of the\n words, in context, is ambiguous without knowing the pronunciation.\n
", "handle": "Pronunciation", "title": "A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "id": "G120", "technology": "general", "title": "Providing the pronunciation immediately following the word" }, { "id": "G121", "technology": "general", "title": "Linking to pronunciations" }, { "id": "G62", "technology": "general", "title": "Providing a glossary", "suffix": "that includes pronunciation information for words that have a unique pronunciation in the content and have meaning that depends on pronunciation" }, { "id": "G163", "technology": "general", "title": "Using standard diacritical marks that can be turned off" }, { "id": "H62", "technology": "html", "title": "Using the ruby element" } ] } } ] }, { "id": "predictable", "num": "3.2", "alt_id": [ "consistent-behavior" ], "content": "Make web pages appear and operate in predictable ways.
", "handle": "Predictable", "title": "Make web pages appear and operate in predictable ways.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "on-focus", "num": "3.2.1", "alt_id": [ "consistent-behavior-receive-focus" ], "content": "When any user interface component receives focus, it does not initiate a change of context.\n
", "handle": "On Focus", "title": "When any user interface component receives focus, it does not initiate a change of context.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G107", "technology": "general", "title": "Using \"activate\" rather than \"focus\" as a trigger for changes of context" } ], "sufficientNote": "A change of content is not always a change of context. This success criterion is automatically met if changes in content are not also changes of context.", "advisory": [ { "id": "G200", "technology": "general", "title": "Opening new windows and tabs from a link only when necessary" }, { "id": "G201", "technology": "general", "title": "Giving users advanced warning when opening a new window" } ], "failure": [ { "id": "F55", "technology": "failures", "title": "Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received" } ] } }, { "id": "on-input", "num": "3.2.2", "alt_id": [ "consistent-behavior-unpredictable-change" ], "content": "Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.\n
", "handle": "On Input", "title": "Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G80", "technology": "general", "title": "Providing a submit button to initiate a change of context", "suffix": "using one of the following techniques:", "using": [ { "id": "H32", "technology": "html", "title": "Providing submit buttons" }, { "id": "H84", "technology": "html", "title": "Using a button with a select element to perform an action" }, { "id": "PDF15", "technology": "pdf", "title": "Providing submit buttons with the submit-form action in PDF forms" } ] }, { "id": "G13", "technology": "general", "title": "Describing what will happen before a change to a form control that causes a change of context to occur is made" }, { "id": "SCR19", "technology": "client-side-script", "title": "Using an onchange event on a select element without causing a change of context" } ], "sufficientNote": "A change of content is not always a change of context. This success criterion is automatically met if changes in content are not also changes of context.", "advisory": [ { "id": "G201", "technology": "general", "title": "Giving users advanced warning when opening a new window" } ], "failure": [ { "id": "F36", "technology": "failures", "title": "Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value" }, { "id": "F37", "technology": "failures", "title": "Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed" } ] } }, { "id": "consistent-navigation", "num": "3.2.3", "alt_id": [ "consistent-behavior-consistent-locations" ], "content": "Navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.\n
", "handle": "Consistent Navigation", "title": "Navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "id": "G61", "technology": "general", "title": "Presenting repeated components in the same relative order each time they appear" } ], "advisory": [ { "id": "PDF14", "technology": "pdf", "title": "Providing running headers and footers in PDF documents" }, { "id": "PDF17", "technology": "pdf", "title": "Specifying consistent page numbering for PDF documents" } ], "failure": [ { "id": "F66", "technology": "failures", "title": "Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages" } ] } }, { "id": "consistent-identification", "num": "3.2.4", "alt_id": [ "consistent-behavior-consistent-functionality" ], "content": "Components that have the same functionality within a set of web pages are identified consistently.\n
", "handle": "Consistent Identification", "title": "Components that have the same functionality within a set of web pages are identified consistently.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "and": [ { "id": "G197", "technology": "general", "title": "Using labels, names, and text alternatives consistently for content that has the same functionality" }, { "title": "following the sufficient techniques for Success Criterion 1.1.1 and sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives" } ] } ], "sufficientNote": "Text alternatives that are \"consistent\" are not always \"identical.\" For instance, you may have a graphical arrow at the bottom of a web page that links to the next web page. The text alternative may say \"Go to page 4.\" Naturally, it would not be appropriate to repeat this exact text alternative on the next web page. It would be more appropriate to say \"Go to page 5\". Although these text alternatives would not be identical, they would be consistent, and therefore would satisfy this success criterion.
A single non-text-content-item may be used to serve different functions. In such cases, different text alternatives are necessary and should be used. Examples can be commonly found with the use of icons such as check marks, cross marks, and traffic signs. Their functions can be different depending on the context of the web page. A check mark icon may function as \"approved\", \"completed\", or \"included\", to name a few, depending on the situation. Using \"check mark\" as text alternative across all web pages does not help users understand the function of the icon. Different text alternatives can be used when the same non-text content serves multiple functions.
", "failure": [ { "id": "F31", "technology": "failures", "title": "Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different web pages within a set of web pages" } ] } }, { "id": "change-on-request", "num": "3.2.5", "alt_id": [ "consistent-behavior-no-extreme-changes-context" ], "content": "Changes of context are initiated only by user request or a mechanism is available to turn off such changes.\n
", "handle": "Change on Request", "title": "Changes of context are initiated only by user request or a mechanism is available to turn off such changes.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If the web page allows automatic updates:", "techniques": [ { "id": "G76", "technology": "general", "title": "Providing a mechanism to request an update of the content instead of updating automatically" } ] }, { "title": "Situation B: If automatic redirects are possible:", "techniques": [ { "id": "SVR1", "technology": "server-side-script", "title": "Implementing automatic redirects on the server side instead of on the client side" }, { "id": "G110", "technology": "general", "title": "Using an instant client-side redirect", "suffix": "using one of the following techniques:", "using": [ { "id": "H76", "technology": "html", "title": "Using meta refresh to create an instant client-side redirect" } ] } ] }, { "title": "Situation C: If the web page uses pop-up windows:", "techniques": [ { "title": "Including pop-up windows", "suffix": "using one of the following techniques:", "using": [ { "id": "H83", "technology": "html", "title": "Using the target attribute to open a new window on user request and indicating this in link text" }, { "id": "SCR24", "technology": "client-side-script", "title": "Using progressive enhancement to open new windows on user request" } ] } ] }, { "title": "Situation D: If using an onchange event on a select element:", "techniques": [ { "id": "SCR19", "technology": "client-side-script", "title": "Using an onchange event on a select element without causing a change of context" } ] } ], "advisory": [ { "id": "G200", "technology": "general", "title": "Opening new windows and tabs from a link only when necessary" } ], "failure": [ { "id": "F60", "technology": "failures", "title": "Failure of Success Criterion 3.2.5 due to launching a new window when a user enters text into an input field" }, { "id": "F61", "technology": "failures", "title": "Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content" }, { "id": "F9", "technology": "failures", "title": "Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element" }, { "id": "F22", "technology": "failures", "title": "Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the user" }, { "id": "F52", "technology": "failures", "title": "Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded" }, { "id": "F40", "technology": "failures", "title": "Failure due to using meta redirect with a time limit" }, { "id": "F41", "technology": "failures", "title": "Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page" } ] } }, { "id": "consistent-help", "num": "3.2.6", "alt_id": [], "content": "If a web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple web pages within a set of web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:
\n\nHelp mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information.
For this success criterion, \"the same order relative to other page content\" can be thought of as how the content is ordered when the page is serialized. The visual position of a help mechanism is likely to be consistent across pages for the same page variation (e.g., CSS break-point). The user can initiate a change, such as changing the page's zoom or orientation, which may trigger a different page variation. This criterion is concerned with relative order across pages displayed in the same page variation (e.g., same zoom level and orientation).
Help users avoid and correct mistakes.
", "handle": "Input Assistance", "title": "Help users avoid and correct mistakes.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "error-identification", "num": "3.3.1", "alt_id": [ "minimize-error-identified" ], "content": "If an input error is automatically detected, the item that is in error is identified and the error\n is described to the user in text.\n
", "handle": "Error Identification", "title": "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If a form contains fields for which information from the user is mandatory.", "techniques": [ { "id": "G83", "technology": "general", "title": "Providing text descriptions to identify required fields that were not completed" }, { "id": "ARIA21", "technology": "aria", "title": "Using aria-invalid to Indicate An Error Field" }, { "id": "SCR18", "technology": "client-side-script", "title": "Providing client-side validation and alert" }, { "id": "PDF5", "technology": "pdf", "title": "Indicating required form controls in PDF forms" } ] }, { "title": "Situation B: If information provided by the user is required to be in a specific data format or of certain values.", "techniques": [ { "id": "ARIA18", "technology": "aria", "title": "Using aria-alertdialog to Identify Errors" }, { "id": "ARIA19", "technology": "aria", "title": "Using ARIA role=alert or Live Regions to Identify Errors" }, { "id": "ARIA21", "technology": "aria", "title": "Using aria-invalid to Indicate An Error Field" }, { "id": "G84", "technology": "general", "title": "Providing a text description when the user provides information that is not in the list of allowed values" }, { "id": "G85", "technology": "general", "title": "Providing a text description when user input falls outside the required format or values" }, { "id": "SCR18", "technology": "client-side-script", "title": "Providing client-side validation and alert" }, { "id": "SCR32", "technology": "client-side-script", "title": "Providing client-side validation and adding error text via the DOM" }, { "id": "PDF22", "technology": "pdf", "title": "Indicating when user input falls outside the required format or values in PDF forms" } ] } ], "advisory": [ { "id": "G139", "technology": "general", "title": "Creating a mechanism that allows users to jump to errors" }, { "id": "G199", "technology": "general", "title": "Providing success feedback when data is submitted successfully" }, { "id": "ARIA2", "technology": "aria", "title": "Identifying a required field with the aria-required property" } ] } }, { "id": "labels-or-instructions", "num": "3.3.2", "alt_id": [ "minimize-error-cues" ], "content": "Labels or instructions are provided when content requires user input.\n
", "handle": "Labels or Instructions", "title": "Labels or instructions are provided when content requires user input.", "versions": [ "2.0", "2.1", "2.2" ], "level": "A", "details": [], "techniques": { "sufficient": [ { "id": "G131", "technology": "general", "title": "Providing descriptive labels", "suffix": "AND one of the following techniques:", "using": [ { "id": "ARIA1", "technology": "aria", "title": "Using the aria-describedby property to provide a descriptive label for user interface controls" }, { "id": "ARIA9", "technology": "aria", "title": "Using aria-labelledby to concatenate a label from several text nodes" }, { "id": "ARIA17", "technology": "aria", "title": "Using grouping roles to identify related form controls" }, { "id": "G89", "technology": "general", "title": "Providing expected data format and example" }, { "id": "G184", "technology": "general", "title": "Providing text instructions at the beginning of a form or set of fields that describes the necessary input" }, { "id": "G162", "technology": "general", "title": "Positioning labels to maximize predictability of relationships" }, { "id": "G83", "technology": "general", "title": "Providing text descriptions to identify required fields that were not completed" }, { "id": "H90", "technology": "html", "title": "Indicating required form controls using label or legend" }, { "id": "PDF5", "technology": "pdf", "title": "Indicating required form controls in PDF forms" } ] }, { "id": "H44", "technology": "html", "title": "Using label elements to associate text labels with form controls" }, { "id": "PDF10", "technology": "pdf", "title": "Providing labels for interactive form controls in PDF documents" }, { "id": "H71", "technology": "html", "title": "Providing a description for groups of form controls using fieldset and legend elements" }, { "id": "G167", "technology": "general", "title": "Using an adjacent button to label the purpose of a field" } ], "sufficientNote": "The techniques at the end of the above list should be considered \"last resort\" and only used when the other techniques cannot be applied to the page. The earlier techniques are preferred because they increase accessibility to a wider user group.", "advisory": [ { "id": "G13", "technology": "general", "title": "Describing what will happen before a change to a form control that causes a change of context to occur is made" }, { "id": "ARIA2", "technology": "aria", "title": "Identifying a required field with the aria-required property" } ], "failure": [ { "id": "F82", "technology": "failures", "title": "Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label" } ] } }, { "id": "error-suggestion", "num": "3.3.3", "alt_id": [ "minimize-error-suggestions" ], "content": "If an input error is automatically detected and suggestions for correction are known, then the suggestions\n are provided to the user, unless it would jeopardize the security or purpose of the\n content.\n
", "handle": "Error Suggestion", "title": "If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If information for a field is required to be in a specific data format:", "techniques": [ { "id": "ARIA18", "technology": "aria", "title": "Using aria-alertdialog to Identify Errors" }, { "id": "G85", "technology": "general", "title": "Providing a text description when user input falls outside the required format or values" }, { "id": "G177", "technology": "general", "title": "Providing suggested correction text" }, { "id": "PDF22", "technology": "pdf", "title": "Indicating when user input falls outside the required format or values in PDF forms" } ] }, { "title": "Situation B: Information provided by the user is required to be one of a limited set of values:", "techniques": [ { "id": "ARIA18", "technology": "aria", "title": "Using aria-alertdialog to Identify Errors" }, { "id": "G84", "technology": "general", "title": "Providing a text description when the user provides information that is not in the list of allowed values" }, { "id": "G177", "technology": "general", "title": "Providing suggested correction text" }, { "id": "PDF22", "technology": "pdf", "title": "Indicating when user input falls outside the required format or values in PDF forms" } ] } ], "sufficientNote": "In some cases, more than one of these situations may apply. For example, when a mandatory field also requires the data to be in a specific format.", "advisory": [ { "id": "G139", "technology": "general", "title": "Creating a mechanism that allows users to jump to errors" }, { "id": "G199", "technology": "general", "title": "Providing success feedback when data is submitted successfully" }, { "id": "SCR18", "technology": "client-side-script", "title": "Providing client-side validation and alert" }, { "id": "SCR32", "technology": "client-side-script", "title": "Providing client-side validation and adding error text via the DOM" } ] } }, { "id": "error-prevention-legal-financial-data", "num": "3.3.4", "alt_id": [ "minimize-error-reversible" ], "content": "For web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of\n the following is true:\n
\n\nContext-sensitive help is available.\n
", "handle": "Help", "title": "Context-sensitive help is available.", "versions": [ "2.0", "2.1", "2.2" ], "level": "AAA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If a form requires text input:", "techniques": [ { "id": "G71", "technology": "general", "title": "Providing a help link on every web page" }, { "id": "G193", "technology": "general", "title": "Providing help by an assistant in the web page" }, { "id": "G194", "technology": "general", "title": "Providing spell checking and suggestions for text input" }, { "id": "G184", "technology": "general", "title": "Providing text instructions at the beginning of a form or set of fields that describes the necessary input" } ] }, { "title": "Situation B: If a form requires text input in an expected data format:", "techniques": [ { "id": "G89", "technology": "general", "title": "Providing expected data format and example" }, { "id": "G184", "technology": "general", "title": "Providing text instructions at the beginning of a form or set of fields that describes the necessary input" } ] } ], "advisory": [ { "id": "H89", "technology": "html", "title": "Using the title attribute to provide context-sensitive help" } ] } }, { "id": "error-prevention-all", "num": "3.3.6", "alt_id": [ "minimize-error-reversible-all" ], "content": "For web pages that require the user to submit information, at least one of the following is true:\n
\n \nInformation previously entered by or provided to the user that is required to be entered again in the same process is either:
\n\nExcept when:
\nA cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:
\n\"Object recognition\" and \"Personal content\" may be represented by images, video, or audio.
A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:
\nContent must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
", "handle": "Robust", "title": "Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.", "versions": [ "2.0", "2.1", "2.2" ], "guidelines": [ { "id": "compatible", "num": "4.1", "alt_id": [ "ensure-compat" ], "content": "Maximize compatibility with current and future user agents, including assistive technologies.
", "handle": "Compatible", "title": "Maximize compatibility with current and future user agents, including assistive technologies.", "versions": [ "2.0", "2.1", "2.2" ], "successcriteria": [ { "id": "parsing", "num": "4.1.1", "alt_id": [ "ensure-compat-parses" ], "content": "This criterion was originally adopted to address problems that assistive technology had directly parsing HTML. Assistive technology no longer has any need to directly parse HTML. Consequently, these problems either no longer exist or are addressed by other criteria. This criterion no longer has utility and is removed.
For all user interface components (including but not limited to: form elements, links and components generated by scripts),\n the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.\n
\n \nThis success criterion is primarily for web authors who develop or script their own\n user interface components. For example, standard HTML controls already meet this success\n criterion when used according to specification.\n
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
", "handle": "Status Messages", "title": "In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.", "versions": [ "2.1", "2.2" ], "level": "AA", "details": [], "techniques": { "sufficient": [ { "title": "Situation A: If a status message advises on the success or results of an action, or the state of an application:", "techniques": [ { "id": "ARIA22", "technology": "aria", "title": "Using role=status to present status messages", "suffix": "in combination with any of the following techniques:", "using": [ { "id": "G199", "technology": "general", "title": "Providing success feedback when data is submitted successfully" } ] } ] }, { "title": "Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:", "techniques": [ { "id": "ARIA19", "technology": "aria", "title": "Using ARIA role=alert or Live Regions to Identify Errors", "suffix": "in combination with any of the following techniques:", "using": [ { "id": "G83", "technology": "general", "title": "Providing text descriptions to identify required fields that were not completed" }, { "id": "G84", "technology": "general", "title": "Providing a text description when the user provides information that is not in the list of allowed values" }, { "id": "G85", "technology": "general", "title": "Providing a text description when user input falls outside the required format or values" }, { "id": "G177", "technology": "general", "title": "Providing suggested correction text" }, { "id": "G194", "technology": "general", "title": "Providing spell checking and suggestions for text input" } ] } ], "note": "Not all examples in the preceding general techniques use status messages to convey warnings or errors to users. A role of \"alert\" is only necessary where a change of context does not take place." }, { "title": "Situation C: If a status message conveys information on the progress of a process:", "techniques": [ { "id": "ARIA23", "technology": "aria", "title": "Using role=log to identify sequential information updates" }, { "title": "Usingrole=\"progressbar\" (future link)"
},
{
"and": [
{
"id": "ARIA22",
"technology": "aria",
"title": "Using role=status to present status messages"
},
{
"id": "G193",
"technology": "general",
"title": "Providing help by an assistant in the web page"
}
]
}
]
}
],
"advisory": [
{
"title": "Using aria-live regions with chat clients (future link)"
},
{
"title": "Using aria-live regions to support 1.4.13 Content on Hover or Focus (future link)"
},
{
"title": "Using role=\"marquee\" (future link)"
},
{
"title": "Using role=\"timer\" (future link)"
},
{
"id": "ARIA18",
"technology": "aria",
"title": "Using aria-alertdialog to Identify Errors",
"prefix": "Where appropriate, moving focus to new content with"
},
{
"id": "SCR14",
"technology": "client-side-script",
"title": "Using scripts to make nonessential alerts optional",
"prefix": "Supporting personalization with"
}
],
"failure": [
{
"id": "F103",
"technology": "failures",
"title": "Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties"
},
{
"title": "Using role=\"alert\" or aria-live=\"assertive\" on content which is not important and time-sensitive (future link)"
}
]
}
}
]
}
]
}
],
"terms": [
{
"id": "dfn-abbreviations",
"definition": "shortened form of a word, phrase, or name where the abbreviation has not become part\n of the language\n
\n \nThis includes initialisms and acronyms where:
initialisms are shortened forms of a name or phrase made from the initial letters of words or\n syllables contained in that name or phrase\n
\n \nNot defined in all languages.
acronyms are abbreviated forms made from the initial letters or parts of other words (in a\n name or phrase) which may be pronounced as a word\n
\n \n \n \nSome companies have adopted what used to be an initialism as their company name. In\n these cases, the new name of the company is the letters (for example, Ecma) and the\n word is no longer considered an abbreviation.\n
supported by users' assistive technologies as well as the accessibility features in browsers and other user agents
\n \nTo qualify as an accessibility-supported use of a web content technology (or feature\n of a technology), both 1 and 2 must be satisfied for a web content technology (or\n feature):\n
\n \nThe way that the web content technology is used must be supported by users' assistive technology (AT). This means that the way that the technology is used has been tested for interoperability\n with users' assistive technology in the human language(s) of the content,\n
\n \nAND
\n \nThe web content technology must have accessibility-supported user agents that are\n available to users. This means that at least one of the following four statements is true:\n
\n \nThe technology is supported natively in widely-distributed user agents that are also\n accessibility supported (such as HTML and CSS);\n
\n \nOR
\nThe technology is supported in a widely-distributed plug-in that is also accessibility\n supported;\n
\n \nOR
\nThe content is available in a closed environment, such as a university or corporate\n network, where the user agent required by the technology and used by the organization\n is also accessibility supported;\n
\n \nOR
\nThe user agent(s) that support the technology are accessibility supported and are\n available for download or purchase in a way that:\n
\n \nThe Accessibility Guidelines Working Group and the W3C do not specify which or how much support by assistive\n technologies there must be for a particular use of a web technology in order for it\n to be classified as accessibility supported. (See Level of Assistive Technology Support Needed for \"Accessibility Support\".)\n
Web technologies can be used in ways that are not accessibility supported as long\n as they are not relied upon and the page as a whole meets the conformance requirements, including Conformance Requirement 4 and Conformance Requirement 5.\n
When a web technology is used in a way that is \"accessibility supported,\" it does not imply that the entire\n technology or all uses of the technology are supported. Most technologies, including\n HTML, lack support for at least one feature or use. Pages conform to WCAG only if\n the uses of the technology that are accessibility supported can be relied upon to\n meet WCAG requirements.\n
When citing web content technologies that have multiple versions, the version(s) supported\n should be specified.\n
One way for authors to locate uses of a technology that are accessibility supported\n would be to consult compilations of uses that are documented to be accessibility supported.\n (See Understanding Accessibility-Supported Web Technology Uses.) Authors, companies, technology vendors, or others may document accessibility-supported\n ways of using web content technologies. However, all ways of using technologies in\n the documentation would need to meet the definition of accessibility-supported Web\n content technologies above.\n
document including correctly sequenced text descriptions of time-based visual and\n auditory information and providing a means for achieving the outcomes of any time-based\n interaction\n
\n \nA screenplay used to create the synchronized media content would meet this definition\n only if it was corrected to accurately represent the final synchronized media after\n editing.\n
the purpose cannot be determined from the link and all information of the web page\n presented to the user simultaneously with the link (i.e., readers without disabilities\n would not know what a link would do until they activated it)\n
\n \n ", "name": "ambiguous to users in general" }, { "id": "dfn-ascii-art", "definition": "picture created by a spatial arrangement of characters or glyphs (typically from the\n 95 printable characters defined by ASCII)\n
", "name": "ASCII art" }, { "id": "dfn-assistive-technologies", "definition": "hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements\n of users with disabilities that go beyond those offered by mainstream user agents\n
\n \nFunctionality provided by assistive technology includes alternative presentations\n (e.g., as synthesized speech or magnified content), alternative input methods (e.g.,\n voice), additional navigation or orientation mechanisms, and content transformations\n (e.g., to make tables more accessible).\n
Assistive technologies often communicate data and messages with mainstream user agents\n by using and monitoring APIs.\n
The distinction between mainstream user agents and assistive technologies is not absolute.\n Many mainstream user agents provide some features to assist individuals with disabilities.\n The basic difference is that mainstream user agents target broad and diverse audiences\n that usually include people with and without disabilities. Assistive technologies\n target narrowly defined populations of users with specific disabilities. The assistance\n provided by an assistive technology is more specific and appropriate to the needs\n of its target users. The mainstream user agent may provide important functionality\n to assistive technologies like retrieving web content from program objects or parsing\n markup into identifiable bundles.\n
the technology of sound reproduction
\n \nAudio can be created synthetically (including speech synthesis), recorded from real\n world sounds, or both.\n
narration added to the soundtrack to describe important visual details that cannot\n be understood from the main soundtrack alone\n
\n \nAudio description of video provides information about actions, characters, scene changes, on-screen text, and\n other visual content.\n
In standard audio description, narration is added during existing pauses in dialogue.\n (See also extended audio description.)\n
Where all of the video information is already provided in existing audio, no additional audio description is necessary.\n
Also called \"video description\" and \"descriptive narration.\"
a time-based presentation that contains only audio (no video and no interaction)\n
", "name": "audio-only" }, { "id": "dfn-blinking", "definition": "switch back and forth between two visual states in a way that is meant to draw attention
\n \nSee also flash. It is possible for something to be large enough and blink brightly enough at the\n right frequency to be also classified as a flash.\n
more than one sentence of text
", "name": "blocks of text" }, { "id": "dfn-captcha", "definition": "initialism for \"Completely Automated Public Turing test to tell Computers and Humans\n Apart\"\n
\n \nCAPTCHA tests often involve asking the user to type in text that is displayed in an\n obscured image or audio file.\n
A Turing test is any system of tests designed to differentiate a human from a computer.\n It is named after famed computer scientist Alan Turing. The term was coined by researchers\n at Carnegie Mellon University.\n
synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content\n
\n \nCaptions are similar to dialogue-only subtitles except captions convey not only the\n content of spoken dialogue, but also equivalents for non-dialogue audio information\n needed to understand the program content, including sound effects, music, laughter,\n speaker identification and location.\n
Closed Captions are equivalents that can be turned on and off with some players.
Open Captions are any captions that cannot be turned off. For example, if the captions\n are visual equivalent images of text embedded in video.\n
Captions should not obscure or obstruct relevant information in the video.
In some countries, captions are called subtitles.
Audio descriptions can be, but do not need to be, captioned since they are descriptions of information\n that is already presented visually.\n
major changes that, if made without user awareness, can disorient users who are not able to view\n the entire page simultaneously\n
\n \nChanges in context include changes of:
\n \nA change of content is not always a change of context. Changes in content, such as\n an expanding outline, dynamic menu, or a tab control do not necessarily change the\n context, unless they also change one of the above (e.g., focus).\n
A task that requires the user to remember, manipulate, or transcribe information. Examples include, but are not limited to:
\nsatisfying all the requirements of a given standard, guideline or specification
", "name": "conformance" }, { "id": "dfn-conforming-alternate-versions", "definition": "version that
\n \nfor which at least one of the following is true:
\n \nIn this definition, \"can only be reached\" means that there is some mechanism, such\n as a conditional redirect, that prevents a user from \"reaching\" (loading) the non-conforming\n page unless the user had just come from the conforming version.\n
The alternate version does not need to be matched page for page with the original\n (e.g., the conforming alternate version may consist of multiple pages).\n
If multiple language versions are available, then conforming alternate versions are\n required for each language offered.\n
Alternate versions may be provided to accommodate different technology environments\n or user groups. Each version should be as conformant as possible. One version would\n need to be fully conformant in order to meet conformance requirement 1.\n
The conforming alternative version does not need to reside within the scope of conformance,\n or even on the same website, as long as it is as freely available as the non-conforming\n version.\n
Alternate versions should not be confused with supplementary content, which support the original page and enhance comprehension.\n
Setting user preferences within the content to produce a conforming version is an\n acceptable mechanism for reaching another version as long as the method used to set\n the preferences is accessibility supported.\n
See Understanding Conforming Alternate Versions
", "name": "conforming alternate version" }, { "id": "dfn-content", "definition": "information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions\n
", "name": "content" }, { "id": "dfn-context-sensitive-help", "definition": "help text that provides information related to the function currently being performed
\n \nClear labels can act as context-sensitive help.
(L1 + 0.05) / (L2 + 0.05), where
\n \nContrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
Because authors do not have control over user settings as to how text is rendered\n (for example font smoothing or anti-aliasing), the contrast ratio for text can be\n evaluated with anti-aliasing turned off.\n
For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect\n to the specified background over which the text is rendered in normal usage. If no\n background color is specified, then white is assumed.\n
Background color is the specified color of content over which the text is to be rendered\n in normal usage. It is a failure if no background color is specified when the text\n color is specified, because the user's default background color is unknown and cannot\n be evaluated for sufficient contrast. For the same reason, it is a failure if no text\n color is specified when a background color is specified.\n
When there is a border around the letter, the border can add contrast and would be\n used in calculating the contrast between the letter and its background. A narrow border\n around the letter would be used as the letter. A wide border around the letter that\n fills in the inner details of the letters acts as a halo and would be considered background.\n
WCAG conformance should be evaluated for color pairs specified in the content that\n an author would expect to appear adjacent in typical presentation. Authors need not\n consider unusual presentations, such as color changes made by the user agent, except\n where caused by authors' code.\n
any sequence where words and paragraphs are presented in an order that does not change\n the meaning of the content\n
", "name": "correct reading sequence" }, { "id": "dfn-css-pixels", "definition": "visual angle of about 0.0213 degrees
\n \t\t\t\t\t\nA CSS pixel is the canonical unit of measure for all lengths and measurements in CSS.\n This unit is density-independent, and distinct from actual hardware pixels present\n in a display. User agents and operating systems should ensure that a CSS pixel is\n set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [css3-values], which takes into account the physical dimensions of the display\n and the assumed viewing distance (factors that cannot be determined by content authors).\n
", "name": "CSS pixel" }, { "id": "dfn-down-event", "definition": "platform event that occurs when the trigger stimulus of a pointer is depressed
\n\tThe down-event may have different names on different platforms, such as \"touchstart\" or \"mousedown\".
", "name": "down-event" }, { "id": "dfn-dragging-movements", "definition": "an operation where the pointer engages with an element on the down-event and the element (or a representation of its position) follows the pointer until an up-event
\n \nExamples of draggable elements include list items, text elements, and images.
a sudden, unexpected situation or occurrence that requires immediate action to preserve\n health, safety, or property\n
", "name": "emergency" }, { "id": "dfn-essential", "definition": "if removed, would fundamentally change the information or functionality of the content,\n and information and functionality cannot be achieved in another way that would conform\n
", "name": "essential" }, { "id": "dfn-extended-audio-description", "definition": "audio description that is added to an audiovisual presentation by pausing the video so that there is time to add additional description\n
\n \nThis technique is only used when the sense of the video would be lost without the additional audio description and the pauses between dialogue/narration are too short.\n
a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency\n range\n
\n \nSee general flash and red flash thresholds for information about types of flash that are not allowed.\n
See also blinking.\n
pixels that are changed to visually indicate when a user interface component is in a focused state\n\n
", "name": "focus indicator" }, { "id": "dfn-functionality", "definition": "processes and outcomes achievable through user action\n
", "name": "functionality" }, { "id": "dfn-general-flash-and-red-flash-thresholds", "definition": "a flash or rapidly changing image sequence is below the threshold (i.e., content passes) if any of the following are true:\n
\n \nwhere:
\n \nException: Flashing that is a fine, balanced, pattern such as white noise or an alternating\n checkerboard pattern with \"squares\" smaller than 0.1 degree (of visual field at typical\n viewing distance) on a side does not violate the thresholds.\n
\n \nFor general software or web content, using a 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 x 768 pixels will provide a good estimate of a 10 degree visual field for standard screen sizes and viewing distances (e.g., 15-17 inch screen at 22-26 inches). This resolution of 75 - 85 ppi is known to be lower, and thus more conservative than the nominal CSS pixel resolution of 96 ppi in CSS specifications. Higher resolutions displays showing the same rendering of the content yield smaller and safer images so it is lower resolutions that are used to define the thresholds.\n
A transition is the change in relative luminance (or relative luminance/color for\n red flashing) between adjacent peaks and valleys in a plot of relative luminance (or\n relative luminance/color for red flashing) measurement against time. A flash consists\n of two opposing transitions.\n
The new working definition in the field for \"pair of opposing transitions involving a saturated red\" (from WCAG 2.2) is a pair of opposing transitions where, one transition is either to or from a state with a value R/(R + G + B) that is greater than or equal to 0.8, and the difference between states is more than 0.2 (unitless) in the CIE 1976 UCS chromaticity diagram. [ISO_9241-391]
Tools are available that will carry out analysis from video screen capture. However,\n no tool is necessary to evaluate for this condition if flashing is less than or equal\n to 3 flashes in any one second. Content automatically passes (see #1 and #2 above).\n
language that is spoken, written or signed (through visual or tactile means) to communicate\n with humans\n
\n \nSee also sign language.\n
phrase whose meaning cannot be deduced from the meaning of the individual words and\n the specific words cannot be changed without losing the meaning\n
\n \nIdioms cannot be translated directly, word for word, without losing their (cultural\n or language-dependent) meaning.\n
text that has been rendered in a non-text form (e.g., an image) in order to achieve\n a particular visual effect\n
\n \nThis does not include text that is part of a picture that contains significant other visual content.\n
for information purposes and not required for conformance
\n \nContent required for conformance is referred to as \"normative.\"
information provided by the user that is not accepted
\n \nThis includes:
\n \nwords used in a particular way by people in a particular field
\n \n ", "name": "jargon" }, { "id": "dfn-keyboard-interface", "definition": "interface used by software to obtain keystroke input
\n \nA keyboard interface allows users to provide keystroke input to programs even if the\n native technology does not contain a keyboard.
\n\n \nOperation of the application (or parts of the application) through a keyboard-operated\n mouse emulator, such as MouseKeys, does not qualify as operation through a keyboard\n interface because operation of the program is through its pointing device interface,\n not through its keyboard interface.\n
alternative means of triggering an action by the pressing of one or more keys
", "name": "keyboard shortcut" }, { "id": "dfn-labels", "definition": "text or other component with a text alternative that is presented to a user to identify a component within web content
\n \nA label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases\n the name and the label are the same.\n
The term label is not limited to the label element in HTML.
with at least 18 point or 14 point bold or font size that would yield equivalent size\n for Chinese, Japanese and Korean (CJK) fonts\n
\n \nFonts with extraordinarily thin strokes or unusual features and characteristics that\n reduce the familiarity of their letter forms are harder to read, especially at lower\n contrast levels.\n
Font size is the size when the content is delivered. It does not include resizing\n that may be done by a user.\n
The actual size of the character that a user sees is dependent both on the author-defined\n size and the user's display or user agent settings. For many mainstream body text\n fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150%\n of the default size for body text (assuming that the body font is 100%), but authors\n would need to check this for the particular fonts in use. When fonts are defined in\n relative units, the actual point size is calculated by the user agent for display.\n The point size should be obtained from the user agent, or calculated based on font\n metrics as the user agent does, when evaluating this success criterion. Users who\n have low vision would be responsible for choosing appropriate settings.\n
When using text without specifying the font size, the smallest font size used on major\n browsers for unspecified text would be a reasonable size to assume for the font. If\n a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would\n be reasonable to assume it is large text. Relative scaling can be calculated from\n the default sizes in a similar fashion.\n
The 18 and 14 point sizes for roman texts are taken from the minimum size for large\n print (14pt) and the larger standard font size (18pt). For other fonts such as CJK\n languages, the \"equivalent\" sizes would be the minimum large print size used for those\n languages and the next larger standard large print size.\n
transactions where the person incurs a legally binding obligation or benefit
\n \n ", "name": "legal commitments" }, { "id": "dfn-purpose-of-each-link", "definition": "nature of the result obtained by activating a hyperlink
", "name": "link purpose" }, { "id": "dfn-live", "definition": "information captured from a real-world event and transmitted to the receiver with\n no more than a broadcast delay\n
\n \nA broadcast delay is a short (usually automated) delay, for example used in order\n to give the broadcaster time to cue or censor the audio (or video) feed, but not sufficient\n to allow significant editing.\n
If information is completely computer generated, it is not live.
the two or three year period of education that begins after completion of six years\n of school and ends nine years after the beginning of primary education
\n \nThis definition is based on the International Standard Classification of Education\n [UNESCO].\n
process or technique for achieving a result\n
\n \nThe mechanism may be explicitly provided in the content, or may be relied upon to be provided by either the platform or by user agents, including assistive technologies.\n
The mechanism needs to meet all success criteria for the conformance level claimed.
media that presents no more information than is already presented in text (directly\n or via text alternatives)\n
\n \nA media alternative for text is provided for those who benefit from alternate representations\n of text. Media alternatives for text may be audio-only, video-only (including sign-language\n video), or audio-video.\n
addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition
\n\t", "name": "motion animation" }, { "id": "dfn-bounding-boxes", "definition": "the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.
", "name": "minimum bounding box" }, { "id": "dfn-name", "definition": "text by which software can identify a component within web content to the user
\n \nThe name may be hidden and only exposed by assistive technology, whereas a label is presented to all users. In many (but not all) cases, the label and the name are\n the same.\n
This is unrelated to the name attribute in HTML.
navigated in the order defined for advancing focus (from one element to the next)\n using a keyboard interface
", "name": "navigated sequentially" }, { "id": "dfn-non-text-content", "definition": "any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language
\n \nThis includes ASCII art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution),\n and images representing text\n
required for conformance
\n \nOne may conform in a variety of well-defined ways to this document.
Content identified as \"informative\" or \"non-normative\" is never required for conformance.
on the most common sized desktop/laptop display with the viewport maximized
\n \nSince people generally keep their computers for several years, it is best not to rely\n on the latest desktop/laptop display resolutions but to consider the common desktop/laptop\n display resolutions over the course of several years when making this evaluation.\n
stopped by user request and not resumed until requested by user
", "name": "paused" }, { "id": "dfn-perimeter", "definition": "continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.
\n ", "name": "perimeter" }, { "id": "dfn-pointer-inputs", "definition": "input from a device that can target a specific coordinate (or set of coordinates) on a screen,\n such as a mouse, pen, or touch contact\n
\nSee the Pointer Events\n definition for \"pointer\" [pointerevents].
information that is not live
", "name": "prerecorded" }, { "id": "dfn-presentation", "definition": "rendering of the content in a form to be perceived by users\n
", "name": "presentation" }, { "id": "dfn-primary-education", "definition": "six year time period that begins between the ages of five and seven, possibly without\n any previous education\n
\n \nThis definition is based on the International Standard Classification of Education\n [UNESCO].\n
series of user actions where each action is required in order to complete an activity
\n \n \n \n ", "name": "process" }, { "id": "dfn-programmatically-determinable", "definition": "determined by software from author-supplied data provided in a way that different\n user agents, including assistive technologies, can extract and present this information to users in different modalities\n
\n \n \n \n ", "name": "programmatically determined" }, { "id": "dfn-programmatically-determined-link-context", "definition": "additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities\n
\n \n \n \nSince screen readers interpret punctuation, they can also provide the context from\n the current sentence, when the focus is on a link in that sentence.\n
set by software using methods that are supported by user agents, including assistive technologies\n
", "name": "programmatically set" }, { "id": "dfn-pure-decoration", "definition": "serving only an aesthetic purpose, providing no information, and having no functionality
\n \nText is only purely decorative if the words can be rearranged or substituted without\n changing their purpose.\n
event that a) occurs at the same time as the viewing and b) is not completely generated\n by the content\n
\n \n \n \n \n \n ", "name": "real-time event" }, { "id": "dfn-regions", "definition": "perceivable, programmatically determined section of content
\nIn HTML, any area designated with a landmark role would be a region.
meaningful associations between distinct pieces of content
", "name": "relationships" }, { "id": "dfn-relative-luminance", "definition": "the relative brightness of any point in a colorspace, normalized to 0 for darkest\n black and 1 for lightest white\n
\n \nFor the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126\n * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:\n
\n \nand RsRGB, GsRGB, and BsRGB are defined as:
\n \nThe \"^\" character is the exponentiation operator. (Formula taken from \n [SRGB].)\n
\n\nBefore May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.
Almost all systems used today to view web content assume sRGB encoding. Unless it\n is known that another color space will be used to process and display the content,\n authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.\n
If dithering occurs after delivery, then the source color value is used. For colors\n that are dithered at the source, the average values of the colors that are dithered\n should be used (average R, average G, and average B).\n
Tools are available that automatically do the calculations when testing contrast and\n flash.\n
A separate page giving the relative luminance definition using MathML to display the formulas is available.\n
the content would not conform if that technology is turned off or is not supported\n
", "name": "relied upon" }, { "id": "dfn-role", "definition": "text or number by which software can identify the function of a component within Web\n content\n
\n \n ", "name": "role" }, { "id": "dfn-same-functionality", "definition": "same result when used
\n \n ", "name": "same functionality" }, { "id": "dfn-same-relative-order", "definition": "same position relative to other items
\n \nItems are considered to be in the same relative order even if other items are inserted\n or removed from the original order. For example, expanding navigation menus may insert\n an additional level of detail or a secondary navigation section may be inserted into\n the reading order.\n
the success criterion does not evaluate to 'false' when applied to the page
", "name": "satisfies a success criterion" }, { "id": "dfn-section", "definition": "a self-contained portion of written content that deals with one or more related topics\n or thoughts\n
\n \nA section may consist of one or more paragraphs and include graphics, tables, lists\n and sub-sections.\n
collection of web pages that share a common purpose and that are created by the same author, group or organization\n
\n \n \n\nDifferent language versions would be considered different sets of web pages.
a language using combinations of movements of the hands and arms, facial expressions,\n or body positions to convey meaning\n
", "name": "sign language" }, { "id": "dfn-sign-language-interpretation", "definition": "translation of one language, generally a spoken language, into a sign language
\n \nTrue sign languages are independent languages that are unrelated to the spoken language(s)\n of the same country or region.\n
an input modality that only targets a single point on the page/screen at a time – such as a mouse, single finger on a touch screen, or stylus.
\nSingle pointer interactions include clicks, double clicks, taps, dragging motions, and single-finger swipe gestures. In contrast, multipoint interactions involve the use of two or more pointers at the same time, such as two-finger interactions on a touchscreen, or the simultaneous use of a mouse and stylus.
a sensory experience that is not purely decorative and does not primarily convey important\n information or perform a function\n
\n \n ", "name": "specific sensory experience" }, { "id": "dfn-states", "definition": "dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes
\n\tStates do not affect the nature of the component, but represent data associated with the component or user interaction possibilities. Examples include focus, hover, select, press, check, visited/unvisited, and expand/collapse.
", "name": "state" }, { "id": "dfn-status-messages", "definition": "change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors
", "name": "status message" }, { "id": "dfn-structure", "definition": "property whose value determines the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of\n content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents
\n \tStyle properties can have several origins:
\nadditional content that illustrates or clarifies the primary content\n
\n \n \n \n \n \n ", "name": "supplemental content" }, { "id": "dfn-synchronized-media", "definition": "audio or video synchronized with another format for presenting information and/or with time-based\n interactive components, unless the media is a media alternative for text that is clearly labeled as such\n
", "name": "synchronized media" }, { "id": "dfn-targets", "definition": "region of the display that will accept a pointer action, such as the interactive area of a user interface component
\nIf two or more targets are overlapping, the overlapping area should not be included in the measurement of the target size, except when the overlapping targets perform the same action or open the same page.
mechanism for encoding instructions to be rendered, played or executed by user agents
\n \nAs used in these guidelines \"web technology\" and the word \"technology\" (when used\n alone) both refer to web content technologies.\n
Web content technologies may include markup languages, data formats, or programming\n languages that authors may use alone or in combination to create end-user experiences\n that range from static web pages to synchronized media presentations to dynamic Web\n applications.\n
sequence of characters that can be programmatically determined, where the sequence is expressing something in human language
", "name": "text" }, { "id": "dfn-text-alternative", "definition": "Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content.\n Programmatically associated text is text whose location can be programmatically determined\n from the non-text content.\n
\n \n \n \nRefer to Understanding Text Alternatives for more information.\n
platform event that occurs when the trigger stimulus of a pointer is released
\n\tThe up-event may have different names on different platforms, such as \"touchend\" or \"mouseup\".
", "name": "up-event" }, { "id": "dfn-used-in-an-unusual-or-restricted-way", "definition": "words used in such a way that requires users to know exactly which definition to apply\n in order to understand the content correctly\n
\n\n ", "name": "used in an unusual or restricted way" }, { "id": "dfn-user-agents", "definition": "any software that retrieves and presents web content for users
\n \n ", "name": "user agent" }, { "id": "dfn-user-controllable", "definition": "data that is intended to be accessed by users
\n \nThis does not refer to such things as Internet logs and search engine monitoring data.
a part of the content that is perceived by users as a single control for a distinct\n function\n
\n \nMultiple user interface components may be implemented as a single programmatic element.\n \"Components\" here is not tied to programming techniques, but rather to what the user\n perceives as separate controls.\n
User interface components include form elements and links as well as components generated\n by scripts.\n
What is meant by \"component\" or \"user interface component\" here is also sometimes\n called \"user interface element\".\n
any continuous period of time where no user actions occur
\n\tThe method of tracking will be determined by the website or application.
", "name": "user inactivity" }, { "id": "dfn-video", "definition": "the technology of moving or sequenced pictures or images
\n \nVideo can be made up of animated or photographic images, or both.
a time-based presentation that contains only video (no audio and no interaction)\n
", "name": "video-only" }, { "id": "dfn-viewport", "definition": "object in which the user agent presents content
\n \nThe user agent presents content through one or more viewports. Viewports include windows, frames,\n loudspeakers, and virtual magnifying glasses. A viewport may contain another viewport\n (e.g., nested frames). Interface components created by the user agent such as prompts,\n menus, and alerts are not viewports.\n
This definition is based on User Agent Accessibility Guidelines 1.0 Glossary [UAAG10].\n
the font, size, color, and background can be set
", "name": "visually customized" }, { "id": "dfn-web-page-s", "definition": "a non-embedded resource obtained from a single URI using HTTP plus any other resources\n that are used in the rendering or intended to be rendered together with it by a user agent
\n \nAlthough any \"other resources\" would be rendered together with the primary resource,\n they would not necessarily be rendered simultaneously with each other.\n
For the purposes of conformance with these guidelines, a resource must be \"non-embedded\"\n within the scope of conformance to be considered a web page.\n