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
|
---
title: 何为可访问性？
slug: Learn/Common_questions/What_is_accessibility
translation_of: Learn/Common_questions/What_is_accessibility
---
<div class="summary">
<p>本文介绍了Web可访问性背后的一些基本概念。</p>
</div>
<table class="learn-box nostripe standard-table">
<tbody>
<tr>
<th scope="row">前提:</th>
<td>无</td>
</tr>
<tr>
<th scope="row">目标:</th>
<td>学习可访问性，了解其重要性</td>
</tr>
</tbody>
</table>
<h2 id="概述">概述</h2>
<p>由于身体或技术上的限制，你的访客也许无法以像你期望的方式体验网站。本文中，我们给出了可访问性的一般原则，并解释了其中的一些规则。</p>
<h2 id="自主学习">自主学习</h2>
<p><em>还没有可用的资料。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
<h2 id="深入探索">深入探索</h2>
<h3 id="可访问性_一般原则">可访问性: 一般原则</h3>
<p>We might associate accessibility at first with negative limitations. This building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement.</p>
<p>That's a narrow way to think of accessibility. Think of it as a wonderful way to empower people and serve more customers. What can the people in Brazil do with your English website? Can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? They'll go somewhere else. In general, <em>we must think about our product from the viewpoints of all our target customers, and adapt accordingly. </em>Hence accessibility.</p>
<h3 id="Web可访问性">Web可访问性</h3>
<p>In the specific context of the web, accessibility means that anyone can benefit from your content, regardless of disability, location, technical limitations, or other circumstances.</p>
<p>Let's consider video:</p>
<dl>
<dt>听力障碍</dt>
<dd>How does a hearing-impaired person benefit from a video? You have to provide subtitles —or even better, a full text transcript.</dd>
<dd>Also, make sure people can adjust the volume to accommodate their unique needs.</dd>
<dt>视觉障碍</dt>
<dd>Again, provide a text transcript that a user can consult without needing to play the video, and an audio-description (an off-screen voice that describes what is happening in the video).</dd>
<dt>暂停功能</dt>
<dd>Users may have trouble understanding someone in a video. Let them pause the video to read the subtitles or process the information.</dd>
<dt>键盘功能</dt>
<dd>Let the user tab into/out of a video, play it, and pause it without being trapped in it.</dd>
</dl>
<h4 id="Web可访问性基础">Web可访问性基础</h4>
<p>A few necessities for basic Web accessibility include:</p>
<ul>
<li>Whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections.</li>
<li>Make sure all users can operate graphical interfaces (like unfolding menus) solely with a keyboard (e.g., with Tab and the Return key).</li>
<li>Provide an attribute explicitly specifying your content's language, so that screen readers read your text properly.</li>
<li>Make sure that a user can navigate to all widgets on a page solely with the keyboard, without getting trapped. (At least let them Tab in and out.)</li>
</ul>
<p>而这只是个开始。</p>
<h3 id="可访问性的拥护者">可访问性的拥护者</h3>
<p>Since 1999, the {{Glossary("W3C")}} has operated a working group called the {{Glossary("WAI","Web Accessibility Initiative")}} (WAI) promoting accessibility through guidelines, support material, and international resources.</p>
<h2 id="更多细节">更多细节</h2>
<p>请参阅</p>
<ul>
<li>关于可访问性的 <a href="https://en.wikipedia.org/wiki/Accessibility">维基百科文章</a></li>
<li><a href="http://www.w3.org/WAI/">WAI (W3C's Web Accessibility Initiative)</a></li>
</ul>
<h2 id="下一步">下一步</h2>
<p>Accessibility can impact both a website's design and technical structure.</p>
<ul>
<li>From a design point of view, we suggest learning about <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">designing for all types of users</a>.</li>
<li>If the technical side interests you more, you could learn how to <a href="/en-US/docs/Learn/Using_images">embed images in webpages</a>.</li>
</ul>
|
