Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(539)

Side by Side Diff: chrome/common/extensions/docs/static/a11y.html

Issue 3610008: Merge 61535 - A couple of accessibility-related updates/fixes.... (Closed) Base URL: svn://svn.chromium.org/chrome/branches/517/src/
Patch Set: Created 10 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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&nbsp;arrow</b>, <b>Right&nbsp;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&nbsp;menu&nbsp;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
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
OLDNEW
« no previous file with comments | « chrome/common/extensions/docs/devguide.html ('k') | chrome/common/extensions/docs/static/devguide.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698