OLD | NEW |
1 <div id="pageData-name" class="pageData">Accessibility (a11y)</div> | 1 <h1>Accessibility (a11y)</h1> |
2 <div id="pageData-showTOC" class="pageData">true</div> | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 When you design an extension, | 5 When you design an extension, |
6 try to make it as accessible as possible | 6 try to make it as accessible as possible |
7 to people with disabilities such as | 7 to people with disabilities such as |
8 visual impairment, hearing loss, and limited dexterity. | 8 visual impairment, hearing loss, and limited dexterity. |
9 </p> | 9 </p> |
10 | 10 |
11 <p> | 11 <p> |
12 Everyone — not just people with special needs — | 12 Everyone — not just people with special needs — |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
56 | 56 |
57 <h3 id="htmlcontrols">Standard controls</h3> | 57 <h3 id="htmlcontrols">Standard controls</h3> |
58 | 58 |
59 <p> | 59 <p> |
60 Try to use standard HTML UI controls whenever possible. | 60 Try to use standard HTML UI controls whenever possible. |
61 Standard HTML controls (shown in the following figure) | 61 Standard HTML controls (shown in the following figure) |
62 are keyboard accessible, scale easily, | 62 are keyboard accessible, scale easily, |
63 and are generally understood by screen readers. | 63 and are generally understood by screen readers. |
64 </p> | 64 </p> |
65 | 65 |
66 <img src="../images/a11y/standard-html-controls.png" | 66 <img src="{{static}}/images/a11y/standard-html-controls.png" |
67 width="550" height="350" | 67 width="550" height="350" |
68 alt="Screenshots and code for button, checkbox, radio, text, select/option, and
link"> | 68 alt="Screenshots and code for button, checkbox, radio, text, select/option, and
link"> |
69 | 69 |
70 | 70 |
71 <h3 id="aria">ARIA in custom controls</h3> | 71 <h3 id="aria">ARIA in custom controls</h3> |
72 | 72 |
73 <p> | 73 <p> |
74 ARIA is a specification for making UI controls accessible to screen readers | 74 ARIA is a specification for making UI controls accessible to screen readers |
75 by means of a standard set of DOM attributes. | 75 by means of a standard set of DOM attributes. |
76 These attributes provide clues to the screen reader | 76 These attributes provide clues to the screen reader |
(...skipping 185 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
262 | 262 |
263 <p> | 263 <p> |
264 Make sure that it's easy to see | 264 Make sure that it's easy to see |
265 which part of the interface has keyboard focus. | 265 which part of the interface has keyboard focus. |
266 Usually a focus outline moves around the interface, | 266 Usually a focus outline moves around the interface, |
267 but if you’re using CSS heavily this outline might be suppressed | 267 but if you’re using CSS heavily this outline might be suppressed |
268 or the contrast might be reduced. | 268 or the contrast might be reduced. |
269 Two examples of focus outline follow. | 269 Two examples of focus outline follow. |
270 </p> | 270 </p> |
271 | 271 |
272 <img src="../images/a11y/focus-outline-2.png" | 272 <img src="{{static}}/images/a11y/focus-outline-2.png" |
273 width="200" height="75" | 273 width="200" height="75" |
274 alt="A focus outline on a Search button"> | 274 alt="A focus outline on a Search button"> |
275 <br /> | 275 <br /> |
276 <img src="../images/a11y/focus-outline.png" | 276 <img src="{{static}}/images/a11y/focus-outline.png" |
277 width="400" height="40" | 277 width="400" height="40" |
278 alt="A focus outline on one of a series of links"> | 278 alt="A focus outline on one of a series of links"> |
279 | 279 |
280 | 280 |
281 <h3 id="shortcuts"> Shortcuts </h3> | 281 <h3 id="shortcuts"> Shortcuts </h3> |
282 | 282 |
283 <p> | 283 <p> |
284 Although the most common keyboard navigation strategy involves | 284 Although the most common keyboard navigation strategy involves |
285 using the Tab key to move focus through the extension interface, | 285 using the Tab key to move focus through the extension interface, |
286 that's not always the easiest or most efficient way | 286 that's not always the easiest or most efficient way |
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
456 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriat
e alt text</a>. | 456 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriat
e alt text</a>. |
457 | 457 |
458 <h2 id="examples">Examples</h2> | 458 <h2 id="examples">Examples</h2> |
459 | 459 |
460 <p> | 460 <p> |
461 For an example that implements keyboard navigation and ARIA properties, see | 461 For an example that implements keyboard navigation and ARIA properties, see |
462 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> | 462 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> |
463 (compare it to | 463 (compare it to |
464 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). | 464 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). |
465 For more examples and for help in viewing the source code, | 465 For more examples and for help in viewing the source code, |
466 see <a href="samples.html">Samples</a>. | 466 see <a href="samples.html">Samples</a>. |
467 | |
OLD | NEW |