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> 352When you design an extension, 353try to make it as accessible as possible 354to people with disabilities such as 355visual impairment, hearing loss, and limited dexterity. 356</p> 357 358<p> 359Everyone — not just people with special needs — 360can benefit from the alternative access modes 361that accessible extensions provide. 362For example, keyboard shortcuts are important 363for blind people and people with limited dexterity, 364but they also help power users get things done 365more quickly without using a mouse. 366Captions and transcripts give deaf people access to audio content, 367but they are also useful to language learners. 368</p> 369 370<p> 371People can interact with your extension in a variety of ways. 372They might use a standard monitor, keyboard, and mouse, 373or they might use a screen magnifier and just a keyboard. 374Another possibility is a <em>screen reader</em>, 375an assistive application tool that interprets 376what's displayed onscreen 377for a blind or visually impaired user. 378A screen reader might speak out loud or produce Braille output. 379</p> 380 381<p> 382Although you can't predict what tools people will use, 383by following a few simple guidelines 384you can write an extension that is 385more likely to be accessible to more people. 386The guidelines on this page aren't going to 387make your extension accessible for absolutely everyone, 388but they're a good starting point. 389</p> 390 391 392<h2 id="controls">Use accessible UI controls</h2> 393 394<p> 395First, use UI controls that support accessibility. 396The easiest way to get an accessible control is to use a 397standard HTML control. 398If you need to build a custom control, 399keep in mind that it's much easier 400to make the control accessible from the beginning 401than to go back and add accessibility support later. 402</p> 403 404<h3 id="htmlcontrols">Standard controls</h3> 405 406<p> 407Try to use standard HTML UI controls whenever possible. 408Standard HTML controls (shown in the following figure) 409are keyboard accessible, scale easily, 410and 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> 419ARIA is a specification for making UI controls accessible to screen readers 420by means of a standard set of DOM attributes. 421These attributes provide clues to the screen reader 422about the function and current state of controls on a web page. 423ARIA is a 424<a href=" http://www.w3.org/WAI/intro/aria">work in progress at the W3C</a>. 425</p> 426 427<p> 428Adding ARIA support to custom controls in your extension 429involves modifying DOM elements to add attributes 430Google Chrome uses 431to raise events during user interaction. 432Screen readers respond to these events 433and describe the function of the control. 434The DOM attributes specified by ARIA are classified into 435<em>roles</em>, <em>states</em>, and <em>properties</em>. 436</p> 437 438<p> 439The ARIA attribute <em>role</em> 440is an indication of the control type 441and describes the way the control should behave. 442It is expressed with the DOM attribute <code>role</code>, 443with a value set to one of the pre-defined ARIA role strings. 444Because ARIA roles are static, 445the role attribute should not change its value. 446</p> 447 448<p> 449The <a href="http://www.w3.org/WAI/PF/aria/roles">ARIA Role Specification</a> 450holds detailed information on how to pick the correct role. 451For example, if your extension includes a toolbar, 452set 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> 459ARIA attributes are also used to describe 460the current state and properties of controls of a particular role. 461A <em>state</em> is dynamic and should be updated during user interaction. 462For example, a control with the role "checkbox" 463could be in the states "checked" or "unchecked". 464A <em>property</em> is not generally dynamic, 465but is similar to a state 466in that it expresses specific information about a control. 467For more information on ARIA states and properties, 468refer 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> 475You don't have to use 476all of the states and properties available for a particular role. 477</p> 478 479<p> 480Here's an example of adding 481the ARIA property <code>aria-activedescendant</code> 482to the example toolbar control: 483</p> 484 485<pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> 486</pre> 487 488<p> 489The 490<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant"><code>aria-activedescendant</code></a> 491property specifies which child of the toolbar receives focus 492when the toolbar receives focus. 493In this example, the toolbar's first button 494(which has the <code>id</code> "button1") 495is the child that gets focus. 496The code <code>tabindex="0"</code> 497specifies that the toolbar 498receives focus in document order. 499</p> 500 501<p> 502Here'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> 513Once ARIA roles, states, and properties are added to the DOM of a control, 514Google Chrome raises the appropriate events to the screen reader. 515Because ARIA support is still a work in progress, 516Google Chrome might not raise an event for every ARIA property, 517and screen readers might not recognize all of the events being raised. 518You 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> 523For 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> 529Make sure that operation and navigation controls of your extension 530can receive keyboard focus. 531Operation controls might include 532buttons, trees, and list boxes. 533Navigation controls might include tabs and menu bars. 534</p> 535 536<p> 537By default, the only elements in the HTML DOM 538that can receive keyboard focus 539are anchors, buttons, and form controls. 540However, setting the HTML attribute <code>tabIndex</code> to <code>0</code> 541places DOM elements in the default tab sequence, 542enabling them to receive keyboard focus. 543For example: 544</p> 545 546<pre><em>element</em>.tabIndex = 0 547</pre> 548 549<p> 550Setting <code>tabIndex = -1</code> removes the element from the tab sequence 551but still allows the element to receive keyboard focus programmatically. 552Here's an example of setting keyboard focus: 553</p> 554 555<pre><em>element</em>.focus(); 556</pre> 557 558<p> 559Ensuring that your custom UI controls include keyboard support 560is important not only for users who don't use the mouse 561but also because screen readers use keyboard focus 562to determine which control to describe. 563</p> 564 565<h2 id="keyboard"> Support keyboard access </h2> 566 567<p> 568People should be able to use your extension 569even if they can't or don't want to use a mouse. 570</p> 571 572<h3 id="navigation"> Navigation </h3> 573 574<p> 575Check that the user can navigate between 576the different parts of your extension 577without using the mouse. 578Also check that any popups on page actions or browser actions 579are keyboard navigable. 580</p> 581 582<p id="builtin"> 583On Windows, you can use <b>Shift+Alt+T</b> 584to switch the keyboard focus to the toolbar, 585which lets you navigate to the icons of page actions and browser actions. 586The 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> 588lists all of Google Chrome's keyboard shortcuts; 589details about toolbar navigation 590are in the section <b>Google Chrome feature shortcuts</b>. 591</p> 592 593<p class="note"> 594<b>Note:</b> 595The Windows version of Google Chrome 6 was the first 596to support keyboard navigation to the toolbar. 597Support is also planned for Linux. 598On Mac OS X, 599access to the toolbar is provided through VoiceOver, 600Apple's screenreader. 601</p> 602 603<p> 604Make sure that it's easy to see 605which part of the interface has keyboard focus. 606Usually a focus outline moves around the interface, 607but if you’re using CSS heavily this outline might be suppressed 608or the contrast might be reduced. 609Two 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> 620Although the most common keyboard navigation strategy involves 621using the Tab key to move focus through the extension interface, 622that's not always the easiest or most efficient way 623to use the interface. 624You can make keyboard navigation easier 625by providing explicit keyboard shortcuts. 626</p> 627 628<p> 629To implement shortcuts, 630connect keyboard event listeners to your controls. 631A good reference is the DHTML Style Guide Working Group’s 632<a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts</a>. 633</p> 634 635<p> 636A good way to ensure discoverability of keyboard shortcuts 637is to list them somewhere. 638Your extension’s 639<a href="options.html">Options page</a> 640might be a good place to do this. 641</p> 642 643<p> 644For the example toolbar, 645a simple JavaScript keyboard handler could look like the following. 646Note how the ARIA property <code>aria-activedescendant</code> 647is updated in response to user input 648to 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> 698The remaining guidelines might be familiar 699because they reflect good practices for all web content, 700not just extensions. 701</p> 702 703<h3 id="text">Text</h3> 704 705<p> 706Evaluate your use of text in your extension. 707Many people might find it helpful 708if you provide a way to increase the text size within your extension. 709If you are using keyboard shortcuts, 710make sure that they don't interfere with 711the zoom shortcuts built into Google Chrome. 712</p> 713 714<p> 715As an indicator of the flexibility of your UI, 716apply the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale">200% test</a>. 717If you increase the text size or page zoom 200%, 718is your extension still usable? 719</p> 720 721<p> 722Also, avoid baking text into images: 723users cannot modify the size of text displayed as an image, 724and screenreaders cannot interpret images. 725Consider using a web font instead, 726such as one of the fonts collected in the 727<a href="http://code.google.com/apis/webfonts/">Google Font API</a>. 728Text styled in a web font is searchable, 729scales to different sizes, 730and is accessible to people using screen readers. 731</p> 732 733<h3 id="colors">Colors</h3> 734 735<p> 736Check that there is sufficient contrast between 737background color and foreground/text color in your extension. 738<a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast checking tool</a> 739checks whether your background and foreground colors 740provide appropriate contrast. 741If you’re developing in a Windows environment, 742you can also enable High Contrast Mode 743to check the contrast of your extension. 744When evaluating contrast, 745verify that every part of your extension that relies on 746color or graphics to convey information is clearly visible. 747For specific images, you can use a tool such as the 748<a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> 749to see what an image looks like in various forms of color deficiency. 750</p> 751 752<p> 753You might consider offering different color themes, 754or giving the user the ability to customize the color scheme 755for better contrast. 756</p> 757 758<h3 id="sound">Sound</h3> 759 760<p> 761If your extension relies upon sound or video to convey information, 762ensure that captions or a transcript are available. 763See the 764<a href="http://www.dcmp.org/ciy/">Described and Captioned Media Program guidelines</a> 765for more information on captions. 766</p> 767 768<h3 id="images">Images</h3> 769 770<p> 771Provide informative alt text for your images. 772For example: 773</p> 774 775<pre><img src="img.jpg" alt="The logo for the extension"> 776</pre> 777 778<p> 779Use the alt text to state the purpose of the image 780rather than as a literal description of the contents of an image. 781Spacer images or purely decorative images 782should have blank ("") alt text 783or be removed from the HTML entirely and placed in the CSS. 784</p> 785 786<p> 787If you must use text in an image, 788include the image text in the alt text. 789A 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> 795For 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>). 799For more examples and for help in viewing the source code, 800see <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
