|
2 | 2 | "themes": "Textual content", |
3 | 3 | "title": "Set a title for each page", |
4 | 4 | "type": ["Manual test - Code inspector"], |
5 | | - "tests": ["Run the code inspector of the browser.", "Inspect the page title (<code><title>[title]</title></code>).", "or read the title on the browser tab."], |
| 5 | + "tests": ["Run the code inspector of the browser.", "Inspect the page title (<code><title>[title]</title></code>) in the <code><head></code> section.", "or read the title on the browser tab."], |
6 | 6 | "verifier": ["The page title is filled in.", "The page title is unique and must allow the user to understand the context of the page.", "The page title reflects content changes (examples: error in a form, number and terms of a search, step in a journey, asynchronous content update)."], |
7 | 7 | "resultat": ["Each page has a unique and descriptive title, from the most precise to the most general (example: [page content summary - site name]."], |
8 | 8 | "exception": "", |
|
16 | 16 | "themes": "Textual content", |
17 | 17 | "title": "Give headings to sections of content", |
18 | 18 | "type": ["Bookmarklet"], |
19 | | - "tests": ["Install and launch the <a href='https://pauljadam.com/bookmarklets/headings.html'>bookmarklet Headings</a>."], |
| 19 | + "tests": ["Install the <a href=\"javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/headings.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++){iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/headings.js';}})();\">bookmarklet Headings</a> by dragging it or saving it in your browser's bookmarks bar and running the bookmarklet."], |
20 | 20 | "verifier": ["Headings are relevant and not empty.", "Headings follow each other in a logical sequence (<code><h1></code> to <code><h6></code> tags) so they reflect the importance and hierarchy visible on the screen (like a table of contents)."], |
21 | 21 | "resultat": ["All content, visually treated as headings, has a heading semantics (<code><h1></code> to <code><h6></code> tags).", "Headings are set in a logical way."], |
22 | 22 | "exception": "Do not take into account hidden headings (<code>visibility:hidden</code>, <code>aria-hidden='true'</code> or <code>display:none</code>). If one of these masked headings is likely to appear, observations on the new structure of the headings must be made again.", |
|
44 | 44 | "themes": "Non-text content", |
45 | 45 | "title": "Make sure images have a text alternative", |
46 | 46 | "type": ["Bookmarklet"], |
47 | | - "tests": ["Install and launch the bookmarklet <a href= https://pauljadam.com/bookmarklets/images.html'.>List Images</a> or the in the code inspector."], |
| 47 | + "tests": ["Install the <a href=\"javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/images.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/images.js';}})();\">List Images</a> by dragging it or saving it in your browser's bookmarks bar and running the bookmarklet."], |
48 | 48 | "verifier": ["Check that all images have an attribute <code>alt</code>."], |
49 | 49 | "resultat": ["The value of the <code>alt</code> attribute depends on the type of image: <ul><li><strong>Link image:</strong> the content of the alt attribute for each link image is relevant to the target of the link.</li><li><strong>Informative image:</strong> the <code>alt</code> attribute of each image is relevant to the role of the image on the page.</li><li><strong>Image containing text:</strong> the <code>alt</code> attribute includes at least the text from the image.</li><li><strong>Decorative image:</strong> the <code>alt</code> attribute is present but empty.</li><li><strong>Complex image whose <code>alt</code> content would be too long (diagrams, graphs…):</strong> for any image description that is too long to be included in an <code>alt</code> attribute, the description of the image in HTML text is either present on the page or accessible via a nearby link pointing to an HTML page containing the description.</li></ul>"], |
50 | 50 | "exception": "", |
|
58 | 58 | "themes": "Colors and contrasts", |
59 | 59 | "title": "Provide enough contrast between text and background", |
60 | 60 | "type": ["Color Contrast Analyser"], |
61 | | - "tests": ["Install and run <a href='https://www.tpgi.com/color-contrast-checker/'>Color Contrast Analyser</a>."], |
| 61 | + "tests": ["Install the application <a href='https://www.tpgi.com/color-contrast-checker/'>Colour Contrast Analyser</a> on your computer and run it.", "Check the contrast between text colors and backgrounds using the color selection tool or by entering hexadecimal codes directly."], |
62 | 62 | "verifier": ["Contrast is sufficient to identify texts or images of text."], |
63 | | - "resultat": ["<strong>Color Contrast Analyzer shows 'Compliant' for AA criteria:</strong><ul><li>Normal text: size less than 24px or 18.5px bold.</li><li>Large text: size greater than or equal to 24px or 18.5px bold.</li><li>Non-text content: focus indicators, graphics, icons, ununderlined links...</li></ul>"], |
| 63 | + "resultat": ["<strong>Colour Contrast Analyzer shows 'Compliant' for AA criteria:</strong><ul><li>Normal text: size less than 24px or 18.5px bold.</li><li>Large text: size greater than or equal to 24px or 18.5px bold.</li><li>Non-text content: focus indicators, graphics, icons, ununderlined links...</li></ul>"], |
64 | 64 | "exception": "Text that is part of an inactive user interface component or a logo, a brand name.", |
65 | 65 | "raccourcis": "", |
66 | 66 | "moreInfo": "https://a11y-guidelines.orange.com/en/web/develop/colors-and-contrasts/#provide-enough-contrast-between-front-and-background-colors", |
|
70 | 70 | "IDorigin": "testWebID-16" |
71 | 71 | }, { |
72 | 72 | "themes": "Colors and contrasts", |
73 | | - "title": "Make sure the color is not used as the only means of conveying information.", |
| 73 | + "title": "Make sure the color is not used as the only means of conveying information", |
74 | 74 | "type": ["Manual test"], |
75 | | - "tests": ["Identify elements using color to convey information"], |
| 75 | + "tests": ["Identify elements using color to convey information (active page, selected tab, form fields with errors, links not underlined, etc.)."], |
76 | 76 | "verifier": ["Color is not the only means of conveying information: at least one other visual method is available to obtain the same information."], |
77 | 77 | "resultat": ["Information conveyed by color can also be obtained by means of an explicit text.", "The information conveyed by color is complemented by other visual information (e.g., icons use different colors, but also different shapes).", "Special case of links in text: if they are not underlined, provide a means other than color to distinguish them on keyboard focus and mouse hover."], |
78 | 78 | "exception": "", |
|
116 | 116 | "type": ["Manual Test"], |
117 | 117 | "tests": ["Use the browser's code inspector", "Access the responsive view with the keys <kbd>Ctrl</kbd> + <kbd>shift</kbd> + <kbd>M</kbd> or click on the \"Toggle device toolbar\" tab."], |
118 | 118 | "verifier": [["For contents with a vertical scrolling direction: reduce the window to a width of 320px."], ["For contents with a horizontal scrolling direction: reduce the window to a height of 256px."]], |
119 | | - "resultat": [["The user can access all the content without the need for horizontal or vertical scrolling."], ["The scrollbar is present, but its use is not necessary to access the informative content or to use the page's features."]], |
| 119 | + "resultat": [["The user can access all the content without the need for horizontal or vertical scrolling."], ["The scrollbar may be present, but its use should not be necessary to access the informative content or to use the page's features."]], |
120 | 120 | "exception": "The criterion is not applicable for contents that require both dimensions to be understandable, such as images, maps, presentations, data tables, games, etc.", |
121 | 121 | "raccourcis": "", |
122 | 122 | "moreInfo": "https://a11y-guidelines.orange.com/en/web/develop/layout/#use-relative-sizes-and-make-the-web-responsive", |
|
0 commit comments