Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(91)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/articles/a11y.html

Issue 10834130: Extensions Docs Server: Doc conversion script - SVN (Closed) Base URL: https://src.chromium.org/chrome/trunk/src/
Patch Set: Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 &mdash; not just people with special needs &mdash; 12 Everyone &mdash; not just people with special needs &mdash;
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698