| OLD | NEW |
| 1 <div id="pageData-name" class="pageData">Accessibility (a11y)</div> | 1 <div id="pageData-name" class="pageData">Accessibility (a11y)</div> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 When you design an extension, | 5 When you design an extension, |
| 6 try to make it as accessible as possible | 6 try to make it as accessible as possible |
| 7 to people with disabilities such as | 7 to people with disabilities such as |
| 8 visual impairment, hearing loss, and limited dexterity. | 8 visual impairment, hearing loss, and limited dexterity. |
| 9 </p> | 9 </p> |
| 10 | 10 |
| (...skipping 221 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 232 <h3 id="navigation"> Navigation </h3> | 232 <h3 id="navigation"> Navigation </h3> |
| 233 | 233 |
| 234 <p> | 234 <p> |
| 235 Check that the user can navigate between | 235 Check that the user can navigate between |
| 236 the different parts of your extension | 236 the different parts of your extension |
| 237 without using the mouse. | 237 without using the mouse. |
| 238 Also check that any popups on page actions or browser actions | 238 Also check that any popups on page actions or browser actions |
| 239 are keyboard navigable. | 239 are keyboard navigable. |
| 240 </p> | 240 </p> |
| 241 | 241 |
| 242 <p id="builtin"> |
| 243 On Windows, you can use <b>Shift+Alt+T</b> |
| 244 to switch the keyboard focus to the toolbar, |
| 245 which lets you navigate to the icons of page actions and browser actions. |
| 246 The help topic |
| 247 <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> |
| 248 lists all of Google Chrome's keyboard shortcuts; |
| 249 details about toolbar navigation |
| 250 are in the section <b>Google Chrome feature shortcuts</b>. |
| 251 </p> |
| 252 |
| 242 <p class="note"> | 253 <p class="note"> |
| 243 <b>Note:</b> | 254 <b>Note:</b> |
| 244 We're improving keyboard accessibility to Google Chrome's interface; | 255 The Windows version of Google Chrome 6 was the first |
| 245 keyboard navigation to the icons of page actions and browser actions | 256 to support keyboard navigation to the toolbar. |
| 246 is expected in Google Chrome 6. | 257 Support is also planned for Linux. |
| 247 For details, see | 258 On Mac OS X, |
| 248 <a href="#builtin">Built-in toolbar navigation</a>. | 259 access to the toolbar is provided through VoiceOver, |
| 260 Apple's screenreader. |
| 249 </p> | 261 </p> |
| 250 | 262 |
| 251 <p> | 263 <p> |
| 252 Make sure that it's easy to see | 264 Make sure that it's easy to see |
| 253 which part of the interface has keyboard focus. | 265 which part of the interface has keyboard focus. |
| 254 Usually a focus outline moves around the interface, | 266 Usually a focus outline moves around the interface, |
| 255 but if you’re using CSS heavily this outline might be suppressed | 267 but if you’re using CSS heavily this outline might be suppressed |
| 256 or the contrast might be reduced. | 268 or the contrast might be reduced. |
| 257 Two examples of focus outline follow. | 269 Two examples of focus outline follow. |
| 258 </p> | 270 </p> |
| 259 | 271 |
| 260 <img src="images/a11y/focus-outline-2.png" | 272 <img src="images/a11y/focus-outline-2.png" |
| 261 width="200" height="75" | 273 width="200" height="75" |
| 262 alt="A focus outline on a Search button"> | 274 alt="A focus outline on a Search button"> |
| 263 <br /> | 275 <br /> |
| 264 <img src="images/a11y/focus-outline.png" | 276 <img src="images/a11y/focus-outline.png" |
| 265 width="400" height="40" | 277 width="400" height="40" |
| 266 alt="A focus outline on one of a series of links"> | 278 alt="A focus outline on one of a series of links"> |
| 267 | 279 |
| 268 <h4 id="builtin"> Built-in toolbar navigation </h4> | |
| 269 | |
| 270 <p> | |
| 271 Here are the keyboard shortcuts that we expect to be in Google Chrome 6. | |
| 272 You can try them out now in the Dev channel. | |
| 273 </p> | |
| 274 | |
| 275 <p> | |
| 276 <table> | |
| 277 <tr> | |
| 278 <td> <b>Alt+Shift+T</b> </td> | |
| 279 <td> Focus on the first tool in the main toolbar. </td></tr> | |
| 280 | |
| 281 <tr><td> <b>Tab</b>, <b>Shift+Tab</b>, <b>Home</b>, <b>End</b> </td> | |
| 282 <td> Move around in the toolbar, | |
| 283 including focusing on page actions and browser actions. </td></tr> | |
| 284 | |
| 285 <tr><td> <b>Left arrow</b>, <b>Right arrow</b> </td> | |
| 286 <td> Move around in the toolbar, | |
| 287 unless you're in an edit box like the location bar, | |
| 288 where those keys are used for text editing. </td></tr> | |
| 289 | |
| 290 <tr><td> <b>Space</b>, <b>Enter</b> </td> | |
| 291 <td> Activate toolbar buttons, | |
| 292 including page actions and browser actions. </td></tr> | |
| 293 | |
| 294 <tr><td> <b>Context menu key</b>, <b>Shift+F10</b> </td> | |
| 295 <td> Open a toolbar button's context menu. </td></tr> | |
| 296 | |
| 297 <tr><td> <b>Escape</b> </td> | |
| 298 <td> Return focus from the toolbar to the previous location. </td></tr> | |
| 299 | |
| 300 <tr><td> <b>F6</b>, <b>Shift+F6</b> </td> | |
| 301 <td> Switch focus to the next keyboard-accessible pane, | |
| 302 where panes include the | |
| 303 main web content, | |
| 304 toolbar, | |
| 305 and bookmarks bar (if visible). </td></tr> | |
| 306 | |
| 307 </table> | |
| 308 </p> | |
| 309 | |
| 310 | 280 |
| 311 <h3 id="shortcuts"> Shortcuts </h3> | 281 <h3 id="shortcuts"> Shortcuts </h3> |
| 312 | 282 |
| 313 <p> | 283 <p> |
| 314 Although the most common keyboard navigation strategy involves | 284 Although the most common keyboard navigation strategy involves |
| 315 using the Tab key to move focus through the extension interface, | 285 using the Tab key to move focus through the extension interface, |
| 316 that's not always the easiest or most efficient way | 286 that's not always the easiest or most efficient way |
| 317 to use the interface. | 287 to use the interface. |
| 318 You can make keyboard navigation easier | 288 You can make keyboard navigation easier |
| 319 by providing explicit keyboard shortcuts. | 289 by providing explicit keyboard shortcuts. |
| (...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 488 <h2 id="examples">Examples</h2> | 458 <h2 id="examples">Examples</h2> |
| 489 | 459 |
| 490 <p> | 460 <p> |
| 491 For an example that implements keyboard navigation and ARIA properties, see | 461 For an example that implements keyboard navigation and ARIA properties, see |
| 492 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> | 462 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> |
| 493 (compare it to | 463 (compare it to |
| 494 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). | 464 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/extensions/news/">examples/extensions/news</a>). |
| 495 For more examples and for help in viewing the source code, | 465 For more examples and for help in viewing the source code, |
| 496 see <a href="samples.html">Samples</a>. | 466 see <a href="samples.html">Samples</a>. |
| 497 | 467 |
| OLD | NEW |