-
Notifications
You must be signed in to change notification settings - Fork 6
/
technical-notes.html
205 lines (156 loc) · 19.5 KB
/
technical-notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RGAA 3 2016 Technical notes - English translation</title>
<meta content="English translation of the RGAA 3 2016, French official accessibility guidelines. Technical notes." name="description" />
<meta content="RGAA, RGAA 3 2016, French accessibility guidelines, English translation, technical notes" name="keywords" />
<link type="text/css" rel="stylesheet" href="Css/knacss.css" />
<link type="text/css" rel="stylesheet" href="Css/RGAA3-en.css" />
</head>
<body class="mw1140p center">
<header role="banner">
<p id="skiplinks"><a href="#toc">Skip to Table of Contents</a> - <a href="#main">Skip to main content</a></p>
<nav id="nav" role="navigation" aria-label="Main navigation">
<ul>
<li><a href="./introduction-RGAA.html">Introduction to RGAA</a></li>
<li><a href="./rgaa-companion-guide.html">RGAA companion guide</a></li>
<li>Technical reference
<ul>
<li><a href="./criteria.html">Criteria</a></li>
<li><a href="./glossary.html">Glossary</a></li>
<li><a href="./particular-cases.html">Particular cases</a></li>
<li>Technical notes - current page</li>
<li><a href="./baseline.html">Baseline</a></li>
<li><a href="./references.html">References</a></li>
</ul>
</li>
</ul>
</nav>
<h1>Technical notes</h1>
<p>
The technical notes below provide explanations regarding some HTML5 elements whose support can be inconsistent across different user agents, and propositions made by the RGAA to circumvent potential issues.
</p>
<h2 tabindex="-1" id="toc">
Table of Contents
</h2>
<nav id="toc-list" role="navigation" aria-labelledby="toc">
<ul>
<li><a href="#images">Images</a></li>
<li><a href="#tableaux">Tables</a></li>
<li><a href="#script">Scripts</a></li>
<li><a href="#structure">Information structure</a></li>
<li><a href="#presentation">Presentation of information</a></li>
<li><a href="#formulaire">Forms</a></li>
<li><a href="#navigation">Navigation</a></li>
</ul>
</nav>
</header>
<main id="main" role="main">
<h2 id="images">Images</h2>
<h3 id="TNcrit1-2">Criterion 1.2 [A]</h3>
<p>When an image is associated with a <a href="./glossary.html#mImageCaption">caption</a>, the WCAG technical note recommends to systematically provide an alternative text for the image (see <a href="./criteria.html#crit-1-10">criterion 1.10</a>). In this case the criterion 1.2 is not applicable.
</p>
<p>A WAI-ARIA <code>role="presentation"</code> attribute can not be used to specify a decorative image, in accordance with the use of WAI-ARIA roles restrictions, as per the current specifications.
</p>
<h3 id="TNcrit1-3a">Criterion 1.3 [A]: <code>title</code> attribute</h3>
<p>The WCAG note prohibits the use of the <code>title</code> attribute to replace the <code>alt</code> attribute, however it is often useful to use the <code>title</code> attribute to display a tooltip on particularly obscure images. If the <code>title</code> attribute is used in this way, the content of the <code>title</code> attribute must be strictly identical to the alternative.</p>
<h3 id="TNcrit1-3b">Criterion 1.3 [A]: <code><title></code> tag in SVG elements</h3>
<p>With SVG, the lack of support for the <code><title></code> element by assistive technologies incurs issues when the <code><desc></code> element is used to implement the short alternative text for the image, whereas the image requires a <a href="./glossary.html#mDescDetaillee">detailed description</a>. In this case it is recommended to use an adjacent text or an <a href="./glossary.html#mLienAdj">adjacent link</a> to provide the detailed description.
</p>
<p>The 1.3.9 and 1.3.12 tests are used to verify that the implementation of the alternative is <a href="./glossary.html#mCompAccess">accessibility supported</a> (with the chosen <a href="./baseline.html">baseline</a>).
</p>
<h3 id="TNcrit1-6">Criterion 1.6 [A]</h3>
<p>With SVG, the lack of support for the <code><title></code> element by assistive technologies incurs issues when the <code><desc></code> element is used to implement the short alternative text for the image, whereas the image requires <a href="./glossary.html#mDescDetaillee">detailed description</a>. In this case it is recommended to use an adjacent text or an <a href="./glossary.html#mLienAdj">adjacent link</a> to provide the detailed description.
</p>
<p>If the <code><desc></code> element is used to implement the detailed description, it is recommended to use an <code>aria-label</code> attribute to implement the short alternative of the image.
</p>
<p>The use of the <code>aria-describedby</code> attribute is not possible to link an image to its description, due to lack of support for assistive technologies.
</p>
<p>The adjacent detailed description can be implemented via a <code><figcaption></code> in this case the <a href="./criteria.html#crit-1-10">criterion 1.10</a> must be verified (using <code><figure></code>, <code>role="group"</code>, etc.).
</p>
<h3 id="TNcrit1-8">Criteria 1.8 [AA] and 1.9 [AAA]</h3>
<p>The text in vector images being actual text, it is not affected by these criteria.</p>
<h3 id="TNcrit1-10">Criterion 1.10 [A]</h3>
<p>Implementing a <code>role="group"</code> on the <code><figure></code> parent element is intended to circumvent the current lack of support for the <code><figure></code> elements by assistive technologies. Although recommended, the use of a <code>figcaption</code> element in a <code>figure</code> element is optional. However the use of a <code>figcaption</code> element to associate a caption to an image requires the use of a <code>figure</code> parent element. The reference to the adjacent caption can be an expression like "image 1", or an equivalent, when this expression is included in the caption.
</p>
<p>Although recommended by HTML5, the WCAG Note states that the <code>title</code> attribute can not be used for to "label" an image.
</p>
<p>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes can not be currently used, due to lack of support by assistive technologies.
</p>
<p><strong>Note:</strong> Captioned images must also meet <a href="./criteria.html#crit-1-3">criterion 1.3</a> relative to images conveying information.</p>
<h2 id="tableaux">Tables</h2>
<h3 id="TNcrit5-1">Criterion 5.1 [A]</h3>
<p>The specification provides several methods to associate a table with its summary (table linked to a text passage with <code>aria-describedby</code>; table grouped with a summary, provided as an adjacent text, via a <code>figure</code> element; table grouped with a summary, provided in a <code>figcaption</code> element, via a <code>figure</code> element; summary provided via a <code>details</code> element in the <code>caption</code> element).
</p>
<p>These methods are currently not supported enough to be used reliably.</p>
<h2 id="script">Scripts</h2>
<h3 id="TNcrit7-1">Criterion 7.1 [A]</h3>
<p>Criterion 7.1 implements the concept of "<a href="./glossary.html#mCompAccess">supported by assistive technologies</a>" as defined by the WCAG, as well as the use of the WAI-ARIA API to make a component or functionality accessible. The proper use of the WAI-ARIA API is verified through tests 7.1.3, 7.1.4, 7.1.5 and 7.1.6.</p>
<p><strong>Important note</strong>: in an HTML5 environment, many components may require JavaScript to function. In the case of a JavaScript component that could not be made accessible, when an alternative is provided, a method must be provided specifically for the faulty component to enable the user to replace it (or turn it on again) with its accessible alternative.</p>
<p>This means that disabling JavaScript for the whole page will not be accepted as a valid method, unless it does not compromize the use of other components.
</p>
<h3 id="TNcrit7-3">Criterion 7.3 [A]</h3>
<p>For certain user interface components design patterns, ARIA defines a set of keyboard interactions based on <kbd>Esc</kbd>, <kbd>Space bar</kbd>, <kbd>Tab</kbd> and arrow keys; and, occasionally, other interactions based on <kbd>Page Up</kbd>, <kbd>Page Down</kbd>, <kbd>Home</kbd> and <kbd>End</kbd> keys, for example. In order to allow gradual implementation of these components with complex keyboard interactions, the RGAA restricts the requirements to only main keys (the <kbd>Esc</kbd>, <kbd>Space bar</kbd>, <kbd>Tab</kbd>, and arrow keys) as per the <a href="./glossary.html#mDesignPattern">ARIA design patterns</a>.
</p>
<h2 id="structure">Information structure</h2>
<h3 id="TNcrit9-1">Criterion 9.1 [A]</h3>
<p>The ARIA specification allows the use of the role <code>heading</code> combined with the <code>aria-level</code> property (hierarchical level in the document outline) to mark headings. Although it is preferable to use the native <h<i>x</i>> elements in HTML , the use of the WAI-ARIA role <code>heading</code> is compatible with accessibility.</p>
<p>While the HTML5 specification allows the use of only level 1 headings (<code><h1></code>), the lack of support by assistive technologies makes it necessary to use a relevant headings hierarchy.
</p>
<h3 id="TNcrit9-2">Criterion 9.2 [A]</h3>
<p>The document tree (<a href="./glossary.html#mDocumentOutline">outline</a>) is generated by the use of sectioning<code> <nav></code>, <code><article></code>, <code><section></code>, and <code><aside></code> tags, and implicit sections generated by using a <code><h<i>x</i>></code> (when the <code><h<i>x</i>></code> is not the first child of a section).</p>
<p>A sectioning tag is used to structure or group content, parts of a content, or a set of contents that can be considered independently of the rest of the document.
</p>
<p>A <a href="./glossary.html#mMenuNav">navigation area</a> in the site or in a subpart of the site, a table of contents or the navigation area of a <a href="./glossary.html#mCollecPage">collection of pages</a> (<code><nav></code>), a content "complementary" to <a href="./glossary.html#mMain">main content</a> (<code><aside></code>), the main content or the grouping of several content like articles (<code><article></code> or <code><section></code>) or a secondary content such as a comment, a Twitter widget, RSS feeds (<code><article></code> or <code><section></code>) are examples of sectioning contents.
</p>
<p>In the case of content, as opposed to the navigation areas (<code><nav></code>) or complementary content areas (<code><aside></code>), a section should have, if appropriate, a header (<code><header></code>) and footer (<code><footer></code>).
</p>
<p>The first heading <code><h<i>x</i>></code> in a section gives the "name" of this section, as it will be set in the document tree. The following headings (<code><h<i>x</i>></code>;) create implicit sections that will constitute the section's outline.</p>
<p>A section can be considered independently of the rest of the page, the tree generated by the implicit sections (<code><h<i>x</i>></code>) is calculated from Level 1 assigned to the first section heading.</p>
<p>When used, the document tree may therefore be different from the page content tree based on <code><h<i>x</i>></code>, although both structures are similar.
</p>
<p>This tree must be representative of the document structure and be consistent with the structure of the content generated by the use of <code><h<i>x</i>></code>. Structuring the content generated by the <code><h<i>x</i>></code> tags could be, theoretically, deduced from the document tree, thus the HTML5 specification recommends using <code><h1></code> headings. But this practice is prohibited by RGAA and requires via the criterion 9.1 to use a relevant headings hierarchy (<code><h<i>x</i>></code>).</p>
<p>If the outline (provided that it is relevant) allows exploration and navigation features with some assistive technologies, it also affects the headings hierarchy generated by the <code><h<i>x</i>></code> by changing the level of rendered headings.</p>
<p>To accompany the gradual support of the document outline algorithm, and considering the fact that the RGAA requires to have, in any case, a robust and consistent content structure (tags <code><h<i>x</i>></code>), it is acceptable to consider the test 9.2.2 as not applicable when it is not possible to ensure that the document outline is perfectly consistent.
</p>
<p>In this case, non-compliant content for this test should be signaled as a simple warning.</p>
<h3 id="TNcrit9-3">Criterion 9.3 [A]</h3>
<p>The WAI-ARIA Roles <code>list</code> and <code>listitem</code> may require the use of the <code>aria-setsize</code> and <code>aria-posinset</code> properties, if the entire list is not available via the DOM generated at the time of rendering.</p>
<p>Despite the existence of the <code>definition</code> role, used in combination with the <code>aria-labelledby</code> property, WAI-ARIA does not offer a role equivalent to HTML definition lists (<code>DL</code>). The <code>definition</code> role can not, therefore, be used as an equivalent of an HTML definition list <code>DL</code>.</p>
<p>The roles <code>tree</code>, <code>tablist</code>, <code>menu</code>, <code>combobox</code> and <code>listbox</code> are not equivalent to an HTML <code>ul</code> or <code>ol</code> list.
</p>
<p>References: <a href="http://www.w3.org/WAI/PF/aria/roles#list">The Roles model - list</a>.</p>
<h2 id="presentation">Presentation of information</h2>
<h3 id="TNcrit10-13">Criterion 10.13 [A]</h3>
<p>WAI-ARIA provides an <code>aria-hidden</code> property (<code>true</code> or <code>false</code>) that inhibits the rendering of a content to assistive technologies, without affecting its visibility with visual user agents: content with <code>aria-hidden="true"</code> will not be spoken out but remains visible. Unless the content controlled by <code>aria-hidden</code> is not intended to be rendered by assistive technologies, the value of the <code>aria-hidden</code> attribute must be consistent with the displayed or hidden status of the on-screen content.
</p>
<p>The HTML5 specification describes a <code>hidden</code> attribute that can make unavailable (when the hidden attribute is present) content in the generated DOM (similar to <code>type="hidden"</code> on a form control).</p>
<p>There can be situations where a content controlled with <code>hidden</code> or <code>aria-hidden</code> is momentarily in an inconsistent state with the displayed or hidden status of the content, for example when an item is meant to be available but visually displayed only upon further action. In this case, it is the final state of the content that should be considered for validation of this criterion.</p>
<h2 id="formulaire">Forms</h2>
<h3 id="TNcrit11-11">Criterion 11.11 [AA]</h3>
<p>Some types of HTML5 form controls manage help messages on input automatically. For example, input fields of type <code>email</code> display a message like "Please enter a valid email address" if the entered email address does not match the expected format. These messages are customizable via the API Constraint Validation, which provides ability to customize error messages. This validates the criterion, however, authors are warned that support of this API is not yet stabilized. The <code>pattern</code> type that can automatically perform format control (using regular expressions) also displays a help message but it is customizable via the <code>title</code> attribute; this mechanism validates the criterion.
</p>
<p>Reference: <a href="https://html.spec.whatwg.org/#constraint-validation">WHATWG - 4.10.21.3 The constraint validation API</a>.
</p>
<h2 id="navigation">Navigation</h2>
<h3 id="TNcrit12-10">Criterion 12.10 [A]</h3>
<p>WAI-ARIA provides roles to indicate the main areas (regions) of the document. These roles are very beneficial to users of screen readers in particular, but also to sighted keyboard users who can benefit from features allowing rapid navigation in the document structure. While most screen readers make these features available to users, browsers have not yet proposed dedicated navigation features for users who rely on keyboard exclusively. The implementation of skip links remains a requirement.</p>
</main>
<footer role="contentinfo">
<h2>Licence</h2>
<p>
This document is a property of the State of France, under <a hreflang="fr" href="http://www.etalab.gouv.fr/licence-ouverte-open-licence">Open Licence 1.0 (in French)</a> or later, as all documents hosted on <a hreflang="fr" href="http://references.modernisation.gouv.fr/">references.modernisation.gouv.fr (in French)</a>. See the terms and conditions of the licence in the <a hreflang="fr" href="http://references.modernisation.gouv.fr/mentions-legales">legal information</a>.
</p>
<p>
The technical reference guidelines (list of criteria, glossary, particular cases, technical notes, baseline) are an adapted copy of the <a hreflang="fr" href="http://www.accessiweb.org/index.php/accessiweb-html5aria-liste-deployee.html">AccessiWeb HTML5 / ARIA</a> guidelines - Working Version as of 12/19/2013 - Edited by BrailleNet.</p>
<h2>Disclaimer</h2>
<p>
This translation is NOT normative. It is available for informational purposes only. The normative version is the <a hreflang="fr" href="http://references.modernisation.gouv.fr/rgaa/">official RGAA in French</a>.
</p>
<p>
Although greatest care has been taken during translation, we acknowledge the fact that this text probably contains mistakes. You may write to <a href="mailto:rgaa.sgmap@modernisation.gouv.fr">rgaa.sgmap@modernisation.gouv.fr</a>, or submit proposals via <a href="https://github.com/DISIC/rgaa_referentiel_en">the GitHub repository</a>, if you feel corrections are needed.
</p>
</footer>
</body>
</html>