You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
type: "paragraph"
summary: "L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :"
locale: "fr"
rowIndex: 1
shouldWrap: true
children:
type: "link"
title:
url: "http://www.freedomscientific.com/products/fs/jaws-product-page.asp"
children:
type: "text"
value: "Freedom Scientific JAWS"
type: "paragraph"
summary: "L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :"
locale: "fr"
rowIndex: 7
shouldWrap: true
children:
type: "text"
value: "Microsoft Internet Explorer"
tr (62:3) => tableRow
type: "html"
value: "<td><p>Microsoft Internet Explorer</p></td>"
td (71:4) => tableCell
type: "paragraph"
summary: "L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :"
locale: "fr"
rowIndex: 8
shouldWrap: true
children:
type: "link"
title:
url: "http://bugzilla.mozilla.org/"
children:
type: "text"
value: "Déposer un bug Firefox"
td (74:4) => tableCell
type: "paragraph"
summary: "L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :"
locale: "fr"
rowIndex: 8
shouldWrap: true
children:
type: "text"
value: "Utiliser le composant : Disability Access APIs"
tr (69:3) => tableRow
type: "html"
value: "<td><p><a href=\"http://bugzilla.mozilla.org/\">Déposer un bug Firefox</a></p></td>",type: "html"
value: "<td><p>Utiliser le composant : Disability Access APIs</p></td>"
type: "html"
value: "<td colspan=\"1\" rowspan=\"5\">1.1.1 Provide text equivalents (A)</td>"
td (44:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 2
shouldWrap: true
children:
type: "text"
value: "A text description may work, or an accessible data table (see "
type: "link"
title:
url: "/fr/docs/Learn/HTML/Tables/Advanced"
children:
type: "text"
value: "HTML table advanced features and accessibility"
type: "text"
value: "). Also see "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms"
children:
type: "text"
value: "Other text alternative mechanisms"
type: "text"
value: " for the argument against "
type: "inlineCode"
value: "longdesc"
type: "text"
value: "."
tr (42:3) => tableRow
type: "html"
value: "<td><p>A text description may work, or an accessible data table (see <a href=\"/fr/docs/Learn/HTML/Tables/Advanced\">HTML table advanced features and accessibility</a>). Also see <a href=\"/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms\">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p></td>"
td (50:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "See "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML#Text_alternatives"
children:
type: "text"
value: "Text alternatives"
type: "text"
value: " for static caption options, and "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts"
children:
type: "text"
value: "Audio transcripts"
type: "text"
value: ", "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks"
children:
type: "text"
value: "Video text tracks"
type: "text"
value: ", and "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content"
children:
type: "text"
value: "Other multimedia content"
type: "text"
value: " for other alternatives."
tr (48:3) => tableRow
type: "html"
value: "<td><p>See <a href=\"/fr/docs/Learn/Accessibility/HTML#Text_alternatives\">Text alternatives</a> for static caption options, and <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a>, <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks\">Video text tracks</a>, and <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content\">Other multimedia content</a> for other alternatives.</p></td>"
td (60:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "Decorative images should be implemented using CSS background images (see "
type: "link"
title:
url: "/fr/docs/Learn/CSS/Styling_boxes/Backgrounds"
children:
type: "text"
value: "Backgrounds"
type: "text"
value: "). If you have to include an image via an {{aHRtbGVsZW1lbnQoImltZyIp}} element, give it a blank alt ("
type: "inlineCode"
value: "alt=\"\""
type: "text"
value: "), otherwise screenreaders may try to read out the filepath, etc.",type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all."
tr (58:3) => tableRow
type: "html"
value: "<td><p>Decorative images should be implemented using CSS background images (see <a href=\"/fr/docs/Learn/CSS/Styling_boxes/Backgrounds\">Backgrounds</a>). If you have to include an image via an {{aHRtbGVsZW1lbnQoImltZyIp}} element, give it a blank alt (<code>alt=\"\"</code>), otherwise screenreaders may try to read out the filepath, etc.</p><p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p></td>"
table.standard-table (28:1) => table
type: "html"
value: "<tr><td colspan=\"1\" rowspan=\"5\">1.1.1 Provide text equivalents (A)</td><td>All images that convey meaningful content should be given suitable alternative text.</td><td><a href=\"/fr/docs/Learn/Accessibility/HTML#Text_alternatives\">Text alternatives.</a></td></tr>",type: "html"
value: "<tr><td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td><td><p>A text description may work, or an accessible data table (see <a href=\"/fr/docs/Learn/HTML/Tables/Advanced\">HTML table advanced features and accessibility</a>). Also see <a href=\"/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms\">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p></td></tr>",type: "html"
value: "<tr><td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td><td><p>See <a href=\"/fr/docs/Learn/Accessibility/HTML#Text_alternatives\">Text alternatives</a> for static caption options, and <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a>, <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks\">Video text tracks</a>, and <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content\">Other multimedia content</a> for other alternatives.</p></td></tr>",type: "html"
value: "<tr><td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td><td><p>Decorative images should be implemented using CSS background images (see <a href=\"/fr/docs/Learn/CSS/Styling_boxes/Backgrounds\">Backgrounds</a>). If you have to include an image via an {{aHRtbGVsZW1lbnQoImltZyIp}} element, give it a blank alt (<code>alt=\"\"</code>), otherwise screenreaders may try to read out the filepath, etc.</p><p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p></td></tr>"
tr (84:3) => tableRow
type: "html"
value: "<td colspan=\"1\" rowspan=\"1\">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td>"
tr (89:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.2 Provide captions for web-based video (A)</td>"
tr (94:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.3 Provide text transcript or audio description for web-based video (A)</td>"
tr (99:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.4 Provide captions for live audio (AA)</td>"
tr (104:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.5 Provide audio descriptions for prerecorded video (AA)</td>"
tr (109:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td>"
tr (114:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.7 Provide extended video with audio descriptions (AAA)</td>"
tr (119:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.8 Provide an alternative for prerecorded media (AAA)</td>"
tr (124:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.2.9 Provide a transcript for live audio (AAA)</td>"
table.standard-table (77:1) => table
type: "html"
value: "<tr><td colspan=\"1\" rowspan=\"1\">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td><td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td><td>See <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.2 Provide captions for web-based video (A)</td><td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td><td>See <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks\">Video text tracks</a> for HTML5 video captions, and <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content\">Other multimedia content</a> for other technologies. See also <a href=\"https://support.google.com/youtube/answer/2734796?hl=en\">Add your own subtitles & closed captions</a> (YouTube).</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.3 Provide text transcript or audio description for web-based video (A)</td><td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td><td>See <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.4 Provide captions for live audio (AA)</td><td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.5 Provide audio descriptions for prerecorded video (AA)</td><td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td><td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.7 Provide extended video with audio descriptions (AAA)</td><td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.8 Provide an alternative for prerecorded media (AAA)</td><td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td><td>See <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a> for transcript information.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.2.9 Provide a transcript for live audio (AAA)</td><td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td><td>See <a href=\"/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts\">Audio transcripts</a> for transcript information.</td></tr>"
td (149:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Text labels and the form elements they describe are associated unambiguously using the {{aHRtbGVsZW1lbnQoImxhYmVsIik=}} element, which can be picked up by screenreaders, etc."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. "
type: "inlineCode"
value: "alt"
type: "text"
value: " text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Lists — if the order of list items is important, and ordered list should be used ({{aHRtbGVsZW1lbnQoIm9sIik=}})."
td (158:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 1
shouldWrap: true
children:
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML"
children:
type: "text"
value: "HTML: A good basis for accessibility"
type: "text"
value: " is packed with information about this, but you should particularly refer to "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML#Good_semantics"
children:
type: "text"
value: "Good semantics"
type: "text"
value: ", "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML#UI_controls"
children:
type: "text"
value: "UI controls"
type: "text"
value: ", and "
type: "link"
title:
url: "/fr/docs/Learn/Accessibility/HTML#Text_alternatives"
children:
type: "text"
value: "Text alternatives"
type: "text"
value: "."
tr (147:3) => tableRow
type: "html"
value: "<td colspan=\"1\" rowspan=\"1\">1.3.1 Info and relationships (A)</td>",type: "html"
value: "<td><p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p><ul><li>Text labels and the form elements they describe are associated unambiguously using the {{aHRtbGVsZW1lbnQoImxhYmVsIik=}} element, which can be picked up by screenreaders, etc.</li><li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li><li>Lists — if the order of list items is important, and ordered list should be used ({{aHRtbGVsZW1lbnQoIm9sIik=}}).</li></ul></td>",type: "html"
value: "<td>The whole of<p><a href=\"/fr/docs/Learn/Accessibility/HTML\">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href=\"/fr/docs/Learn/Accessibility/HTML#Good_semantics\">Good semantics</a>, <a href=\"/fr/docs/Learn/Accessibility/HTML#UI_controls\">UI controls</a>, and <a href=\"/fr/docs/Learn/Accessibility/HTML#Text_alternatives\">Text alternatives</a>.</p></td>"
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "\"Click the round button to continue\" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "\"Listen to the audio instructions for guidance\" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "\"Swipe from the right hand side of the screen to reveal the menu\" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.",type: "blockquote"
children:
type: "paragraph"
children:
type: "strong"
children:
type: "text"
value: "Note :"
type: "text"
value: " Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1."
tr (167:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.3.3 Sensory characteristics (A)</td>",type: "html"
value: "<td><p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p><ul><li>\"Click the round button to continue\" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li><li>\"Listen to the audio instructions for guidance\" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li><li>\"Swipe from the right hand side of the screen to reveal the menu\" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li></ul><div class=\"note\"><p><strong>Note :</strong> Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p></div></td>"
td (187:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 4
shouldWrap: true
children:
type: "link"
title:
url: "https://www.w3.org/WAI/WCAG21/Understanding/orientation.html"
children:
type: "text"
value: "Understanding Orientation"
type: "text"
value: " "
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: " ",type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "Follow the list of "
type: "link"
title:
url: "https://www.w3.org/TR/WCAG21/#input-purposes"
children:
type: "text"
value: "53 input fields"
type: "text"
value: " to programmatically identify the purpose of a field. "
tr (191:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.3.5 Identify Input Purpose (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td>",type: "html"
value: "<td><p> </p><p>Follow the list of <a href=\"https://www.w3.org/TR/WCAG21/#input-purposes\">53 input fields</a> to programmatically identify the purpose of a field. </p></td>"
type: "html"
value: "<tr><td colspan=\"1\" rowspan=\"1\">1.3.1 Info and relationships (A)</td><td><p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p><ul><li>Text labels and the form elements they describe are associated unambiguously using the {{aHRtbGVsZW1lbnQoImxhYmVsIik=}} element, which can be picked up by screenreaders, etc.</li><li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li><li>Lists — if the order of list items is important, and ordered list should be used ({{aHRtbGVsZW1lbnQoIm9sIik=}}).</li></ul></td><td>The whole of<p><a href=\"/fr/docs/Learn/Accessibility/HTML\">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href=\"/fr/docs/Learn/Accessibility/HTML#Good_semantics\">Good semantics</a>, <a href=\"/fr/docs/Learn/Accessibility/HTML#UI_controls\">UI controls</a>, and <a href=\"/fr/docs/Learn/Accessibility/HTML#Text_alternatives\">Text alternatives</a>.</p></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.3.2 Meaningful content sequence (A)</td><td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td><td>Again, refer to <a href=\"/fr/docs/Learn/Accessibility/HTML\">HTML: A good basis for accessibility</a>.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.3.3 Sensory characteristics (A)</td><td><p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p><ul><li>\"Click the round button to continue\" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li><li>\"Listen to the audio instructions for guidance\" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li><li>\"Swipe from the right hand side of the screen to reveal the menu\" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li></ul><div class=\"note\"><p><strong>Note :</strong> Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p></div></td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.3.4 Orientation (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td>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.</td><td><p><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/orientation.html\">Understanding Orientation</a> </p></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.3.5 Identify Input Purpose (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td><p> </p><p>Follow the list of <a href=\"https://www.w3.org/TR/WCAG21/#input-purposes\">53 input fields</a> to programmatically identify the purpose of a field. </p></td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html\">Understanding Identify Input Purpose</a></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.3.6 Identify Purpose (AAA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html\">Understanding Identify Purpose</a></td></tr>"
td (225:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of \"required\" would be more appropriate."
tr (223:3) => tableRow
type: "html"
value: "<td colspan=\"1\" rowspan=\"1\">1.4.1 Use of color (A)</td>",type: "html"
value: "<td><p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of \"required\" would be more appropriate.</p></td>"
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "The color contrast between background and foreground content should be at a minimum level to ensure legibility:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Text and its background should have a contrast ratio of at least 4.5.1."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold."
tr (235:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.3 Minimum contrast (AA)</td>",type: "html"
value: "<td><p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p><ul><li>Text and its background should have a contrast ratio of at least 4.5.1.</li><li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li></ul></td>"
tr (247:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.4 Resize text (AA)</td>"
tr (252:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.5 Images of text (AA)</td>"
td (259:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 6
shouldWrap: true
children:
type: "text"
value: "This follows, and builds on, criterion 1.4.3.",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Text and its background should have a contrast ratio of at least 7.1."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold."
tr (257:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.6 Enhanced contrast (AAA)</td>",type: "html"
value: "<td><p>This follows, and builds on, criterion 1.4.3.</p><ul><li>Text and its background should have a contrast ratio of at least 7.1.</li><li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li></ul></td>"
tr (269:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.7 Low or no background audio (AAA)</td>"
td (276:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 8
shouldWrap: true
children:
type: "text"
value: "For text content presentation, the following should be true:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Foreground and background colors should be user-selectable."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Text blocks should be no wider than 80 characters (or glyphs), for maximum readability."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Text should not be fully justified (e.g. "
type: "inlineCode"
value: "text-align: justify;"
type: "text"
value: ")"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "line height should be at least 1.5 times the text size within paragraphs (e.g. "
type: "inlineCode"
value: "line-height: 1.5;"
type: "text"
value: "), and at least 2.25 times the text size between paragraphs (e.g. "
type: "inlineCode"
value: "padding: 2.25rem;"
type: "text"
value: ")"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "When the text size is doubled, the content should not need to be scrolled."
tr (274:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.8 Visual presentation (AAA)</td>",type: "html"
value: "<td><p>For text content presentation, the following should be true:</p><ul><li>Foreground and background colors should be user-selectable.</li><li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li><li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li><li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li><li>When the text size is doubled, the content should not need to be scrolled.</li></ul></td>"
tr (289:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.9 Images of text (No Exception) (AAA)</td>"
td (296:4) => tableCell
type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) "
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "No vertical scrolling for top-to-bottom languages (like Japanese)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table)."
tr (294:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.10 Reflow (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td>",type: "html"
value: "<td><ul><li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li><li>No vertical scrolling for top-to-bottom languages (like Japanese)</li><li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li></ul></td>"
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 12
shouldWrap: true
children:
type: "text"
value: "No loss of content or functionality occurs when the following styles are applied: ",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Line height (line spacing) to at least 1.5 times the font size;"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Spacing following paragraphs to at least 2 times the font size;"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Letter spacing (tracking) to at least 0.12 times the font size;"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Word spacing to at least 0.16 times the font size."
tr (310:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.12 Text Spacing (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td>",type: "html"
value: "<td><p>No loss of content or functionality occurs when the following styles are applied: </p><ul><li>Line height (line spacing) to at least 1.5 times the font size;</li><li>Spacing following paragraphs to at least 2 times the font size;</li><li>Letter spacing (tracking) to at least 0.12 times the font size;</li><li>Word spacing to at least 0.16 times the font size.</li></ul></td>"
td (326:4) => tableCell
type: "paragraph"
summary: "This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses."
locale: "fr"
rowIndex: 13
shouldWrap: true
children:
type: "text"
value: "Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "dismissable (can be closed/removed)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "hoverable (the additional content does not disappear when the pointer is over it) "
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "persistent (the additional content does not disappear without user action)"
tr (324:3) => tableRow
type: "html"
value: "<td colspan=\"1\">1.4.13 Content on Hover or Focus (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td>",type: "html"
value: "<td><p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p><ul><li>dismissable (can be closed/removed)</li><li>hoverable (the additional content does not disappear when the pointer is over it) </li><li>persistent (the additional content does not disappear without user action)</li></ul></td>"
table.standard-table (216:1) => table
type: "html"
value: "<tr><td colspan=\"1\" rowspan=\"1\">1.4.1 Use of color (A)</td><td><p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of \"required\" would be more appropriate.</p></td><td>See <a href=\"/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast\">Color and color contrast</a> and <a href=\"/fr/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels\">Multiple labels</a>.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.2 Audio controls (A)</td><td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td><td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href=\"/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics\">Video player syling basics</a>.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.3 Minimum contrast (AA)</td><td><p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p><ul><li>Text and its background should have a contrast ratio of at least 4.5.1.</li><li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li></ul></td><td>See <a href=\"/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast\">Color and color contrast</a>.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.4 Resize text (AA)</td><td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.5 Images of text (AA)</td><td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.6 Enhanced contrast (AAA)</td><td><p>This follows, and builds on, criterion 1.4.3.</p><ul><li>Text and its background should have a contrast ratio of at least 7.1.</li><li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li></ul></td><td>See <a href=\"/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast\">Color and color contrast</a>.</td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.7 Low or no background audio (AAA)</td><td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.8 Visual presentation (AAA)</td><td><p>For text content presentation, the following should be true:</p><ul><li>Foreground and background colors should be user-selectable.</li><li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li><li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li><li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li><li>When the text size is doubled, the content should not need to be scrolled.</li></ul></td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.9 Images of text (No Exception) (AAA)</td><td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td><td> </td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.10 Reflow (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td><ul><li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li><li>No vertical scrolling for top-to-bottom languages (like Japanese)</li><li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li></ul></td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\">Understanding Reflow</a></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.11 Non-Text Contrast(AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\">Understanding Non-Text Contrast</a></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.12 Text Spacing (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td><p>No loss of content or functionality occurs when the following styles are applied: </p><ul><li>Line height (line spacing) to at least 1.5 times the font size;</li><li>Spacing following paragraphs to at least 2 times the font size;</li><li>Letter spacing (tracking) to at least 0.12 times the font size;</li><li>Word spacing to at least 0.16 times the font size.</li></ul></td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html\">Understanding Text Spacing</a></td></tr>",type: "html"
value: "<tr><td colspan=\"1\">1.4.13 Content on Hover or Focus (AA) <em><a href=\"https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1\">added in 2.1</a></em></td><td><p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p><ul><li>dismissable (can be closed/removed)</li><li>hoverable (the additional content does not disappear when the pointer is over it) </li><li>persistent (the additional content does not disappear without user action)</li></ul></td><td><a href=\"https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html\">Understanding Content on Hover or Focus</a></td></tr>"
