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/jstemplate_compiled.js"> 15 </script> 16 <script type="text/javascript" src="js/api_page_generator.js"></script> 17 <script type="text/javascript" src="js/bootstrap.js"></script> 18 <script type="text/javascript" src="js/sidebar.js"></script> 19 <title>Accessibility (a11y) - Google Chrome Extensions - Google Code</title></head> 20 <body> <div id="gc-container" class="labs"> 21 <div id="devModeWarning"> 22 You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files. 23 </div> 24 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> 25 <!-- In particular, sub-templates that recurse, must be used by allowing 26 jstemplate to make a copy of the template in this section which 27 are not operated on by way of the jsskip="true" --> 28 <div style="display:none"> 29 30 <!-- VALUE --> 31 <div id="valueTemplate"> 32 <dt> 33 <var>paramName</var> 34 <em> 35 36 <!-- TYPE --> 37 <div style="display:inline"> 38 ( 39 <span class="optional">optional</span> 40 <span class="enum">enumerated</span> 41 <span id="typeTemplate"> 42 <span> 43 <a> Type</a> 44 </span> 45 <span> 46 <span> 47 array of <span><span></span></span> 48 </span> 49 <span>paramType</span> 50 <span></span> 51 </span> 52 </span> 53 ) 54 </div> 55 56 </em> 57 </dt> 58 <dd class="todo"> 59 Undocumented. 60 </dd> 61 <dd> 62 Description of this parameter from the json schema. 63 </dd> 64 <dd> 65 This parameter was added in version 66 <b><span></span></b>. 67 You must omit this parameter in earlier versions, 68 and you may omit it in any version. If you require this 69 parameter, the manifest key 70 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 71 can ensure that your extension won't be run in an earlier browser version. 72 </dd> 73 74 <!-- OBJECT PROPERTIES --> 75 <dd> 76 <dl> 77 <div> 78 <div> 79 </div> 80 </div> 81 </dl> 82 </dd> 83 84 <!-- OBJECT METHODS --> 85 <dd> 86 <div></div> 87 </dd> 88 89 <!-- OBJECT EVENT FIELDS --> 90 <dd> 91 <div></div> 92 </dd> 93 94 <!-- FUNCTION PARAMETERS --> 95 <dd> 96 <div></div> 97 </dd> 98 99 </div> <!-- /VALUE --> 100 101 <div id="functionParametersTemplate"> 102 <h5>Parameters</h5> 103 <dl> 104 <div> 105 <div> 106 </div> 107 </div> 108 </dl> 109 </div> 110 </div> <!-- /SUBTEMPLATES --> 111 112 <a id="top"></a> 113 <div id="skipto"> 114 <a href="#gc-pagecontent">Skip to page content</a> 115 <a href="#gc-toc">Skip to main navigation</a> 116 </div> 117 <!-- API HEADER --> 118 <table id="header" width="100%" cellspacing="0" border="0"> 119 <tbody><tr> 120 <td valign="middle"><a href="http://code.google.com/"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></a></td> 121 <td valign="middle" width="100%" style="padding-left:0.6em;"> 122 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em"> 123 <div id="gsc-search-box"> 124 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno"> 125 <input type="hidden" name="ie" value="UTF-8"> 126 <input type="text" name="q" value="" size="55"> 127 <input class="gsc-search-button" type="submit" name="sa" value="Search"> 128 <br> 129 <span class="greytext">e.g. "page action" or "tabs"</span> 130 </div> 131 </form> 132 133 <script type="text/javascript" src="http://www.google.com/jsapi"></script> 134 <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script> 135 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script> 136 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script> 137 </td> 138 </tr> 139 </tbody></table> 140 141 <div id="codesiteContent" class=""> 142 143 <a id="gc-topnav-anchor"></a> 144 <div id="gc-topnav"> 145 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1> 146 <ul id="home" class="gc-topnav-tabs"> 147 <li id="home_link"> 148 <a href="index.html" title="Google Chrome Extensions home page">Home</a> 149 </li> 150 <li id="docs_link"> 151 <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a> 152 </li> 153 <li id="faq_link"> 154 <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a> 155 </li> 156 <li id="samples_link"> 157 <a href="samples.html" title="Sample extensions (with source code)">Samples</a> 158 </li> 159 <li id="group_link"> 160 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a> 161 </li> 162 </ul> 163 </div> <!-- end gc-topnav --> 164 165 <div class="g-section g-tpl-170"> 166 <!-- SIDENAV --> 167 <div class="g-unit g-first" id="gc-toc"> 168 <ul> 169 <li><a href="getstarted.html">Getting Started</a></li> 170 <li><a href="overview.html">Overview</a></li> 171 <li><a href="whats_new.html">What's New?</a></li> 172 <li><h2><a href="devguide.html">Developer's Guide</a></h2> 173 <ul> 174 <li>Browser UI 175 <ul> 176 <li><a href="browserAction.html">Browser Actions</a></li> 177 <li><a href="contextMenus.html">Context Menus</a></li> 178 <li><a href="notifications.html">Desktop Notifications</a></li> 179 <li><a href="omnibox.html">Omnibox</a></li> 180 <li><a href="options.html">Options Pages</a></li> 181 <li><a href="override.html">Override Pages</a></li> 182 <li><a href="pageAction.html">Page Actions</a></li> 183 </ul> 184 </li> 185 <li>Browser Interaction 186 <ul> 187 <li><a href="bookmarks.html">Bookmarks</a></li> 188 <li><a href="cookies.html">Cookies</a></li> 189 <li><a href="events.html">Events</a></li> 190 <li><a href="history.html">History</a></li> 191 <li><a href="management.html">Management</a></li> 192 <li><a href="tabs.html">Tabs</a></li> 193 <li><a href="windows.html">Windows</a></li> 194 </ul> 195 </li> 196 <li>Implementation 197 <ul> 198 <li class="leftNavSelected">Accessibility</li> 199 <li><a href="background_pages.html">Background Pages</a></li> 200 <li><a href="content_scripts.html">Content Scripts</a></li> 201 <li><a href="xhr.html">Cross-Origin XHR</a></li> 202 <li><a href="idle.html">Idle</a></li> 203 <li><a href="i18n.html">Internationalization</a></li> 204 <li><a href="messaging.html">Message Passing</a></li> 205 <li><a href="npapi.html">NPAPI Plugins</a></li> 206 </ul> 207 </li> 208 <li>Finishing 209 <ul> 210 <li><a href="hosting.html">Hosting</a></li> 211 <li><a href="external_extensions.html">Other Deployment Options</a></li> 212 </ul> 213 </li> 214 </ul> 215 </li> 216 <li><h2><a href="apps.html">Packaged Apps</a></h2></li> 217 <li><h2><a href="tutorials.html">Tutorials</a></h2> 218 <ul> 219 <li><a href="tut_debugging.html">Debugging</a></li> 220 <li><a href="tut_analytics.html">Google Analytics</a></li> 221 <li><a href="tut_oauth.html">OAuth</a></li> 222 </ul> 223 </li> 224 <li><h2>Reference</h2> 225 <ul> 226 <li>Formats 227 <ul> 228 <li><a href="manifest.html">Manifest Files</a></li> 229 <li><a href="match_patterns.html">Match Patterns</a></li> 230 </ul> 231 </li> 232 <li><a href="permission_warnings.html">Permission Warnings</a></li> 233 <li><a href="api_index.html">chrome.* APIs</a></li> 234 <li><a href="api_other.html">Other APIs</a></li> 235 </ul> 236 </li> 237 <li><h2><a href="samples.html">Samples</a></h2></li> 238 <div class="line"> </div> 239 <li><h2>More</h2> 240 <ul> 241 <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li> 242 <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li> 243 <li><a href="themes.html">Themes</a></li> 244 </ul> 245 </li> 246 </ul> 247 </div> 248 <script> 249 initToggles(); 250 </script> 251 252 <div class="g-unit" id="gc-pagecontent"> 253 <div id="pageTitle"> 254 <h1 class="page_title">Accessibility (a11y)</h1> 255 </div> 256 <!-- TABLE OF CONTENTS --> 257 <div id="toc"> 258 <h2>Contents</h2> 259 <ol> 260 <li> 261 <a href="#controls">Use accessible UI controls</a> 262 <ol> 263 <li> 264 <a href="#htmlcontrols">Standard controls</a> 265 </li><li> 266 <a href="#aria">ARIA in custom controls</a> 267 </li><li> 268 <a href="#focus">Focus in custom controls</a> 269 </li> 270 </ol> 271 </li><li> 272 <a href="#keyboard"> Support keyboard access </a> 273 <ol> 274 <li> 275 <a href="#navigation"> Navigation </a> 276 </li><li> 277 <a href="#shortcuts"> Shortcuts </a> 278 </li> 279 </ol> 280 </li><li> 281 <a href="#more"> Provide accessible content </a> 282 <ol> 283 <li> 284 <a href="#text">Text</a> 285 </li><li> 286 <a href="#colors">Colors</a> 287 </li><li> 288 <a href="#sound">Sound</a> 289 </li><li> 290 <a href="#images">Images</a> 291 </li> 292 </ol> 293 </li><li> 294 <a href="#examples">Examples</a> 295 <ol> 296 <li style="display: none; "> 297 <a>h3Name</a> 298 </li> 299 </ol> 300 </li> 301 <li style="display: none; "> 302 <a href="#apiReference">API reference</a> 303 <ol> 304 <li> 305 <a href="#properties">Properties</a> 306 <ol> 307 <li> 308 <a href="#property-anchor">propertyName</a> 309 </li> 310 </ol> 311 </li> 312 <li> 313 <a>Methods</a> 314 <ol> 315 <li> 316 <a href="#method-anchor">methodName</a> 317 </li> 318 </ol> 319 </li> 320 <li> 321 <a>Events</a> 322 <ol> 323 <li> 324 <a href="#event-anchor">eventName</a> 325 </li> 326 </ol> 327 </li> 328 <li> 329 <a href="#types">Types</a> 330 <ol> 331 <li> 332 <a href="#id-anchor">id</a> 333 </li> 334 </ol> 335 </li> 336 </ol> 337 </li> 338 </ol> 339 </div> 340 <!-- /TABLE OF CONTENTS --> 341 342 <!-- Standard content lead-in for experimental API pages --> 343 <p id="classSummary" style="display: none; "> 344 For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page. 345 </p> 346 347 <!-- STATIC CONTENT PLACEHOLDER --> 348 <div id="static"><div id="pageData-name" class="pageData">Accessibility (a11y)</div> 349 <div id="pageData-showTOC" class="pageData">true</div> 350 351 <p> 352 When you design an extension, 353 try to make it as accessible as possible 354 to people with disabilities such as 355 visual impairment, hearing loss, and limited dexterity. 356 </p> 357 358 <p> 359 Everyone not just people with special needs 360 can benefit from the alternative access modes 361 that accessible extensions provide. 362 For example, keyboard shortcuts are important 363 for blind people and people with limited dexterity, 364 but they also help power users get things done 365 more quickly without using a mouse. 366 Captions and transcripts give deaf people access to audio content, 367 but they are also useful to language learners. 368 </p> 369 370 <p> 371 People can interact with your extension in a variety of ways. 372 They might use a standard monitor, keyboard, and mouse, 373 or they might use a screen magnifier and just a keyboard. 374 Another possibility is a <em>screen reader</em>, 375 an assistive application tool that interprets 376 what's displayed onscreen 377 for a blind or visually impaired user. 378 A screen reader might speak out loud or produce Braille output. 379 </p> 380 381 <p> 382 Although you can't predict what tools people will use, 383 by following a few simple guidelines 384 you can write an extension that is 385 more likely to be accessible to more people. 386 The guidelines on this page aren't going to 387 make your extension accessible for absolutely everyone, 388 but they're a good starting point. 389 </p> 390 391 392 <h2 id="controls">Use accessible UI controls</h2> 393 394 <p> 395 First, use UI controls that support accessibility. 396 The easiest way to get an accessible control is to use a 397 standard HTML control. 398 If you need to build a custom control, 399 keep in mind that it's much easier 400 to make the control accessible from the beginning 401 than to go back and add accessibility support later. 402 </p> 403 404 <h3 id="htmlcontrols">Standard controls</h3> 405 406 <p> 407 Try to use standard HTML UI controls whenever possible. 408 Standard HTML controls (shown in the following figure) 409 are keyboard accessible, scale easily, 410 and are generally understood by screen readers. 411 </p> 412 413 <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"> 414 415 416 <h3 id="aria">ARIA in custom controls</h3> 417 418 <p> 419 ARIA is a specification for making UI controls accessible to screen readers 420 by means of a standard set of DOM attributes. 421 These attributes provide clues to the screen reader 422 about the function and current state of controls on a web page. 423 ARIA is a 424 <a href=" http://www.w3.org/WAI/intro/aria">work in progress at the W3C</a>. 425 </p> 426 427 <p> 428 Adding ARIA support to custom controls in your extension 429 involves modifying DOM elements to add attributes 430 Google Chrome uses 431 to raise events during user interaction. 432 Screen readers respond to these events 433 and describe the function of the control. 434 The DOM attributes specified by ARIA are classified into 435 <em>roles</em>, <em>states</em>, and <em>properties</em>. 436 </p> 437 438 <p> 439 The ARIA attribute <em>role</em> 440 is an indication of the control type 441 and describes the way the control should behave. 442 It is expressed with the DOM attribute <code>role</code>, 443 with a value set to one of the pre-defined ARIA role strings. 444 Because ARIA roles are static, 445 the role attribute should not change its value. 446 </p> 447 448 <p> 449 The <a href="http://www.w3.org/WAI/PF/aria/roles">ARIA Role Specification</a> 450 holds detailed information on how to pick the correct role. 451 For example, if your extension includes a toolbar, 452 set the <code>role</code> attribute of the toolbar's DOM element as follows: 453 </p> 454 455 <pre><div role="toolbar"> 456 </pre> 457 458 <p> 459 ARIA attributes are also used to describe 460 the current state and properties of controls of a particular role. 461 A <em>state</em> is dynamic and should be updated during user interaction. 462 For example, a control with the role "checkbox" 463 could be in the states "checked" or "unchecked". 464 A <em>property</em> is not generally dynamic, 465 but is similar to a state 466 in that it expresses specific information about a control. 467 For more information on ARIA states and properties, 468 refer to the 469 <a href="http://www.w3.org/TR/wai-aria/states_and_properties">W3C States and Properties specification</a>. 470 </p> 471 472 473 <p class="note"> 474 <b>Note:</b> 475 You don't have to use 476 all of the states and properties available for a particular role. 477 </p> 478 479 <p> 480 Here's an example of adding 481 the ARIA property <code>aria-activedescendant</code> 482 to the example toolbar control: 483 </p> 484 485 <pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> 486 </pre> 487 488 <p> 489 The 490 <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant"><code>aria-activedescendant</code></a> 491 property specifies which child of the toolbar receives focus 492 when the toolbar receives focus. 493 In this example, the toolbar's first button 494 (which has the <code>id</code> "button1") 495 is the child that gets focus. 496 The code <code>tabindex="0"</code> 497 specifies that the toolbar 498 receives focus in document order. 499 </p> 500 501 <p> 502 Here's the complete specification for the example toolbar: 503 </p> 504 505 <pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> 506 <img src="buttoncut.png" role="button" alt="cut" id="button1"> 507 <img src="buttoncopy.png" role="button" alt="copy" id="button2"> 508 <img src="buttonpaste.png" role="button" alt="paste" id="button3"> 509 </div> 510 </pre> 511 512 <p> 513 Once ARIA roles, states, and properties are added to the DOM of a control, 514 Google Chrome raises the appropriate events to the screen reader. 515 Because ARIA support is still a work in progress, 516 Google Chrome might not raise an event for every ARIA property, 517 and screen readers might not recognize all of the events being raised. 518 You can find more information on ARIA support in Google Chrome in the 519 <a href="http://www.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chromium Accessibility Design Document</a>. 520 </p> 521 522 <p> 523 For a quick tutorial on adding ARIA controls to custom controls, see 524 <a href="http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/">Dave Raggett's presentation from WWW2010</a>. 525 526 </p><h3 id="focus">Focus in custom controls</h3> 527 528 <p> 529 Make sure that operation and navigation controls of your extension 530 can receive keyboard focus. 531 Operation controls might include 532 buttons, trees, and list boxes. 533 Navigation controls might include tabs and menu bars. 534 </p> 535 536 <p> 537 By default, the only elements in the HTML DOM 538 that can receive keyboard focus 539 are anchors, buttons, and form controls. 540 However, setting the HTML attribute <code>tabIndex</code> to <code>0</code> 541 places DOM elements in the default tab sequence, 542 enabling them to receive keyboard focus. 543 For example: 544 </p> 545 546 <pre><em>element</em>.tabIndex = 0 547 </pre> 548 549 <p> 550 Setting <code>tabIndex = -1</code> removes the element from the tab sequence 551 but still allows the element to receive keyboard focus programmatically. 552 Here's an example of setting keyboard focus: 553 </p> 554 555 <pre><em>element</em>.focus(); 556 </pre> 557 558 <p> 559 Ensuring that your custom UI controls include keyboard support 560 is important not only for users who don't use the mouse 561 but also because screen readers use keyboard focus 562 to determine which control to describe. 563 </p> 564 565 <h2 id="keyboard"> Support keyboard access </h2> 566 567 <p> 568 People should be able to use your extension 569 even if they can't or don't want to use a mouse. 570 </p> 571 572 <h3 id="navigation"> Navigation </h3> 573 574 <p> 575 Check that the user can navigate between 576 the different parts of your extension 577 without using the mouse. 578 Also check that any popups on page actions or browser actions 579 are keyboard navigable. 580 </p> 581 582 <p id="builtin"> 583 On Windows, you can use <b>Shift+Alt+T</b> 584 to switch the keyboard focus to the toolbar, 585 which lets you navigate to the icons of page actions and browser actions. 586 The help topic 587 <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> 588 lists all of Google Chrome's keyboard shortcuts; 589 details about toolbar navigation 590 are in the section <b>Google Chrome feature shortcuts</b>. 591 </p> 592 593 <p class="note"> 594 <b>Note:</b> 595 The Windows version of Google Chrome 6 was the first 596 to support keyboard navigation to the toolbar. 597 Support is also planned for Linux. 598 On Mac OS X, 599 access to the toolbar is provided through VoiceOver, 600 Apple's screenreader. 601 </p> 602 603 <p> 604 Make sure that it's easy to see 605 which part of the interface has keyboard focus. 606 Usually a focus outline moves around the interface, 607 but if youre using CSS heavily this outline might be suppressed 608 or the contrast might be reduced. 609 Two examples of focus outline follow. 610 </p> 611 612 <img src="images/a11y/focus-outline-2.png" width="200" height="75" alt="A focus outline on a Search button"> 613 <br> 614 <img src="images/a11y/focus-outline.png" width="400" height="40" alt="A focus outline on one of a series of links"> 615 616 617 <h3 id="shortcuts"> Shortcuts </h3> 618 619 <p> 620 Although the most common keyboard navigation strategy involves 621 using the Tab key to move focus through the extension interface, 622 that's not always the easiest or most efficient way 623 to use the interface. 624 You can make keyboard navigation easier 625 by providing explicit keyboard shortcuts. 626 </p> 627 628 <p> 629 To implement shortcuts, 630 connect keyboard event listeners to your controls. 631 A good reference is the DHTML Style Guide Working Groups 632 <a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts</a>. 633 </p> 634 635 <p> 636 A good way to ensure discoverability of keyboard shortcuts 637 is to list them somewhere. 638 Your extensions 639 <a href="options.html">Options page</a> 640 might be a good place to do this. 641 </p> 642 643 <p> 644 For the example toolbar, 645 a simple JavaScript keyboard handler could look like the following. 646 Note how the ARIA property <code>aria-activedescendant</code> 647 is updated in response to user input 648 to reflect the current active toolbar button. 649 </p> 650 651 <pre><head> 652 <script> 653 function optionKeyEvent(event) { 654 var tb = event.target; 655 var buttonid; 656 657 ENTER_KEYCODE = 13; 658 RIGHT_KEYCODE = 39; 659 LEFT_KEYCODE = 37; 660 // Partial sample code for processing arrow keys. 661 if (event.type == "keydown") { 662 // Implement circular keyboard navigation within the toolbar buttons 663 if (event.keyCode == ENTER_KEYCODE) { 664 ExecuteButtonAction(getCurrentButtonID()); 665 <em>// getCurrentButtonID defined elsewhere </em> 666 } else if (event.keyCode == event.RIGHT_KEYCODE) { 667 // Change the active toolbar button to the one to the right (circular). 668 var buttonid = getNextButtonID(); 669 <em>// getNextButtonID defined elsewhere </em> 670 tb.setAttribute("aria-activedescendant", buttonid); 671 } else if (event.keyCode == event.LEFT_KEYCODE) { 672 // Change the active toolbar button to the one to the left (circular). 673 var buttonid = getPrevButtonID(); 674 <em>// getPrevButtonID defined elsewhere </em> 675 tb.setAttribute("aria-activedescendant", buttonid); 676 } else { 677 return true; 678 } 679 return false; 680 } 681 } 682 </script> 683 684 <div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1" 685 onkeydown="return optionKeyEvent(event);" 686 onkeypress="return optionKeyEvent(event);"> 687 <img src="buttoncut" role="button" alt="cut" id="button1"> 688 <img src="buttoncopy" role="button" alt="copy" id="button1"> 689 <img src="buttonpaste" role="button" alt="paste" id="button1"> 690 </div> 691 </pre> 692 693 694 <h2 id="more"> Provide accessible content </h2> 695 696 697 <p> 698 The remaining guidelines might be familiar 699 because they reflect good practices for all web content, 700 not just extensions. 701 </p> 702 703 <h3 id="text">Text</h3> 704 705 <p> 706 Evaluate your use of text in your extension. 707 Many people might find it helpful 708 if you provide a way to increase the text size within your extension. 709 If you are using keyboard shortcuts, 710 make sure that they don't interfere with 711 the zoom shortcuts built into Google Chrome. 712 </p> 713 714 <p> 715 As an indicator of the flexibility of your UI, 716 apply the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale">200% test</a>. 717 If you increase the text size or page zoom 200%, 718 is your extension still usable? 719 </p> 720 721 <p> 722 Also, avoid baking text into images: 723 users cannot modify the size of text displayed as an image, 724 and screenreaders cannot interpret images. 725 Consider using a web font instead, 726 such as one of the fonts collected in the 727 <a href="http://code.google.com/apis/webfonts/">Google Font API</a>. 728 Text styled in a web font is searchable, 729 scales to different sizes, 730 and is accessible to people using screen readers. 731 </p> 732 733 <h3 id="colors">Colors</h3> 734 735 <p> 736 Check that there is sufficient contrast between 737 background color and foreground/text color in your extension. 738 <a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast checking tool</a> 739 checks whether your background and foreground colors 740 provide appropriate contrast. 741 If youre developing in a Windows environment, 742 you can also enable High Contrast Mode 743 to check the contrast of your extension. 744 When evaluating contrast, 745 verify that every part of your extension that relies on 746 color or graphics to convey information is clearly visible. 747 For specific images, you can use a tool such as the 748 <a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> 749 to see what an image looks like in various forms of color deficiency. 750 </p> 751 752 <p> 753 You might consider offering different color themes, 754 or giving the user the ability to customize the color scheme 755 for better contrast. 756 </p> 757 758 <h3 id="sound">Sound</h3> 759 760 <p> 761 If your extension relies upon sound or video to convey information, 762 ensure that captions or a transcript are available. 763 See the 764 <a href="http://www.dcmp.org/ciy/">Described and Captioned Media Program guidelines</a> 765 for more information on captions. 766 </p> 767 768 <h3 id="images">Images</h3> 769 770 <p> 771 Provide informative alt text for your images. 772 For example: 773 </p> 774 775 <pre><img src="img.jpg" alt="The logo for the extension"> 776 </pre> 777 778 <p> 779 Use the alt text to state the purpose of the image 780 rather than as a literal description of the contents of an image. 781 Spacer images or purely decorative images 782 should have blank ("") alt text 783 or be removed from the HTML entirely and placed in the CSS. 784 </p> 785 786 <p> 787 If you must use text in an image, 788 include the image text in the alt text. 789 A good resource to refer to is the 790 <a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriate alt text</a>. 791 792 </p><h2 id="examples">Examples</h2> 793 794 <p> 795 For an example that implements keyboard navigation and ARIA properties, see 796 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> 797 (compare it to 798 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">examples/extensions/news</a>). 799 For more examples and for help in viewing the source code, 800 see <a href="samples.html">Samples</a>. 801 802 </p></div> 803 804 <!-- API PAGE --> 805 <div class="apiPage" style="display: none; "> 806 <a name="apiReference"></a> 807 <h2>API reference: chrome.apiname </h2> 808 809 <!-- PROPERTIES --> 810 <div class="apiGroup"> 811 <a name="properties"></a> 812 <h3 id="properties">Properties</h3> 813 814 <div> 815 <a></a> 816 <h4>getLastError</h4> 817 <div class="summary"> 818 <!-- Note: intentionally longer 80 columns --> 819 <span>chrome.extension</span><span>lastError</span> 820 </div> 821 <div> 822 </div> 823 </div> 824 825 </div> <!-- /apiGroup --> 826 827 <!-- METHODS --> 828 <div id="methodsTemplate" class="apiGroup"> 829 <a></a> 830 <h3>Methods</h3> 831 832 <!-- iterates over all functions --> 833 <div class="apiItem"> 834 <a></a> <!-- method-anchor --> 835 <h4>method name</h4> 836 837 <div class="summary"><span>void</span> 838 <!-- Note: intentionally longer 80 columns --> 839 <span>chrome.module.methodName</span>(<span><span>, </span><span></span> 840 <var><span></span></var></span>)</div> 841 842 <div class="description"> 843 <p class="todo">Undocumented.</p> 844 <p> 845 A description from the json schema def of the function goes here. 846 </p> 847 848 <!-- PARAMETERS --> 849 <h4>Parameters</h4> 850 <dl> 851 <div> 852 <div> 853 </div> 854 </div> 855 </dl> 856 857 <!-- RETURNS --> 858 <h4>Returns</h4> 859 <dl> 860 <div> 861 <div> 862 </div> 863 </div> 864 </dl> 865 866 <!-- CALLBACK --> 867 <div> 868 <div> 869 <h4>Callback function</h4> 870 <p> 871 The callback <em>parameter</em> should specify a function 872 that looks like this: 873 </p> 874 <p> 875 If you specify the <em>callback</em> parameter, it should 876 specify a function that looks like this: 877 </p> 878 879 <!-- Note: intentionally longer 80 columns --> 880 <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre> 881 <dl> 882 <div> 883 <div> 884 </div> 885 </div> 886 </dl> 887 </div> 888 </div> 889 890 <!-- MIN_VERSION --> 891 <p> 892 This function was added in version <b><span></span></b>. 893 If you require this function, the manifest key 894 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 895 can ensure that your extension won't be run in an earlier browser version. 896 </p> 897 </div> <!-- /description --> 898 899 </div> <!-- /apiItem --> 900 901 </div> <!-- /apiGroup --> 902 903 <!-- EVENTS --> 904 <div id="eventsTemplate" class="apiGroup"> 905 <a></a> 906 <h3>Events</h3> 907 <!-- iterates over all events --> 908 <div class="apiItem"> 909 <a></a> 910 <h4>event name</h4> 911 912 <div class="summary"> 913 <!-- Note: intentionally longer 80 columns --> 914 <span class="subdued">chrome.bookmarks</span><span>onEvent</span><span class="subdued">.addListener</span>(function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>); 915 </div> 916 917 <div class="description"> 918 <p class="todo">Undocumented.</p> 919 <p> 920 A description from the json schema def of the event goes here. 921 </p> 922 923 <!-- PARAMETERS --> 924 <div> 925 <h4>Parameters</h4> 926 <dl> 927 <div> 928 <div> 929 </div> 930 </div> 931 </dl> 932 </div> 933 </div> <!-- /decription --> 934 935 </div> <!-- /apiItem --> 936 937 </div> <!-- /apiGroup --> 938 939 <!-- TYPES --> 940 <div class="apiGroup"> 941 <a name="types"></a> 942 <h3 id="types">Types</h3> 943 944 <!-- iterates over all types --> 945 <div class="apiItem"> 946 <a></a> 947 <h4>type name</h4> 948 949 <div> 950 </div> 951 952 </div> <!-- /apiItem --> 953 954 </div> <!-- /apiGroup --> 955 956 </div> <!-- /apiPage --> 957 </div> <!-- /gc-pagecontent --> 958 </div> <!-- /g-section --> 959 </div> <!-- /codesiteContent --> 960 <div id="gc-footer" --=""> 961 <div class="text"> 962 <p> 963 Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, 964 the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons 965 Attribution 3.0 License</a>, and code samples are licensed under the 966 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>. 967 </p> 968 <p> 969 2011 Google 970 </p> 971 972 <!-- begin analytics --> 973 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 974 <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> 975 976 <script type="text/javascript"> 977 // chrome doc tracking 978 try { 979 var engdocs = _gat._getTracker("YT-10763712-2"); 980 engdocs._trackPageview(); 981 } catch(err) {} 982 983 // code.google.com site-wide tracking 984 try { 985 _uacct="UA-18071-1"; 986 _uanchor=1; 987 _uff=0; 988 urchinTracker(); 989 } 990 catch(e) {/* urchinTracker not available. */} 991 </script> 992 <!-- end analytics --> 993 </div> 994 </div> <!-- /gc-footer --> 995 </div> <!-- /gc-container --> 996 </body></html> 997
