OLD | NEW |
1 <h1>Accessibility (a11y)</h1> | 1 <h1>Accessibility (a11y)</h1> |
2 | 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 |
(...skipping 285 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
296 <a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts
</a>. | 296 <a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts
</a>. |
297 </p> | 297 </p> |
298 | 298 |
299 <p> | 299 <p> |
300 A good way to ensure discoverability of keyboard shortcuts | 300 A good way to ensure discoverability of keyboard shortcuts |
301 is to list them somewhere. | 301 is to list them somewhere. |
302 {{?is_apps}} | 302 {{?is_apps}} |
303 Your application's options page | 303 Your application's options page |
304 {{:is_apps}} | 304 {{:is_apps}} |
305 Your extension's | 305 Your extension's |
306 <a href="options.html">Options page</a> | 306 <a href="options">Options page</a> |
307 {{/is_apps}} | 307 {{/is_apps}} |
308 might be a good place to do this. | 308 might be a good place to do this. |
309 </p> | 309 </p> |
310 | 310 |
311 <p> | 311 <p> |
312 For the example toolbar, | 312 For the example toolbar, |
313 a simple JavaScript keyboard handler could look like the following. | 313 a simple JavaScript keyboard handler could look like the following. |
314 Note how the ARIA property <code>aria-activedescendant</code> | 314 Note how the ARIA property <code>aria-activedescendant</code> |
315 is updated in response to user input | 315 is updated in response to user input |
316 to reflect the current active toolbar button. | 316 to reflect the current active toolbar button. |
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
397 Text styled in a web font is searchable, | 397 Text styled in a web font is searchable, |
398 scales to different sizes, | 398 scales to different sizes, |
399 and is accessible to people using screen readers. | 399 and is accessible to people using screen readers. |
400 </p> | 400 </p> |
401 | 401 |
402 <h3 id="colors">Colors</h3> | 402 <h3 id="colors">Colors</h3> |
403 | 403 |
404 <p> | 404 <p> |
405 Check that there is sufficient contrast between | 405 Check that there is sufficient contrast between |
406 background color and foreground/text color in your extension. | 406 background color and foreground/text color in your extension. |
407 <a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast ch
ecking tool</a> | 407 <a href="http://snook.ca/technical/colour_contrast/colour">This contrast checkin
g tool</a> |
408 checks whether your background and foreground colors | 408 checks whether your background and foreground colors |
409 provide appropriate contrast. | 409 provide appropriate contrast. |
410 If you’re developing in a Windows environment, | 410 If you’re developing in a Windows environment, |
411 you can also enable High Contrast Mode | 411 you can also enable High Contrast Mode |
412 to check the contrast of your extension. | 412 to check the contrast of your extension. |
413 When evaluating contrast, | 413 When evaluating contrast, |
414 verify that every part of your extension that relies on | 414 verify that every part of your extension that relies on |
415 color or graphics to convey information is clearly visible. | 415 color or graphics to convey information is clearly visible. |
416 For specific images, you can use a tool such as the | 416 For specific images, you can use a tool such as the |
417 <a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> | 417 <a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
460 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriat
e alt text</a>. | 460 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriat
e alt text</a>. |
461 | 461 |
462 <h2 id="examples">Examples</h2> | 462 <h2 id="examples">Examples</h2> |
463 | 463 |
464 <p> | 464 <p> |
465 For an example that implements keyboard navigation and ARIA properties, see | 465 For an example that implements keyboard navigation and ARIA properties, see |
466 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> | 466 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> |
467 (compare it to | 467 (compare it to |
468 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). | 468 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). |
469 For more examples and for help in viewing the source code, | 469 For more examples and for help in viewing the source code, |
470 see <a href="samples.html">Samples</a>. | 470 see <a href="samples">Samples</a>. |
OLD | NEW |