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 |