-
Notifications
You must be signed in to change notification settings - Fork 37
/
a11y.html
768 lines (693 loc) · 29.1 KB
/
a11y.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/stable/static/css/site.css" rel="stylesheet" type="text/css">
<link href="/stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="/stable/static/css/prettify.css" rel="stylesheet" type="text/css">
<link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
<title>Accessibility (a11y) - chrome插件中文开发文档(非官方)</title>
</head>
<body>
<a id="top"></a>
<div id="header">{Header content}</div>
<a id="gc-topnav-anchor"></a>
<div id="gc-topnav">
<h1>Google Chrome Extensions</h1>
<ul id="home" class="gc-topnav-tabs">
<li id="home_link">
<a href="index.html" title="Google Chrome Extensions home page"><div>Home</div></a>
</li>
<li id="docs_link">
<a href="docs.html" title="Official Google Chrome Extensions documentation"><div>Docs</div></a>
</li>
<li id="faq_link">
<a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>FAQ</div></a>
</li>
<li id="samples_link">
<a href="samples.html" title="Sample Extensions (with source code)"><div>Samples</div></a>
</li>
<li id="group_link">
<a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>Group</div></a>
</li>
<li id="so_link">
<a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>Questions?</div></a>
</li>
</ul>
</div>
<div id="gc-container">
<div id="gc-sidebar">
<ul
class="level1 ">
<li class="level2">
<a href="getstarted.html" class="level2 ">Getting Started</a>
</li>
<li class="level2">
<a href="overview.html" class="level2 ">Overview</a>
</li>
<li class="level2">
<a href="whats_new.html" class="level2 ">What's New?</a>
</li>
<li class="level2">
<a href="devguide.html" class="level2 ">Developer's Guide</a>
<ul
class="level2 ">
<li class="level3">
<a class="button level3">
<span class="level3">Browser UI</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="browserAction.html" class="level4 ">Browser Actions</a>
</li>
<li class="level4">
<a href="contextMenus.html" class="level4 ">Context Menus</a>
</li>
<li class="level4">
<a href="notifications.html" class="level4 ">Desktop Notifications</a>
</li>
<li class="level4">
<a href="omnibox.html" class="level4 ">Omnibox</a>
</li>
<li class="level4">
<a href="options.html" class="level4 ">Options Pages</a>
</li>
<li class="level4">
<a href="override.html" class="level4 ">Override Pages</a>
</li>
<li class="level4">
<a href="pageAction.html" class="level4 ">Page Actions</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Browser Interaction</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="bookmarks.html" class="level4 ">Bookmarks</a>
</li>
<li class="level4">
<a href="cookies.html" class="level4 ">Cookies</a>
</li>
<li class="level4">
<a href="devtools.html" class="level4 ">Developer Tools</a>
</li>
<li class="level4">
<a href="events.html" class="level4 ">Events</a>
</li>
<li class="level4">
<a href="history.html" class="level4 ">History</a>
</li>
<li class="level4">
<a href="management.html" class="level4 ">Management</a>
</li>
<li class="level4">
<a href="tabs.html" class="level4 ">Tabs</a>
</li>
<li class="level4">
<a href="windows.html" class="level4 ">Windows</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Implementation</span>
<div class="toggleIndicator level3 toggled"></div>
</a>
<ul toggleable
class="level3 ">
<li class="level4">
<a class="level4 selected">Accessibility</a>
</li>
<li class="level4">
<a href="event_pages.html" class="level4 ">Event Pages</a>
</li>
<li class="level4">
<a href="contentSecurityPolicy.html" class="level4 ">Content Security Policy</a>
</li>
<li class="level4">
<a href="content_scripts.html" class="level4 ">Content Scripts</a>
</li>
<li class="level4">
<a href="xhr.html" class="level4 ">Cross-Origin XHR</a>
</li>
<li class="level4">
<a href="i18n.html" class="level4 ">Internationalization</a>
</li>
<li class="level4">
<a href="messaging.html" class="level4 ">Message Passing</a>
</li>
<li class="level4">
<a href="permissions.html" class="level4 ">Optional Permissions</a>
</li>
<li class="level4">
<a href="npapi.html" class="level4 ">NPAPI Plugins</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Finishing</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="hosting.html" class="level4 ">Hosting</a>
</li>
<li class="level4">
<a href="external_extensions.html" class="level4 ">Other Deployment Options</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="level2">
<a href="tutorials.html" class="level2 ">Tutorials</a>
<ul
class="level2 ">
<li class="level3">
<a href="tut_migration_to_manifest_v2.html" class="level3 ">Manifest V2</a>
</li>
<li class="level3">
<a href="tut_debugging.html" class="level3 ">Debugging</a>
</li>
<li class="level3">
<a href="tut_analytics.html" class="level3 ">Google Analytics</a>
</li>
<li class="level3">
<a href="tut_oauth.html" class="level3 ">OAuth</a>
</li>
</ul>
</li>
<li class="level2">
<span class="level2">Reference</span>
<ul
class="level2 ">
<li class="level3">
<a class="button level3">
<span class="level3">Formats</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="manifest.html" class="level4 ">Manifest Files</a>
</li>
<li class="level4">
<a href="match_patterns.html" class="level4 ">Match Patterns</a>
</li>
</ul>
</li>
<li class="level3">
<a href="permission_warnings.html" class="level3 ">Permission Warnings</a>
</li>
<li class="level3">
<a href="api_index.html" class="level3 ">chrome.* APIs</a>
</li>
<li class="level3">
<a href="api_other.html" class="level3 ">Other APIs</a>
</li>
</ul>
</li>
<li class="level2">
<span class="level2">More</span>
<ul
class="level2 ">
<li class="level3">
<a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">Chrome Web Store</a>
</li>
<li class="level3">
<a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">Hosted Apps</a>
</li>
<li class="level3">
<a href="themes.html" class="level3 ">Themes</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="gc-pagecontent">
<h1 class="page_title">Accessibility (a11y)</h1>
<div id="toc">
<h2>Contents</h2>
<ol>
<li>
<a href=#controls>Use accessible UI controls</a>
<ol>
<li><a href=#htmlcontrols>Standard controls</a></li><li><a href=#aria>ARIA in custom controls</a></li><li><a href=#focus>Focus in custom controls</a></li>
</ol>
</li>
<li>
<a href=#keyboard> Support keyboard access </a>
<ol>
<li><a href=#navigation> Navigation </a></li><li><a href=#shortcuts> Shortcuts </a></li>
</ol>
</li>
<li>
<a href=#more> Provide accessible content </a>
<ol>
<li><a href=#text>Text</a></li><li><a href=#colors>Colors</a></li><li><a href=#sound>Sound</a></li><li><a href=#images>Images</a></li>
</ol>
</li>
<li>
<a href=#examples>Examples</a>
</li>
</ol>
</div>
<p>
When you design an extension,
try to make it as accessible as possible
to people with disabilities such as
visual impairment, hearing loss, and limited dexterity.
</p>
<p>
Everyone — not just people with special needs —
can benefit from the alternative access modes
that accessible extensions provide.
For example, keyboard shortcuts are important
for blind people and people with limited dexterity,
but they also help power users get things done
more quickly without using a mouse.
Captions and transcripts give deaf people access to audio content,
but they are also useful to language learners.
</p>
<p>
People can interact with your extension in a variety of ways.
They might use a standard monitor, keyboard, and mouse,
or they might use a screen magnifier and just a keyboard.
Another possibility is a <em>screen reader</em>,
an assistive application tool that interprets
what's displayed onscreen
for a blind or visually impaired user.
A screen reader might speak out loud or produce Braille output.
</p>
<p>
Although you can't predict what tools people will use,
by following a few simple guidelines
you can write an extension that is
more likely to be accessible to more people.
The guidelines on this page aren't going to
make your extension accessible for absolutely everyone,
but they're a good starting point.
</p>
<h2 id="controls">Use accessible UI controls</h2>
<p>
First, use UI controls that support accessibility.
The easiest way to get an accessible control is to use a
standard HTML control.
If you need to build a custom control,
keep in mind that it's much easier
to make the control accessible from the beginning
than to go back and add accessibility support later.
</p>
<h3 id="htmlcontrols">Standard controls</h3>
<p>
Try to use standard HTML UI controls whenever possible.
Standard HTML controls (shown in the following figure)
are keyboard accessible, scale easily,
and are generally understood by screen readers.
</p>
<img src="/stable/static/images/a11y/standard-html-controls.png"
width="550" height="350"
alt="Screenshots and code for button, checkbox, radio, text, select/option, and link">
<h3 id="aria">ARIA in custom controls</h3>
<p>
ARIA is a specification for making UI controls accessible to screen readers
by means of a standard set of DOM attributes.
These attributes provide clues to the screen reader
about the function and current state of controls on a web page.
ARIA is a
<a href=" http://www.w3.org/WAI/intro/aria">work in progress at the W3C</a>.
</p>
<p>
Adding ARIA support to custom controls in your extension
involves modifying DOM elements to add attributes
Google Chrome uses
to raise events during user interaction.
Screen readers respond to these events
and describe the function of the control.
The DOM attributes specified by ARIA are classified into
<em>roles</em>, <em>states</em>, and <em>properties</em>.
</p>
<p>
The ARIA attribute <em>role</em>
is an indication of the control type
and describes the way the control should behave.
It is expressed with the DOM attribute <code>role</code>,
with a value set to one of the pre-defined ARIA role strings.
Because ARIA roles are static,
the role attribute should not change its value.
</p>
<p>
The <a href="http://www.w3.org/WAI/PF/aria/roles">ARIA Role Specification</a>
holds detailed information on how to pick the correct role.
For example, if your extension includes a toolbar,
set the <code>role</code> attribute of the toolbar's DOM element as follows:
</p>
<pre>
<div role="toolbar">
</pre>
<p>
ARIA attributes are also used to describe
the current state and properties of controls of a particular role.
A <em>state</em> is dynamic and should be updated during user interaction.
For example, a control with the role "checkbox"
could be in the states "checked" or "unchecked".
A <em>property</em> is not generally dynamic,
but is similar to a state
in that it expresses specific information about a control.
For more information on ARIA states and properties,
refer to the
<a href="http://www.w3.org/TR/wai-aria/states_and_properties">W3C States and Properties specification</a>.
</p>
<p class="note">
<b>Note:</b>
You don't have to use
all of the states and properties available for a particular role.
</p>
<p>
Here's an example of adding
the ARIA property <code>aria-activedescendant</code>
to the example toolbar control:
</p>
<pre>
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
</pre>
<p>
The
<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant"><code>aria-activedescendant</code></a>
property specifies which child of the toolbar receives focus
when the toolbar receives focus.
In this example, the toolbar's first button
(which has the <code>id</code> "button1")
is the child that gets focus.
The code <code>tabindex="0"</code>
specifies that the toolbar
receives focus in document order.
</p>
<p>
Here's the complete specification for the example toolbar:
</p>
<pre>
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
</pre>
<p>
Once ARIA roles, states, and properties are added to the DOM of a control,
Google Chrome raises the appropriate events to the screen reader.
Because ARIA support is still a work in progress,
Google Chrome might not raise an event for every ARIA property,
and screen readers might not recognize all of the events being raised.
You can find more information on ARIA support in Google Chrome in the
<a href="http://www.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chromium Accessibility Design Document</a>.
</p>
<p>
For a quick tutorial on adding ARIA controls to custom controls, see
<a href="http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/">Dave Raggett's presentation from WWW2010</a>.
<h3 id="focus">Focus in custom controls</h3>
<p>
Make sure that operation and navigation controls of your extension
can receive keyboard focus.
Operation controls might include
buttons, trees, and list boxes.
Navigation controls might include tabs and menu bars.
</p>
<p>
By default, the only elements in the HTML DOM
that can receive keyboard focus
are anchors, buttons, and form controls.
However, setting the HTML attribute <code>tabIndex</code> to <code>0</code>
places DOM elements in the default tab sequence,
enabling them to receive keyboard focus.
For example:
</p>
<pre>
<em>element</em>.tabIndex = 0
</pre>
<p>
Setting <code>tabIndex = -1</code> removes the element from the tab sequence
but still allows the element to receive keyboard focus programmatically.
Here's an example of setting keyboard focus:
</p>
<pre>
<em>element</em>.focus();
</pre>
<p>
Ensuring that your custom UI controls include keyboard support
is important not only for users who don't use the mouse
but also because screen readers use keyboard focus
to determine which control to describe.
</p>
<h2 id="keyboard"> Support keyboard access </h2>
<p>
People should be able to use your extension
even if they can't or don't want to use a mouse.
</p>
<h3 id="navigation"> Navigation </h3>
<p>
Check that the user can navigate between
the different parts of your extension
without using the mouse.
Also check that any popups on page actions or browser actions
are keyboard navigable.
</p>
<p id="builtin">
On Windows, you can use <b>Shift+Alt+T</b>
to switch the keyboard focus to the toolbar,
which lets you navigate to the icons of page actions and browser actions.
The help topic
<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>
lists all of Google Chrome's keyboard shortcuts;
details about toolbar navigation
are in the section <b>Google Chrome feature shortcuts</b>.
</p>
<p class="note">
<b>Note:</b>
The Windows version of Google Chrome 6 was the first
to support keyboard navigation to the toolbar.
Support is also planned for Linux.
On Mac OS X,
access to the toolbar is provided through VoiceOver,
Apple's screenreader.
</p>
<p>
Make sure that it's easy to see
which part of the interface has keyboard focus.
Usually a focus outline moves around the interface,
but if you’re using CSS heavily this outline might be suppressed
or the contrast might be reduced.
Two examples of focus outline follow.
</p>
<img src="/stable/static/images/a11y/focus-outline-2.png"
width="200" height="75"
alt="A focus outline on a Search button">
<br />
<img src="/stable/static/images/a11y/focus-outline.png"
width="400" height="40"
alt="A focus outline on one of a series of links">
<h3 id="shortcuts"> Shortcuts </h3>
<p>
Although the most common keyboard navigation strategy involves
using the Tab key to move focus through the extension interface,
that's not always the easiest or most efficient way
to use the interface.
You can make keyboard navigation easier
by providing explicit keyboard shortcuts.
</p>
<p>
To implement shortcuts,
connect keyboard event listeners to your controls.
A good reference is the DHTML Style Guide Working Group’s
<a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts</a>.
</p>
<p>
A good way to ensure discoverability of keyboard shortcuts
is to list them somewhere.
Your extension’s
<a href="options.html">Options page</a>
might be a good place to do this.
</p>
<p>
For the example toolbar,
a simple JavaScript keyboard handler could look like the following.
Note how the ARIA property <code>aria-activedescendant</code>
is updated in response to user input
to reflect the current active toolbar button.
</p>
<pre>
<head>
<script>
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
<em>// getCurrentButtonID defined elsewhere </em>
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
<em>// getNextButtonID defined elsewhere </em>
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
<em>// getPrevButtonID defined elsewhere </em>
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
</script>
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
</pre>
<h2 id="more"> Provide accessible content </h2>
<p>
The remaining guidelines might be familiar
because they reflect good practices for all web content,
not just extensions.
</p>
<h3 id="text">Text</h3>
<p>
Evaluate your use of text in your extension.
Many people might find it helpful
if you provide a way to increase the text size within your extension.
If you are using keyboard shortcuts,
make sure that they don't interfere with
the zoom shortcuts built into Google Chrome.
</p>
<p>
As an indicator of the flexibility of your UI,
apply the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale">200% test</a>.
If you increase the text size or page zoom 200%,
is your extension still usable?
</p>
<p>
Also, avoid baking text into images:
users cannot modify the size of text displayed as an image,
and screenreaders cannot interpret images.
Consider using a web font instead,
such as one of the fonts collected in the
<a href="http://code.google.com/apis/webfonts/">Google Font API</a>.
Text styled in a web font is searchable,
scales to different sizes,
and is accessible to people using screen readers.
</p>
<h3 id="colors">Colors</h3>
<p>
Check that there is sufficient contrast between
background color and foreground/text color in your extension.
<a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast checking tool</a>
checks whether your background and foreground colors
provide appropriate contrast.
If you’re developing in a Windows environment,
you can also enable High Contrast Mode
to check the contrast of your extension.
When evaluating contrast,
verify that every part of your extension that relies on
color or graphics to convey information is clearly visible.
For specific images, you can use a tool such as the
<a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a>
to see what an image looks like in various forms of color deficiency.
</p>
<p>
You might consider offering different color themes,
or giving the user the ability to customize the color scheme
for better contrast.
</p>
<h3 id="sound">Sound</h3>
<p>
If your extension relies upon sound or video to convey information,
ensure that captions or a transcript are available.
See the
<a href="http://www.dcmp.org/ciy/">Described and Captioned Media Program guidelines</a>
for more information on captions.
</p>
<h3 id="images">Images</h3>
<p>
Provide informative alt text for your images.
For example:
</p>
<pre>
<img src="img.jpg" alt="The logo for the extension">
</pre>
<p>
Use the alt text to state the purpose of the image
rather than as a literal description of the contents of an image.
Spacer images or purely decorative images
should have blank ("") alt text
or be removed from the HTML entirely and placed in the CSS.
</p>
<p>
If you must use text in an image,
include the image text in the alt text.
A good resource to refer to is the
<a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriate alt text</a>.
<h2 id="examples">Examples</h2>
<p>
For an example that implements keyboard navigation and ARIA properties, see
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a>
(compare it to
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">examples/extensions/news</a>).
For more examples and for help in viewing the source code,
see <a href="samples.html">Samples</a>.
</div>
</div>
</body>
<script>
window.bootstrap = {
api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
[{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
};
</script>
<div id="gc-footer">
<div class="text">
<p>
Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
Attribution 3.0 License</a>, and code samples are licensed under the
<a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
</p>
<p>
©2012 Google
</p>
<script src="/stable/static/js/branch.js" type="text/javascript"></script>
<script src="/stable/static/js/sidebar.js" type="text/javascript"></script>
<script src="/stable/static/js/prettify.js" type="text/javascript"></script>
<script>
(function() {
// Auto syntax highlight all pre tags.
var preElements = document.getElementsByTagName('pre');
for (var i = 0; i < preElements.length; i++)
preElements[i].classList.add('prettyprint');
prettyPrint();
})();
</script>
<div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
</div>
</div>
</html>