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