\n
\n \n ...\n
\n \n ...\n
\n ![\"\"](\"icon.gif\")
Products page\nProducts page\n",
"note": {
"en": "Good: Combining adjacent image and text links for the same resource (H2)."
}
},
{
"lang": "css",
"bad": "ul#booklist li {\n padding-left: 20px;\n }\n \n ul#booklist li.new {\n background: transparent url(new.png) no-repeat top left; \n }\n \n ul#booklist li.limited {\n background: transparent url(limited.png) no-repeat top left; \n }\n \n ul#booklist li.instock {\n background: transparent url(instock.png) no-repeat top left; \n }\n \n ul#booklist li.outstock {\n background: transparent url(outstock.png) no-repeat top left; \n }\n\n \n It is used in this excerpt:
\n \n\n - Some book
\n - Some other book
\n - A book we desperately want to get rid of
\n ...\n - A book you actually want
\n
",
"note": {
"en": "Bad: Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images (F3)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html"
},
{
"id": "wcag-audio-only-and-video-only-prerecorded",
"criterionId": "1.2.1",
"wcag": ["1.2.1"],
"title": {
"en": "Audio-only and Video-only (Prerecorded)",
"fr": "Contenus seulement audio et seulement vidéo (pré-enregistrés)"
},
"summary": {
"en": "Provide an alternative when content is perceivable with only one sense. Audio and video-only content can be understood by more people. People who can’t fully see or hear content can understand it."
},
"examples": [
{
"lang": "html",
"good": "\n ![\"Mars](\"../images/spaceship.jpg\")
\n\nAudio description of \"Mars Landing\"
",
"note": {
"en": "Good: Providing audio that describes the important video content and describing it as such (G166)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html"
},
{
"id": "wcag-captions-prerecorded",
"criterionId": "1.2.2",
"wcag": ["1.2.2"],
"title": {
"en": "Captions (Prerecorded)",
"fr": "Sous-titres (pré-enregistrés)"
},
"summary": {
"en": "Provide synchronized text for audio content in existing videos. Videos can be played with captions. People who are deaf or hard of hearing can understand audio in videos."
},
"examples": [
{
"lang": "html",
"good": "",
"note": {
"en": "Good: Using the track element to provide captions (H95)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html"
},
{
"id": "wcag-audio-description-or-media-alternative-prerecorded",
"criterionId": "1.2.3",
"wcag": ["1.2.3"],
"title": {
"en": "Audio Description or Media Alternative (Prerecorded)",
"fr": "Audio-description ou version de remplacement pour un média temporel (pré-enregistré)"
},
"summary": {
"en": "Provide a description of the visual content in videos. Prerecorded videos can be understood by more people. People who are blind or who cannot understand the visual content can have it described."
},
"examples": [
{
"lang": "html",
"good": "",
"note": {
"en": "Good: Using the body of the object element (H53)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html"
},
{
"id": "wcag-captions-live",
"criterionId": "1.2.4",
"wcag": ["1.2.4"],
"title": {
"en": "Captions (Live)",
"fr": "Sous-titres (en direct)"
},
"summary": {
"en": "Provide synchronized text for audio content in real-time videos. Live videos have captions. People who are deaf or hard of hearing can understand audio in real-time video content."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html"
},
{
"id": "wcag-audio-description-prerecorded",
"criterionId": "1.2.5",
"wcag": ["1.2.5"],
"title": {
"en": "Audio Description (Prerecorded)",
"fr": "Audio-description (pré-enregistrée)"
},
"summary": {
"en": "Provide a synchronized spoken description of the visual content in videos. Videos can be played with audio descriptions. People who cannot see or understand the visual content can hear about it while playing videos."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html"
},
{
"id": "wcag-info-and-relationships",
"criterionId": "1.3.1",
"wcag": ["1.3.1"],
"title": {
"en": "Info and Relationships",
"fr": "Information et relations"
},
"summary": {
"en": "Use code to reinforce relationships and information conveyed through presentation. Information about content structure is available to more people. People can adapt the presentation to suit their needs while preserving the original meaning."
},
"examples": [
{
"lang": "html",
"bad": "",
"good": "... What she really meant to say was, "This is not OK, \n it is excellent"! ...",
"note": {
"en": "Good: Using semantic markup to mark emphasized or special text (H49). Bad: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text (F2)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html"
},
{
"id": "wcag-meaningful-sequence",
"criterionId": "1.3.2",
"wcag": ["1.3.2"],
"title": {
"en": "Meaningful Sequence",
"fr": "Ordre séquentiel logique"
},
"summary": {
"en": "Use code to preserve meaningful content order. The order of content can be understood by more people. Assistive technology can present content to users in the proper order."
},
"examples": [
{
"lang": "html",
"bad": "W e l c o m e
can also be used to add white space, producing similar failures:
\n\nH E L L O
",
"good": "The title says \"פעילות הבינאום, W3C\" in Hebrew.
",
"note": {
"en": "Good: Using the dir attribute on an inline element to resolve problems with nested directional runs (H56). Bad: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word (F32)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html"
},
{
"id": "wcag-sensory-characteristics",
"criterionId": "1.3.3",
"wcag": ["1.3.3"],
"title": {
"en": "Sensory Characteristics",
"fr": "Caractéristiques sensorielles"
},
"summary": {
"en": "Describe controls by name, not just by appearance or location. Instructions are understandable by more people. People who are blind or have low vision need non-visual instructions."
},
"examples": [
{
"lang": "html",
"good": "",
"note": {
"en": "Good: Providing textual identification of items that otherwise rely only on sensory information to be understood (G96)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html"
},
{
"id": "wcag-orientation",
"criterionId": "1.3.4",
"wcag": ["1.3.4"],
"title": {
"en": "Orientation",
"fr": "Orientation"
},
"summary": {
"en": "Don't lock content to either portrait or landscape presentation. Devices can be used in any orientation. Wheelchair users and others may have devices mounted in a fixed orientation."
},
"examples": [
{
"lang": "html",
"bad": "",
"note": {
"en": "Bad: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device (F100)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/orientation.html"
},
{
"id": "wcag-identify-input-purpose",
"criterionId": "1.3.5",
"wcag": ["1.3.5"],
"title": {
"en": "Identify Input Purpose",
"fr": "Identifier la finalité de la saisie"
},
"summary": {
"en": "Use code to indicate the purpose of common inputs, where technology allows. It is easier to fill out forms. Some people with cognitive disabilities may not understand the input's purpose from the label alone."
},
"examples": [
{
"lang": "html",
"good": "",
"note": {
"en": "Good: Using HTML autocomplete attributes (H98)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html"
},
{
"id": "wcag-use-of-color",
"criterionId": "1.4.1",
"wcag": ["1.4.1"],
"title": {
"en": "Use of Color",
"fr": "Utilisation de la couleur"
},
"summary": {
"en": "Use information in addition to color, such as shape or text, to convey meaning. Color is not the only way of distinguishing information. Not everyone sees colors or sees them the same way."
},
"examples": [
{
"lang": "html",
"bad": "\n \n\n\n There are many resources to find out more about the \n rain in Spain.\n
\n",
"good": "\n\n",
"note": {
"en": "Good: Including a text cue for colored form control labels (G205). Bad: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision (F73)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"
},
{
"id": "wcag-audio-control",
"criterionId": "1.4.2",
"wcag": ["1.4.2"],
"title": {
"en": "Audio Control",
"fr": "Contrôle du son"
},
"summary": {
"en": "If you play audio content automatically, let people turn it down or off. A page that plays music or sounds doesn't disrupt people. Sound distracts some people, and also interferes with screen readers."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html"
},
{
"id": "wcag-contrast-minimum",
"criterionId": "1.4.3",
"wcag": ["1.4.3"],
"title": {
"en": "Contrast (Minimum)",
"fr": "Contraste (minimum)"
},
"summary": {
"en": "Provide sufficient contrast between text and its background. Text can be seen by more people. Some people cannot read faint text."
},
"examples": [
{
"lang": "html",
"bad": "\n \n \n Setting the canvas background \n \n \n \n My background is white.
\n \n",
"note": {
"en": "Bad: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa (F24)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"
},
{
"id": "wcag-resize-text",
"criterionId": "1.4.4",
"wcag": ["1.4.4"],
"title": {
"en": "Resize Text",
"fr": "Redimensionnement du texte"
},
"summary": {
"en": "Ensure text can be doubled in size. Text can be enlarged. Some people can only read text when it is bigger."
},
"examples": [
{
"lang": "css",
"good": "#nav_menu { width: 20em; height: 100em; }\n#nav_list { font-size: 100%; }",
"note": {
"en": "Good: Specifying the size of text containers using em units (C28)."
}
},
{
"lang": "html",
"bad": " \n Now is the time for all good men to come to the aid of their country. \n\nThe quick brown fox jumps over the lazy dog.
",
"note": {
"en": "Bad: 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 (F69)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html"
},
{
"id": "wcag-images-of-text",
"criterionId": "1.4.5",
"wcag": ["1.4.5"],
"title": {
"en": "Images of Text",
"fr": "Texte sous forme d’image"
},
"summary": {
"en": "Use text instead of pictures of text. Users can adjust how text is presented. People cannot alter how text looks in images."
},
"examples": [
{
"lang": "html",
"good": "The JavaScript method to convert a string to uppercase is toUpperCase().
",
"note": {
"en": "Good: Using CSS to control visual presentation of text (C22)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html"
},
{
"id": "wcag-reflow",
"criterionId": "1.4.10",
"wcag": ["1.4.10"],
"title": {
"en": "Reflow",
"fr": "Redistribution"
},
"summary": {
"en": "Make lines of text reflow within the viewport. Content can be enlarged without increasing line length. People who need bigger text find it difficult if they must scroll to read long lines."
},
"examples": [
{
"lang": "html",
"good": "\n \n \n \n CSS: Using media queries and grid CSS to reflow columns \n \n\n \n\n \n\n \n ...\n \n\n \n ...\n ...\n \n \n ...\n \n \n ...\n \n \n \n\n \n\n \n\n \n ",
"note": {
"en": "Good: Using media queries and grid CSS to reflow columns (C32)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"
},
{
"id": "wcag-non-text-contrast",
"criterionId": "1.4.11",
"wcag": ["1.4.11"],
"title": {
"en": "Non-text Contrast",
"fr": "Contraste du contenu non textuel"
},
"summary": {
"en": "Ensure meaningful visual cues achieve 3:1 against the background. Important visual information meets the same minimum contrast required for larger text. Some people cannot see elements with low contrast."
},
"examples": [
{
"lang": "css",
"bad": ":focus {outline: none}",
"good": "*:focus {\n\t/* inner indicator */\n\toutline: 2px #F9F9F9 solid;\n\toutline-offset: 0;\n\t/* outer indicator */\n\tbox-shadow: 0 0 0 4px #193146;\n}",
"note": {
"en": "Good: Creating a two-color focus indicator to ensure sufficient contrast with all components (C40). Bad: 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 (F78)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"
},
{
"id": "wcag-text-spacing",
"criterionId": "1.4.12",
"wcag": ["1.4.12"],
"title": {
"en": "Text Spacing",
"fr": "Espacement du texte"
},
"summary": {
"en": "Users can adjust text spacing to make it easier to read. Some people need text with different spacing or font characteristics."
},
"examples": [
{
"lang": "html",
"bad": "\n Now is the time for all good men to come to \n the aid of their country.
\n\nThe quick brown fox jumps over the lazy dog.
",
"good": "",
"note": {
"en": "Good: Allowing for text spacing override (C36). Bad: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted (F104)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html"
},
{
"id": "wcag-content-on-hover-or-focus",
"criterionId": "1.4.13",
"wcag": ["1.4.13"],
"title": {
"en": "Content on Hover or Focus",
"fr": "Contenu au survol ou au focus"
},
"summary": {
"en": "If hover or focus causes content changes, ensure interaction is predictable. More users can perceive and dismiss non-persistent content. Unpredictable temporary content can be hard for some to consume and may disrupt others."
},
"examples": [
{
"lang": "html",
"good": "This is the \n trigger\n And this additional text \n gives additional context on the trigger term\n \n .\n Text and popup are in one link (a) element.\n
",
"note": {
"en": "Good: Making content on focus or hover hoverable, dismissible, and persistent (SCR39)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html"
},
{
"id": "wcag-keyboard",
"criterionId": "2.1.1",
"wcag": ["2.1.1"],
"title": {
"en": "Keyboard",
"fr": "Clavier"
},
"summary": {
"en": "Ensure pointer actions have a keyboard equivalent. Everything can be done with a keyboard except freehand movements. Many people rely on the keyboard interface, including blind and some mobility impaired people."
},
"examples": [
{
"lang": "html",
"bad": "![\"Go](\"nextarrow.gif\")
",
"good": "Example Site",
"note": {
"en": "Good: Using HTML form controls and links (H91). Bad: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function (F54)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html"
},
{
"id": "wcag-no-keyboard-trap",
"criterionId": "2.1.2",
"wcag": ["2.1.2"],
"title": {
"en": "No Keyboard Trap",
"fr": "Pas de piège au clavier"
},
"summary": {
"en": "Ensure users always know how to navigate away from components. Keyboard users don't get stuck. People who rely on the keyboard often have no other means to navigate."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html"
},
{
"id": "wcag-character-key-shortcuts",
"criterionId": "2.1.4",
"wcag": ["2.1.4"],
"title": {
"en": "Character Key Shortcuts",
"fr": "Raccourcis clavier utilisant des caractères"
},
"summary": {
"en": "Ensure character-only shortcut keys can be turned off or modified. Reduce accidental activation of keyboard shortcuts. Character-key shortcuts are easy to accidentally trigger, especially with speech input."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html"
},
{
"id": "wcag-timing-adjustable",
"criterionId": "2.2.1",
"wcag": ["2.2.1"],
"title": {
"en": "Timing Adjustable",
"fr": "Réglage du délai"
},
"summary": {
"en": "Let users turn off, adjust, or extend time limits. Users have adequate time to complete tasks. People with disabilities may need more time to complete activities."
},
"examples": [
{
"lang": "html",
"bad": "\n\n\n Do not use this! \n \n \n \n \n If your browser supports Refresh, you'll be transported to our\n new site in 5 seconds,\n otherwise select the link manually. \n
\n \n",
"good": "\n\n\n \n Stock Market Quotes \n \n\n\n Stock Market Quotes
\n ...\n\n",
"note": {
"en": "Good: Providing a script that warns the user a time limit is about to expire (SCR16). Bad: Failure due to using meta redirect with a time limit (F40)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html"
},
{
"id": "wcag-pause-stop-hide",
"criterionId": "2.2.2",
"wcag": ["2.2.2"],
"title": {
"en": "Pause, Stop, Hide",
"fr": "Mettre en pause, arrêter, masquer"
},
"summary": {
"en": "Let users control content changes that occur in parallel with other content. Fewer users are distracted by content that updates or moves. Some people with cognitive disabilities and attention deficits are distracted by continuous movement."
},
"examples": [
{
"lang": "html",
"bad": "",
"good": "...\n\n This text will scroll and a Pause/Scroll link will be present \n when JavaScript and CSS are supported and active.
\n\n...",
"note": {
"en": "Good: Using script to scroll content, and providing a mechanism to pause it (SCR33). Bad: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less (F50)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"
},
{
"id": "wcag-three-flashes-or-below-threshold",
"criterionId": "2.3.1",
"wcag": ["2.3.1"],
"title": {
"en": "Three Flashes or Below Threshold",
"fr": "Pas plus de trois flashs ou sous le seuil critique"
},
"summary": {
"en": "Avoid content that flashes, or keep it under thresholds. Content does not trigger seizures. Flashing content can cause migraines, dizziness, nausea, and seizures."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html"
},
{
"id": "wcag-bypass-blocks",
"criterionId": "2.4.1",
"wcag": ["2.4.1"],
"title": {
"en": "Bypass Blocks",
"fr": "Contourner des blocs"
},
"summary": {
"en": "Provide a means of skipping repeating content. Users can more easily navigate by keyboard. Users reliant on the keyboard interface can move around pages efficiently."
},
"examples": [
{
"lang": "html",
"good": "Search Technical Periodicals
\n Search
\n \n \n Available Periodicals
\n \n \n \n Search Results
\n ... search results are returned in this section ...\n ",
"note": {
"en": "Good: Providing heading elements at the beginning of each section of content (H69)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html"
},
{
"id": "wcag-page-titled",
"criterionId": "2.4.2",
"wcag": ["2.4.2"],
"title": {
"en": "Page Titled",
"fr": "Titre de page"
},
"summary": {
"en": "Provide a descriptive page title using appropriate technology. Each web page has a meaningful title. Page titles help users identify and distinguish different pages."
},
"examples": [
{
"lang": "html",
"good": "\n\n \n The World Wide Web Consortium \n \n \n ... \n \n",
"note": {
"en": "Good: Providing a title using the title element (H25)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html"
},
{
"id": "wcag-focus-order",
"criterionId": "2.4.3",
"wcag": ["2.4.3"],
"title": {
"en": "Focus Order",
"fr": "Parcours du focus"
},
"summary": {
"en": "Elements receive focus in an order that preserves meaning. Keyboard users navigate content in a correct order. Navigating a site or application with only the keyboard will make sense."
},
"examples": [
{
"lang": "html",
"bad": "",
"good": "\n\n \n \n \n Turbo Encabulator News \n \n \n \n All The News About Turbo Encabulators
\n \n \n \n \n",
"note": {
"en": "Good: Creating modal dialogs with the HTML dialog element (H102). Bad: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability (F44)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html"
},
{
"id": "wcag-link-purpose-in-context",
"criterionId": "2.4.4",
"wcag": ["2.4.4"],
"title": {
"en": "Link Purpose (In Context)",
"fr": "Fonction du lien (selon le contexte)"
},
"summary": {
"en": "Provide descriptive names or context for all links. Users understand what each link will do. People with visual and cognitive disabilities can navigate more easily."
},
"examples": [
{
"lang": "html",
"bad": "A British businessman has racked up 2 million flyer miles and plans to \n travel on the world's first commercial tourism flights to space.
\n",
"good": "\n Current routes at Boulders Climbing Gym\n",
"note": {
"en": "Good: Providing link text that describes the purpose of a link for anchor elements (H30). Bad: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link (F63)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html"
},
{
"id": "wcag-multiple-ways",
"criterionId": "2.4.5",
"wcag": ["2.4.5"],
"title": {
"en": "Multiple Ways",
"fr": "Accès multiples"
},
"summary": {
"en": "Provide at least two options for reaching the same content. Users can get to content in multiple ways. Not everyone can navigate content in the same way."
},
"examples": [],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html"
},
{
"id": "wcag-headings-and-labels",
"criterionId": "2.4.6",
"wcag": ["2.4.6"],
"title": {
"en": "Headings and Labels",
"fr": "En-têtes et étiquettes"
},
"summary": {
"en": "Provide descriptive headings and labels A page's content is described in headings and labels People can orient themselves, especially those with cognitive or visual disabilities."
},
"examples": [
{
"lang": "html",
"good": "Disaster preparation
\nFlood preparation
\nFire preparation
",
"note": {
"en": "Good: Providing descriptive headings (G130)."
}
}
],
"reference": "https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html"
},
{
"id": "wcag-focus-visible",
"criterionId": "2.4.7",
"wcag": ["2.4.7"],
"title": {
"en": "Focus Visible",
"fr": "Visibilité du focus"
},
"summary": {
"en": "Ensure each item receiving focus has a visible indicator. Users know which element has keyboard focus. Without a focus indicator, sighted keyboard users cannot operate the page."
},
"examples": [
{
"lang": "html",
"bad": "",
"good": "