| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: | |
| 2 1) The <head> information in this page is significant, should be uniform | |
| 3 across api docs and should be edited only with knowledge of the | |
| 4 templating mechanism. | |
| 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a | |
| 6 browser, it will be re-generated from the template, json schema and | |
| 7 authored overview content. | |
| 8 4) The <body>.innerHTML is also generated by an offline step so that this | |
| 9 page may easily be indexed by search engines. | |
| 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> | |
| 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> | |
| 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> | |
| 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> | |
| 15 </script> | |
| 16 <script type="text/javascript" src="../../../../third_party/json_minify/mini
fy-sans-regexp.js"> | |
| 17 </script> | |
| 18 <script type="text/javascript" src="js/api_page_generator.js"></script> | |
| 19 <script type="text/javascript" src="js/bootstrap.js"></script> | |
| 20 <script type="text/javascript" src="js/sidebar.js"></script> | |
| 21 <title>Accessibility (a11y) - Google Chrome Extensions - Google Code</title></
head> | |
| 22 <body> <div id="devModeWarning" class="displayModeWarning"> | |
| 23 You are viewing extension docs in chrome via the 'file:' scheme: are you exp
ecting to see local changes when you refresh? You'll need run chrome with --allo
w-file-access-from-files. | |
| 24 </div> | |
| 25 <div id="branchWarning" class="displayModeWarning"> | |
| 26 <span>WARNING: This is the <span id="branchName">BETA</span> documentation. | |
| 27 It may not work with the stable release of Chrome.</span> | |
| 28 <select id="branchChooser"> | |
| 29 <option>Choose a different version... | |
| 30 </option><option value="">Stable | |
| 31 </option><option value="beta">Beta | |
| 32 </option><option value="dev">Dev | |
| 33 </option><option value="trunk">Trunk | |
| 34 </option></select> | |
| 35 </div> | |
| 36 <div id="unofficialWarning" class="displayModeWarning"> | |
| 37 <span>WARNING: This is unofficial documentation. It may not work with the | |
| 38 current release of Chrome.</span> | |
| 39 <button id="goToOfficialDocs">Go to the official docs</button> | |
| 40 </div> | |
| 41 <div id="gc-container" class="labs"> | |
| 42 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> | |
| 43 <!-- In particular, sub-templates that recurse, must be used by allowing | |
| 44 jstemplate to make a copy of the template in this section which | |
| 45 are not operated on by way of the jsskip="true" --> | |
| 46 <!-- /SUBTEMPLATES --> | |
| 47 <a id="top"></a> | |
| 48 <div id="skipto"> | |
| 49 <a href="#gc-pagecontent">Skip to page content</a> | |
| 50 <a href="#gc-toc">Skip to main navigation</a> | |
| 51 </div> | |
| 52 <!-- API HEADER --> | |
| 53 <table id="header" width="100%" cellspacing="0" border="0"> | |
| 54 <tbody><tr> | |
| 55 <td valign="middle"><a href="http://code.google.com/"><img src="images/c
ode_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:
0; margin:0;"></a></td> | |
| 56 <td valign="middle" width="100%" style="padding-left:0.6em;"> | |
| 57 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.
5em"> | |
| 58 <div id="gsc-search-box"> | |
| 59 <input type="hidden" name="cx" value="002967670403910741006:61_cvz
fqtno"> | |
| 60 <input type="hidden" name="ie" value="UTF-8"> | |
| 61 <input type="text" name="q" value="" size="55"> | |
| 62 <input class="gsc-search-button" type="submit" name="sa" value="Se
arch"> | |
| 63 <br> | |
| 64 <span class="greytext">e.g. "page action" or "tabs"</span> | |
| 65 </div> | |
| 66 </form> | |
| 67 <script type="text/javascript" src="https://www.google.com/jsapi"></sc
ript> | |
| 68 <script type="text/javascript">google.load("elements", "1", {packages:
"transliteration"});</script> | |
| 69 <script type="text/javascript" src="https://www.google.com/coop/cse/t1
3n?form=cse&t13n_langs=en"></script> | |
| 70 <script type="text/javascript" src="https://www.google.com/coop/cse/br
and?form=cse&lang=en"></script> | |
| 71 </td> | |
| 72 </tr> | |
| 73 </tbody></table> | |
| 74 <div id="codesiteContent" class=""> | |
| 75 <a id="gc-topnav-anchor"></a> | |
| 76 <div id="gc-topnav"> | |
| 77 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Lab
s</a>)</h1> | |
| 78 <ul id="home" class="gc-topnav-tabs"> | |
| 79 <li id="home_link"> | |
| 80 <a href="index.html" title="Google Chrome Extensions home page">Home
</a> | |
| 81 </li> | |
| 82 <li id="docs_link"> | |
| 83 <a href="docs.html" title="Official Google Chrome Extensions documen
tation">Docs</a> | |
| 84 </li> | |
| 85 <li id="faq_link"> | |
| 86 <a href="faq.html" title="Answers to frequently asked questions abou
t Google Chrome Extensions">FAQ</a> | |
| 87 </li> | |
| 88 <li id="samples_link"> | |
| 89 <a href="samples.html" title="Sample extensions (with source code)">
Samples</a> | |
| 90 </li> | |
| 91 <li id="group_link"> | |
| 92 <a href="http://groups.google.com/a/chromium.org/group/chromium-exte
nsions" title="Google Chrome Extensions developer forum">Group</a> | |
| 93 </li> | |
| 94 <li id="so_link"> | |
| 95 <a href="http://stackoverflow.com/questions/tagged/google-chrome-ext
ension" title="[google-chrome-extension] tag on Stack Overflow">Questions?</a> | |
| 96 </li> | |
| 97 </ul> | |
| 98 </div> <!-- end gc-topnav --> | |
| 99 <div class="g-section g-tpl-170"> | |
| 100 <!-- SIDENAV --> | |
| 101 <div class="g-unit g-first" id="gc-toc"> | |
| 102 <ul> | |
| 103 <li><a href="getstarted.html">Getting Started</a></li> | |
| 104 <li><a href="overview.html">Overview</a></li> | |
| 105 <li><a href="whats_new.html">What's New?</a></li> | |
| 106 <li><h2><a href="devguide.html">Developer's Guide</a></h2> | |
| 107 <ul> | |
| 108 <li>Browser UI | |
| 109 <ul> | |
| 110 <li><a href="browserAction.html">Browser Actions</a></li> | |
| 111 <li><a href="contextMenus.html">Context Menus</a></li> | |
| 112 <li><a href="notifications.html">Desktop Notifications</a></li
> | |
| 113 <li><a href="omnibox.html">Omnibox</a></li> | |
| 114 <li><a href="options.html">Options Pages</a></li> | |
| 115 <li><a href="override.html">Override Pages</a></li> | |
| 116 <li><a href="pageAction.html">Page Actions</a></li> | |
| 117 </ul> | |
| 118 </li> | |
| 119 <li>Browser Interaction | |
| 120 <ul> | |
| 121 <li><a href="bookmarks.html">Bookmarks</a></li> | |
| 122 <li><a href="cookies.html">Cookies</a></li> | |
| 123 <li><a href="devtools.html">Developer Tools</a></li> | |
| 124 <li><a href="events.html">Events</a></li> | |
| 125 <li><a href="history.html">History</a></li> | |
| 126 <li><a href="management.html">Management</a></li> | |
| 127 <li><a href="tabs.html">Tabs</a></li> | |
| 128 <li><a href="windows.html">Windows</a></li> | |
| 129 </ul> | |
| 130 </li> | |
| 131 <li>Implementation | |
| 132 <ul> | |
| 133 <li class="leftNavSelected">Accessibility</li> | |
| 134 <li><a href="background_pages.html">Background Pages</a></li> | |
| 135 <li><a href="content_scripts.html">Content Scripts</a></li> | |
| 136 <li><a href="xhr.html">Cross-Origin XHR</a></li> | |
| 137 <li><a href="i18n.html">Internationalization</a></li> | |
| 138 <li><a href="messaging.html">Message Passing</a></li> | |
| 139 <li><a href="permissions.html">Optional Permissions</a></li> | |
| 140 <li><a href="npapi.html">NPAPI Plugins</a></li> | |
| 141 </ul> | |
| 142 </li> | |
| 143 <li>Finishing | |
| 144 <ul> | |
| 145 <li><a href="hosting.html">Hosting</a></li> | |
| 146 <li><a href="external_extensions.html">Other Deployment Option
s</a></li> | |
| 147 </ul> | |
| 148 </li> | |
| 149 </ul> | |
| 150 </li> | |
| 151 <li><h2><a href="apps.html">Packaged Apps</a></h2></li> | |
| 152 <li><h2><a href="tutorials.html">Tutorials</a></h2> | |
| 153 <ul> | |
| 154 <li><a href="tut_debugging.html">Debugging</a></li> | |
| 155 <li><a href="tut_analytics.html">Google Analytics</a></li> | |
| 156 <li><a href="tut_oauth.html">OAuth</a></li> | |
| 157 </ul> | |
| 158 </li> | |
| 159 <li><h2>Reference</h2> | |
| 160 <ul> | |
| 161 <li>Formats | |
| 162 <ul> | |
| 163 <li><a href="manifest.html">Manifest Files</a></li> | |
| 164 <li><a href="match_patterns.html">Match Patterns</a></li> | |
| 165 </ul> | |
| 166 </li> | |
| 167 <li><a href="permission_warnings.html">Permission Warnings</a></li
> | |
| 168 <li><a href="api_index.html">chrome.* APIs</a></li> | |
| 169 <li><a href="api_other.html">Other APIs</a></li> | |
| 170 </ul> | |
| 171 </li> | |
| 172 <li><h2><a href="samples.html">Samples</a></h2></li> | |
| 173 <div class="line"> </div> | |
| 174 <li><h2>More</h2> | |
| 175 <ul> | |
| 176 <li><a href="http://code.google.com/chrome/webstore/docs/index.htm
l">Chrome Web Store</a></li> | |
| 177 <li><a href="http://code.google.com/chrome/apps/docs/developers_gu
ide.html">Hosted Apps</a></li> | |
| 178 <li><a href="themes.html">Themes</a></li> | |
| 179 </ul> | |
| 180 </li> | |
| 181 </ul> | |
| 182 </div> | |
| 183 <script> | |
| 184 initToggles(); | |
| 185 </script> | |
| 186 <div class="g-unit" id="gc-pagecontent"> | |
| 187 <div id="pageTitle"> | |
| 188 <h1 class="page_title">Accessibility (a11y)</h1> | |
| 189 </div> | |
| 190 <!-- TABLE OF CONTENTS --> | |
| 191 <div id="toc"> | |
| 192 <h2>Contents</h2> | |
| 193 <ol> | |
| 194 <li> | |
| 195 <a href="#controls">Use accessible UI controls</a> | |
| 196 <ol> | |
| 197 <li> | |
| 198 <a href="#htmlcontrols">Standard controls</a> | |
| 199 </li><li> | |
| 200 <a href="#aria">ARIA in custom controls</a> | |
| 201 </li><li> | |
| 202 <a href="#focus">Focus in custom controls</a> | |
| 203 </li> | |
| 204 </ol> | |
| 205 </li><li> | |
| 206 <a href="#keyboard"> Support keyboard access </a> | |
| 207 <ol> | |
| 208 <li> | |
| 209 <a href="#navigation"> Navigation </a> | |
| 210 </li><li> | |
| 211 <a href="#shortcuts"> Shortcuts </a> | |
| 212 </li> | |
| 213 </ol> | |
| 214 </li><li> | |
| 215 <a href="#more"> Provide accessible content </a> | |
| 216 <ol> | |
| 217 <li> | |
| 218 <a href="#text">Text</a> | |
| 219 </li><li> | |
| 220 <a href="#colors">Colors</a> | |
| 221 </li><li> | |
| 222 <a href="#sound">Sound</a> | |
| 223 </li><li> | |
| 224 <a href="#images">Images</a> | |
| 225 </li> | |
| 226 </ol> | |
| 227 </li><li> | |
| 228 <a href="#examples">Examples</a> | |
| 229 <ol> | |
| 230 </ol> | |
| 231 </li> | |
| 232 </ol> | |
| 233 </div> | |
| 234 <!-- /TABLE OF CONTENTS --> | |
| 235 <!-- Standard content lead-in for experimental API pages --> | |
| 236 <!-- STATIC CONTENT PLACEHOLDER --> | |
| 237 <div id="static"><div id="pageData-name" class="pageData">Accessibility
(a11y)</div> | |
| 238 <div id="pageData-showTOC" class="pageData">true</div> | |
| 239 <p> | |
| 240 When you design an extension, | |
| 241 try to make it as accessible as possible | |
| 242 to people with disabilities such as | |
| 243 visual impairment, hearing loss, and limited dexterity. | |
| 244 </p> | |
| 245 <p> | |
| 246 Everyone — not just people with special needs — | |
| 247 can benefit from the alternative access modes | |
| 248 that accessible extensions provide. | |
| 249 For example, keyboard shortcuts are important | |
| 250 for blind people and people with limited dexterity, | |
| 251 but they also help power users get things done | |
| 252 more quickly without using a mouse. | |
| 253 Captions and transcripts give deaf people access to audio content, | |
| 254 but they are also useful to language learners. | |
| 255 </p> | |
| 256 <p> | |
| 257 People can interact with your extension in a variety of ways. | |
| 258 They might use a standard monitor, keyboard, and mouse, | |
| 259 or they might use a screen magnifier and just a keyboard. | |
| 260 Another possibility is a <em>screen reader</em>, | |
| 261 an assistive application tool that interprets | |
| 262 what's displayed onscreen | |
| 263 for a blind or visually impaired user. | |
| 264 A screen reader might speak out loud or produce Braille output. | |
| 265 </p> | |
| 266 <p> | |
| 267 Although you can't predict what tools people will use, | |
| 268 by following a few simple guidelines | |
| 269 you can write an extension that is | |
| 270 more likely to be accessible to more people. | |
| 271 The guidelines on this page aren't going to | |
| 272 make your extension accessible for absolutely everyone, | |
| 273 but they're a good starting point. | |
| 274 </p> | |
| 275 <h2 id="controls">Use accessible UI controls</h2> | |
| 276 <p> | |
| 277 First, use UI controls that support accessibility. | |
| 278 The easiest way to get an accessible control is to use a | |
| 279 standard HTML control. | |
| 280 If you need to build a custom control, | |
| 281 keep in mind that it's much easier | |
| 282 to make the control accessible from the beginning | |
| 283 than to go back and add accessibility support later. | |
| 284 </p> | |
| 285 <h3 id="htmlcontrols">Standard controls</h3> | |
| 286 <p> | |
| 287 Try to use standard HTML UI controls whenever possible. | |
| 288 Standard HTML controls (shown in the following figure) | |
| 289 are keyboard accessible, scale easily, | |
| 290 and are generally understood by screen readers. | |
| 291 </p> | |
| 292 <img src="images/a11y/standard-html-controls.png" width="550" height="350" alt="
Screenshots and code for button, checkbox, radio, text, select/option, and link"
> | |
| 293 <h3 id="aria">ARIA in custom controls</h3> | |
| 294 <p> | |
| 295 ARIA is a specification for making UI controls accessible to screen readers | |
| 296 by means of a standard set of DOM attributes. | |
| 297 These attributes provide clues to the screen reader | |
| 298 about the function and current state of controls on a web page. | |
| 299 ARIA is a | |
| 300 <a href=" http://www.w3.org/WAI/intro/aria">work in progress at the W3C</a>. | |
| 301 </p> | |
| 302 <p> | |
| 303 Adding ARIA support to custom controls in your extension | |
| 304 involves modifying DOM elements to add attributes | |
| 305 Google Chrome uses | |
| 306 to raise events during user interaction. | |
| 307 Screen readers respond to these events | |
| 308 and describe the function of the control. | |
| 309 The DOM attributes specified by ARIA are classified into | |
| 310 <em>roles</em>, <em>states</em>, and <em>properties</em>. | |
| 311 </p> | |
| 312 <p> | |
| 313 The ARIA attribute <em>role</em> | |
| 314 is an indication of the control type | |
| 315 and describes the way the control should behave. | |
| 316 It is expressed with the DOM attribute <code>role</code>, | |
| 317 with a value set to one of the pre-defined ARIA role strings. | |
| 318 Because ARIA roles are static, | |
| 319 the role attribute should not change its value. | |
| 320 </p> | |
| 321 <p> | |
| 322 The <a href="http://www.w3.org/WAI/PF/aria/roles">ARIA Role Specification</a> | |
| 323 holds detailed information on how to pick the correct role. | |
| 324 For example, if your extension includes a toolbar, | |
| 325 set the <code>role</code> attribute of the toolbar's DOM element as follows: | |
| 326 </p> | |
| 327 <pre><div role="toolbar"> | |
| 328 </pre> | |
| 329 <p> | |
| 330 ARIA attributes are also used to describe | |
| 331 the current state and properties of controls of a particular role. | |
| 332 A <em>state</em> is dynamic and should be updated during user interaction. | |
| 333 For example, a control with the role "checkbox" | |
| 334 could be in the states "checked" or "unchecked". | |
| 335 A <em>property</em> is not generally dynamic, | |
| 336 but is similar to a state | |
| 337 in that it expresses specific information about a control. | |
| 338 For more information on ARIA states and properties, | |
| 339 refer to the | |
| 340 <a href="http://www.w3.org/TR/wai-aria/states_and_properties">W3C States and Pro
perties specification</a>. | |
| 341 </p> | |
| 342 <p class="note"> | |
| 343 <b>Note:</b> | |
| 344 You don't have to use | |
| 345 all of the states and properties available for a particular role. | |
| 346 </p> | |
| 347 <p> | |
| 348 Here's an example of adding | |
| 349 the ARIA property <code>aria-activedescendant</code> | |
| 350 to the example toolbar control: | |
| 351 </p> | |
| 352 <pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> | |
| 353 </pre> | |
| 354 <p> | |
| 355 The | |
| 356 <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescenda
nt"><code>aria-activedescendant</code></a> | |
| 357 property specifies which child of the toolbar receives focus | |
| 358 when the toolbar receives focus. | |
| 359 In this example, the toolbar's first button | |
| 360 (which has the <code>id</code> "button1") | |
| 361 is the child that gets focus. | |
| 362 The code <code>tabindex="0"</code> | |
| 363 specifies that the toolbar | |
| 364 receives focus in document order. | |
| 365 </p> | |
| 366 <p> | |
| 367 Here's the complete specification for the example toolbar: | |
| 368 </p> | |
| 369 <pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> | |
| 370 <img src="buttoncut.png" role="button" alt="cut" id="button1"> | |
| 371 <img src="buttoncopy.png" role="button" alt="copy" id="button2"> | |
| 372 <img src="buttonpaste.png" role="button" alt="paste" id="button3"> | |
| 373 </div> | |
| 374 </pre> | |
| 375 <p> | |
| 376 Once ARIA roles, states, and properties are added to the DOM of a control, | |
| 377 Google Chrome raises the appropriate events to the screen reader. | |
| 378 Because ARIA support is still a work in progress, | |
| 379 Google Chrome might not raise an event for every ARIA property, | |
| 380 and screen readers might not recognize all of the events being raised. | |
| 381 You can find more information on ARIA support in Google Chrome in the | |
| 382 <a href="http://www.chromium.org/developers/design-documents/accessibility#TOC-W
AI-ARIA-Support">Chromium Accessibility Design Document</a>. | |
| 383 </p> | |
| 384 <p> | |
| 385 For a quick tutorial on adding ARIA controls to custom controls, see | |
| 386 <a href="http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/">Dave Raggett's pres
entation from WWW2010</a>. | |
| 387 </p><h3 id="focus">Focus in custom controls</h3> | |
| 388 <p> | |
| 389 Make sure that operation and navigation controls of your extension | |
| 390 can receive keyboard focus. | |
| 391 Operation controls might include | |
| 392 buttons, trees, and list boxes. | |
| 393 Navigation controls might include tabs and menu bars. | |
| 394 </p> | |
| 395 <p> | |
| 396 By default, the only elements in the HTML DOM | |
| 397 that can receive keyboard focus | |
| 398 are anchors, buttons, and form controls. | |
| 399 However, setting the HTML attribute <code>tabIndex</code> to <code>0</code> | |
| 400 places DOM elements in the default tab sequence, | |
| 401 enabling them to receive keyboard focus. | |
| 402 For example: | |
| 403 </p> | |
| 404 <pre><em>element</em>.tabIndex = 0 | |
| 405 </pre> | |
| 406 <p> | |
| 407 Setting <code>tabIndex = -1</code> removes the element from the tab sequence | |
| 408 but still allows the element to receive keyboard focus programmatically. | |
| 409 Here's an example of setting keyboard focus: | |
| 410 </p> | |
| 411 <pre><em>element</em>.focus(); | |
| 412 </pre> | |
| 413 <p> | |
| 414 Ensuring that your custom UI controls include keyboard support | |
| 415 is important not only for users who don't use the mouse | |
| 416 but also because screen readers use keyboard focus | |
| 417 to determine which control to describe. | |
| 418 </p> | |
| 419 <h2 id="keyboard"> Support keyboard access </h2> | |
| 420 <p> | |
| 421 People should be able to use your extension | |
| 422 even if they can't or don't want to use a mouse. | |
| 423 </p> | |
| 424 <h3 id="navigation"> Navigation </h3> | |
| 425 <p> | |
| 426 Check that the user can navigate between | |
| 427 the different parts of your extension | |
| 428 without using the mouse. | |
| 429 Also check that any popups on page actions or browser actions | |
| 430 are keyboard navigable. | |
| 431 </p> | |
| 432 <p id="builtin"> | |
| 433 On Windows, you can use <b>Shift+Alt+T</b> | |
| 434 to switch the keyboard focus to the toolbar, | |
| 435 which lets you navigate to the icons of page actions and browser actions. | |
| 436 The help topic | |
| 437 <a href="http://www.google.com/support/chrome/bin/static.py?hl=en&page=guide
.cs&guide=25799&from=25799&rd=1">Keyboard and mouse shortcuts</a> | |
| 438 lists all of Google Chrome's keyboard shortcuts; | |
| 439 details about toolbar navigation | |
| 440 are in the section <b>Google Chrome feature shortcuts</b>. | |
| 441 </p> | |
| 442 <p class="note"> | |
| 443 <b>Note:</b> | |
| 444 The Windows version of Google Chrome 6 was the first | |
| 445 to support keyboard navigation to the toolbar. | |
| 446 Support is also planned for Linux. | |
| 447 On Mac OS X, | |
| 448 access to the toolbar is provided through VoiceOver, | |
| 449 Apple's screenreader. | |
| 450 </p> | |
| 451 <p> | |
| 452 Make sure that it's easy to see | |
| 453 which part of the interface has keyboard focus. | |
| 454 Usually a focus outline moves around the interface, | |
| 455 but if you’re using CSS heavily this outline might be suppressed | |
| 456 or the contrast might be reduced. | |
| 457 Two examples of focus outline follow. | |
| 458 </p> | |
| 459 <img src="images/a11y/focus-outline-2.png" width="200" height="75" alt="A focus
outline on a Search button"> | |
| 460 <br> | |
| 461 <img src="images/a11y/focus-outline.png" width="400" height="40" alt="A focus ou
tline on one of a series of links"> | |
| 462 <h3 id="shortcuts"> Shortcuts </h3> | |
| 463 <p> | |
| 464 Although the most common keyboard navigation strategy involves | |
| 465 using the Tab key to move focus through the extension interface, | |
| 466 that's not always the easiest or most efficient way | |
| 467 to use the interface. | |
| 468 You can make keyboard navigation easier | |
| 469 by providing explicit keyboard shortcuts. | |
| 470 </p> | |
| 471 <p> | |
| 472 To implement shortcuts, | |
| 473 connect keyboard event listeners to your controls. | |
| 474 A good reference is the DHTML Style Guide Working Group’s | |
| 475 <a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts
</a>. | |
| 476 </p> | |
| 477 <p> | |
| 478 A good way to ensure discoverability of keyboard shortcuts | |
| 479 is to list them somewhere. | |
| 480 Your extension’s | |
| 481 <a href="options.html">Options page</a> | |
| 482 might be a good place to do this. | |
| 483 </p> | |
| 484 <p> | |
| 485 For the example toolbar, | |
| 486 a simple JavaScript keyboard handler could look like the following. | |
| 487 Note how the ARIA property <code>aria-activedescendant</code> | |
| 488 is updated in response to user input | |
| 489 to reflect the current active toolbar button. | |
| 490 </p> | |
| 491 <pre><head> | |
| 492 <script> | |
| 493 function optionKeyEvent(event) { | |
| 494 var tb = event.target; | |
| 495 var buttonid; | |
| 496 ENTER_KEYCODE = 13; | |
| 497 RIGHT_KEYCODE = 39; | |
| 498 LEFT_KEYCODE = 37; | |
| 499 // Partial sample code for processing arrow keys. | |
| 500 if (event.type == "keydown") { | |
| 501 // Implement circular keyboard navigation within the toolbar buttons | |
| 502 if (event.keyCode == ENTER_KEYCODE) { | |
| 503 ExecuteButtonAction(getCurrentButtonID()); | |
| 504 <em>// getCurrentButtonID defined elsewhere </em> | |
| 505 } else if (event.keyCode == event.RIGHT_KEYCODE) { | |
| 506 // Change the active toolbar button to the one to the right (circular). | |
| 507 var buttonid = getNextButtonID(); | |
| 508 <em>// getNextButtonID defined elsewhere </em> | |
| 509 tb.setAttribute("aria-activedescendant", buttonid); | |
| 510 } else if (event.keyCode == event.LEFT_KEYCODE) { | |
| 511 // Change the active toolbar button to the one to the left (circular). | |
| 512 var buttonid = getPrevButtonID(); | |
| 513 <em>// getPrevButtonID defined elsewhere </em> | |
| 514 tb.setAttribute("aria-activedescendant", buttonid); | |
| 515 } else { | |
| 516 return true; | |
| 517 } | |
| 518 return false; | |
| 519 } | |
| 520 } | |
| 521 </script> | |
| 522 <div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1" | |
| 523 onkeydown="return optionKeyEvent(event);" | |
| 524 onkeypress="return optionKeyEvent(event);"> | |
| 525 <img src="buttoncut" role="button" alt="cut" id="button1"> | |
| 526 <img src="buttoncopy" role="button" alt="copy" id="button1"> | |
| 527 <img src="buttonpaste" role="button" alt="paste" id="button1"> | |
| 528 </div> | |
| 529 </pre> | |
| 530 <h2 id="more"> Provide accessible content </h2> | |
| 531 <p> | |
| 532 The remaining guidelines might be familiar | |
| 533 because they reflect good practices for all web content, | |
| 534 not just extensions. | |
| 535 </p> | |
| 536 <h3 id="text">Text</h3> | |
| 537 <p> | |
| 538 Evaluate your use of text in your extension. | |
| 539 Many people might find it helpful | |
| 540 if you provide a way to increase the text size within your extension. | |
| 541 If you are using keyboard shortcuts, | |
| 542 make sure that they don't interfere with | |
| 543 the zoom shortcuts built into Google Chrome. | |
| 544 </p> | |
| 545 <p> | |
| 546 As an indicator of the flexibility of your UI, | |
| 547 apply the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-c
ontrast-scale">200% test</a>. | |
| 548 If you increase the text size or page zoom 200%, | |
| 549 is your extension still usable? | |
| 550 </p> | |
| 551 <p> | |
| 552 Also, avoid baking text into images: | |
| 553 users cannot modify the size of text displayed as an image, | |
| 554 and screenreaders cannot interpret images. | |
| 555 Consider using a web font instead, | |
| 556 such as one of the fonts collected in the | |
| 557 <a href="http://code.google.com/apis/webfonts/">Google Font API</a>. | |
| 558 Text styled in a web font is searchable, | |
| 559 scales to different sizes, | |
| 560 and is accessible to people using screen readers. | |
| 561 </p> | |
| 562 <h3 id="colors">Colors</h3> | |
| 563 <p> | |
| 564 Check that there is sufficient contrast between | |
| 565 background color and foreground/text color in your extension. | |
| 566 <a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast ch
ecking tool</a> | |
| 567 checks whether your background and foreground colors | |
| 568 provide appropriate contrast. | |
| 569 If you’re developing in a Windows environment, | |
| 570 you can also enable High Contrast Mode | |
| 571 to check the contrast of your extension. | |
| 572 When evaluating contrast, | |
| 573 verify that every part of your extension that relies on | |
| 574 color or graphics to convey information is clearly visible. | |
| 575 For specific images, you can use a tool such as the | |
| 576 <a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> | |
| 577 to see what an image looks like in various forms of color deficiency. | |
| 578 </p> | |
| 579 <p> | |
| 580 You might consider offering different color themes, | |
| 581 or giving the user the ability to customize the color scheme | |
| 582 for better contrast. | |
| 583 </p> | |
| 584 <h3 id="sound">Sound</h3> | |
| 585 <p> | |
| 586 If your extension relies upon sound or video to convey information, | |
| 587 ensure that captions or a transcript are available. | |
| 588 See the | |
| 589 <a href="http://www.dcmp.org/ciy/">Described and Captioned Media Program guideli
nes</a> | |
| 590 for more information on captions. | |
| 591 </p> | |
| 592 <h3 id="images">Images</h3> | |
| 593 <p> | |
| 594 Provide informative alt text for your images. | |
| 595 For example: | |
| 596 </p> | |
| 597 <pre><img src="img.jpg" alt="The logo for the extension"> | |
| 598 </pre> | |
| 599 <p> | |
| 600 Use the alt text to state the purpose of the image | |
| 601 rather than as a literal description of the contents of an image. | |
| 602 Spacer images or purely decorative images | |
| 603 should have blank ("") alt text | |
| 604 or be removed from the HTML entirely and placed in the CSS. | |
| 605 </p> | |
| 606 <p> | |
| 607 If you must use text in an image, | |
| 608 include the image text in the alt text. | |
| 609 A good resource to refer to is the | |
| 610 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriat
e alt text</a>. | |
| 611 </p><h2 id="examples">Examples</h2> | |
| 612 <p> | |
| 613 For an example that implements keyboard navigation and ARIA properties, see | |
| 614 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> | |
| 615 (compare it to | |
| 616 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). | |
| 617 For more examples and for help in viewing the source code, | |
| 618 see <a href="samples.html">Samples</a>. | |
| 619 </p></div> | |
| 620 <!-- API PAGE --> | |
| 621 <!-- /apiPage --> | |
| 622 </div> <!-- /gc-pagecontent --> | |
| 623 </div> <!-- /g-section --> | |
| 624 </div> <!-- /codesiteContent --> | |
| 625 <div id="gc-footer" --=""> | |
| 626 <div class="text"> | |
| 627 <p> | |
| 628 Except as otherwise <a href="http://code.google.com/policies.html#restrictions
">noted</a>, | |
| 629 the content of this page is licensed under the <a rel="license" href="http://c
reativecommons.org/licenses/by/3.0/">Creative Commons | |
| 630 Attribution 3.0 License</a>, and code samples are licensed under the | |
| 631 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
ense</a>. | |
| 632 </p> | |
| 633 <p> | |
| 634 ©2011 Google | |
| 635 </p> | |
| 636 <!-- begin analytics --> | |
| 637 <script src="https://www.google-analytics.com/urchin.js" type="text/javascript">
</script> | |
| 638 <script src="https://www.google-analytics.com/ga.js" type="text/javascript"></sc
ript> | |
| 639 <script type="text/javascript"> | |
| 640 // chrome doc tracking | |
| 641 try { | |
| 642 var engdocs = _gat._getTracker("YT-10763712-2"); | |
| 643 engdocs._trackPageview(); | |
| 644 } catch(err) {} | |
| 645 // code.google.com site-wide tracking | |
| 646 try { | |
| 647 _uacct="UA-18071-1"; | |
| 648 _uanchor=1; | |
| 649 _uff=0; | |
| 650 urchinTracker(); | |
| 651 } | |
| 652 catch(e) {/* urchinTracker not available. */} | |
| 653 </script> | |
| 654 <!-- end analytics --> | |
| 655 </div> | |
| 656 </div> <!-- /gc-footer --> | |
| 657 </div> <!-- /gc-container --> | |
| 658 </body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10642015:
Basic setup for generating app docs (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src