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
|
---
title: Accessibility Inspector
slug: Tools/Accessibility_inspector
translation_of: Tools/Accessibility_inspector
---
<div>{{ToolsSidebar}}</div>
<p class="summary">可访问性查看器提供了一种访问重要信息的方法，在当前页通过可访问性树的辅助技术可以使重要信息显示出来，从而允许你去检查丢失的或者需要注意的信息。本文将带你了解可访问性查看器的主要特征和如何使用。</p>
<p align="left"><strong>关于可访问性</strong><strong>的简短说明</strong></p>
<p align="left">可访问性就是让你的网站能够尽可能为越来越多的人可用的做法，这意味着需要竭尽全力不要将任何访问信息的人挡在门外，仅仅因为他们可能有某些方面的残疾或者因为某些个人情况例如他们正在使用的设备、他们的网速、或者他们所处的地理位置或场所。</p>
<p align="left">在这里我们主要讨论向有视觉障碍者展示信息-这个过程需要通过网页浏览器内部可用的<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a>来完成，这些<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API</a>展示了页面上不同元素扮演什么角色的信息。（例如：它们是纯文本或者按钮、链接、表单元素等等？）</p>
<p>默认情况下，暗示它们用途的语义文档对象模型元素被分配了角色。有时候，你需要利用一些非语义的标识（例如 {{htmlelement("div")}}s）来创建一个复杂的自定义控件，可是该控件不具备反映用途的默认角色。在这种情况下，你就可以使用<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a><u>的</u>角色属性来提供自己的角色。</p>
<p>通过浏览器<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a>展示出的角色和其他信息以被称为可访问性树的分层结构呈现。这个就有点像文档对象模型树，只不过它承载了数量更有限的元素和与它略微不同的信息。</p>
<p>辅助技术就像屏幕阅读器，用它的信息去发现一个网页上有什么，告诉它们的用户那里有什么，然后让用户能够和网页发生交互作用。可访问性查看器同样的运用它的信息在开发者工具中提供有价值的调试排障功能。</p>
<p> <strong>走近可访问性查看器</strong></p>
<p>可访问性查看器（自火狐浏览器61版本起可用）在DevTools里不是默认显示的。要打开它，你需要去开发者工具设置里（按<kbd>F1</kbd>键，或者去“三点”菜单并选择设置）然后选中the <em>Default Developer Tools</em>heading下的可访问性查看器复选框。这样呢，可访问性查看器选项卡就会出现在主开发者工具显示中，单击就可以显示可访问性查看器的控制面板了：</p>
<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
<p>最初呢，它的性能是被关闭的（除非你已经在另一个浏览器选项卡将其打开，或者你如果是一个屏幕阅读器用户或者测试者，已经提前打开了火狐可访问性引擎）。这是因为可访问性功能被打开了之后，可访问性功能引擎就会在后台运行了。当引擎正在运行的时候，它会降低性能，占用内存；因此，会干扰其他面板的权值，例如内存和性能，同样也会影响到整个浏览器的性能。正因如此，最好在你不是特别需要使用它的时候关掉它。</p>
<p>你可以利用打开<em>可访问性</em>功能按键来启用它。面板内容加载后，你可以在左上角利用关闭<em>可访问性</em>功能按键再次关掉它，除非你已经提前通过可访问性功能引擎运行来操作了一个屏幕阅读器，这样的话那个功能按钮便会被禁用。</p>
<p>注：如果你在多个选项卡里运用可访问性的功能，那么关掉一个选项卡里的功能按键则会关掉所有选项卡里的所有功能按键。</p>
<h2 id="可访问性功能面板的特征"><strong>可访问性功能面板的特征</strong></h2>
<p>已启用的可访问性控制面板是这样的：</p>
<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
<p>在左手边，有一个树形图，代表当前页可访问性树中的所有项。 具有嵌套子项的项都带有箭头，通过点击可以显示子项，这样你就可以进入更深的层级结构。每一个项包含下面列出来的两个属性：</p>
<ul>
<li>
<p align="left"><em>角色</em>—项目在页面上的角色（例如 pushbutton或者 footer）要么是浏览器提供的一个默认角色，要么就是通过WAI-ARIA分配的一个角色。</p>
</li>
<li>
<p align="left">名称—这个项在页面上的名称。名称从哪里来由元素决定，例如：绝大多数文本的元素名称就是它们的文本内容，然而表单元素的名称却是与它们相关联的{{htmlelement("label")}}。</p>
</li>
</ul>
<p>在右手边，你可以就当前选择的项看到更多的信息。列出的属性如下：</p>
<ul>
<li><em>名称</em>—项的名称，如上所述。</li>
<li>
<p align="left"><em>角色</em>—项的角色，如上所述。</p>
</li>
<li>
<p align="left"><em>操作</em>一可以对项目执行的操作列表，例如，一个按钮会列出“Press”，而一个链接会列出“Jump”。</p>
</li>
<li><em>值</em>一项的值，项的种类意味着它的值可以是不同的东西。例如：一个表单的输入（角色：输入）的值可以是你所输入的任何东西，而一个链接的值将是相应的<a> 元素里的URL。</li>
<li><em>DOM节点</em>—项在可访问性树里所代表的文档对象模型节点的类型。你可以通过点击在后面出现的"target"图标以在页面检查器里选择节点。当你把鼠标悬停在"target"图标上的时候，页面内容里的节点就会凸显。</li>
<li>
<p align="left"><em>描述</em>一元素上任何进一步的描述都是由一个标题属性的内容提供。</p>
</li>
<li>
<p align="left"><em>帮助</em>一它不是在Gecko中执行的，所以它通常返回一个空字符串。它将会从Firefox 62版本的查看器中移除 ({{bug(1467643)}})。</p>
</li>
<li>任何可用于激活元素的键盘快捷键，在快捷键属性中已指定。需要知悉的是它仅在Firefox 62之后版本中起作用 ({{bug("1467381")}})</li>
<li>
<p align="left">子项计算一当前项在可访问性树层级所有的子项数量。</p>
</li>
<li>项中指数一 一个位于父项中指示子项数量的指数值。如果该项是其父项中的第一项，则其值为0，如果是第二项，则其值为1，依此类推。</li>
<li>状态一 可以用于当前项与不同可访问性相关的状态列表。例如，一个演示中的一条链接有可聚焦的、关联的、可选择文本、不透明，激活的和敏感的状态。有关内部状态完整的列表，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a></li>
<li>属性一应用于项上面的与所有可访问性相关的属性列表。它包含了设计式样相关的属性例如页边距和文本缩进，和对可访问性信息的有用状态，例如draggable和level（在有标题的情况下，标题的级别是什么。）有关可能属性完整的列表，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>。</li>
</ul>
<div class="note">
<p>注：所有平台上的公开信息都是一样的-查看器显示Gecko 可访问性树而不是来自可访问性的平台层信息</p>
</div>
<h3 id="键盘控制">键盘控制</h3>
<p>可访问选项卡是完全可以通过键盘访问的：</p>
<ul>
<li>你可以在“关闭可访问性功能按钮”和左侧右侧面板之间进行切换。</li>
<li>
<p align="left">当焦点放在其中一个面板时，你可以使用上下箭头来上下移动焦点，并使用向左向右箭头来展开和折叠可拓展行。（可访问性树的不同层次结构级别）</p>
</li>
</ul>
<h2 id="值得注意的相关功能">值得注意的相关功能</h2>
<p>当可访问性功能被打开的时候，开发者工具中提供了许多有用的附加功能，具体如下：</p>
<p align="left">上下文菜单选择项</p>
<p>对于网页上一般的上下文菜单，当你按下右键/Ctrl键点击一条UI特性的时候，便会增加一个额外的上下文菜单选项；对于页面检查器上的HTML面板，当右/Ctrl +单击一个DOM元素时，便会增加一个额外的上下文菜单选项。</p>
<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>
<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
<p>当你选择“检查可访问性属性/显示可访问性属性上下文菜单选项”时，<em>可访问性</em><em>选项卡</em>将会立即打开来展示相关的访问树项和它的属性。</p>
<div class="note">
<p align="left">注：一些文档模型元素并没有可访问性性属性，在这种情况下，“检查可访问性性属性/显示可访问性性属性上下文菜单选”将会显示为灰色。</p>
</div>
<h3 id="UI项突出">UI项突出</h3>
<p>在无障碍选项卡中，当鼠标停留在可访问性项上，如果适用的话，你可以看见一个半透明的高光出现在它们相关的UI项上。该项的角色和名称将会在一个小的信息栏里显示出来。这对于在实际页面中测定可访问性树的项和UI项的关联方式是非常有用的。</p>
<p>在下述例子中，你可以看到图像已被突出显示出来了，然后它的角色、图像、名称，“Road, Asphalt, Sky, Clouds, Fall”，以及色彩对比度3.46等信息都在上面的信息栏中显示出来了。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p>
<h4 id="色彩对比度">色彩对比度</h4>
<p>当你为网页设计调色板的时候，对比度信息就会非常的有用。原因是如果色彩对比不足的话，有视觉障碍的读者例如患有色盲症的人将无法阅读文章。对于网页上较小文本，WCAG2.0版本将4.5:1的比例定义为前景色和背景色之间建议的最小的色彩对比度。</p>
<p> <img alt="" src="https://mdn.mozillademos.org/files/16305/text_contrast_2.png"></p>
<p>在上图中色彩对比度是2.77，可能就不足以使其轻松阅读。请注意，旁边的感叹号就暗示了该对比度无法满足可接受的对比度，请参照下例来比较</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16304/text_contrast_1.png" style="display: block; height: 64px; margin: 0 auto; width: 336px;"></p>
<p>在这个例子中，色彩对比度是12.63，这个时候这个值后面紧跟了AAA和一个绿色的√，它表明这个文本的色彩对比度是7:1或者更高，意思是它满足增强对比度标准或者AAA级别的标准。</p>
<h3 id="可访问性选择器">可访问性选择器</h3>
<p>与页面检查器HTML窗格选择器相似，当可访问性选项卡上的选择器按钮按下的时候，你可以在当前页让鼠标悬停，选择UI项，然后便可以在可访问性树里边突出显示相应的可访问对象。可访问性选项卡选择器会与页面检查器HTML窗格选择器略微不同，请参见下图：</p>
<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>
<p>当你执行一个选择的时候，你可以看见可访问性对象会在可访问性树中突出显示，然后选择器就会失效，请注意 但是如果你按下SHIFT按键当执行一个选择的时候，你可以在可访问性树里边预览无障碍访对象（以及在右侧窗格里它的属性），直到释放Shift键之前，你可以随意的多次的进行选择（选择器不会取消）</p>
<p>当选择器被激活的时候，你也可以通过第二次按下选择器按钮或者按下Esc键来取消激活。</p>
<h2 id="典型案例">典型案例</h2>
<p>可访问性查看器对于一目了然地发现可访问性问题非常有用。刚开始的时候，你可以调查没有合适文本等效项—例如没有alttex图像和一个属性名为空没有合适标签的表单元素，例：</p>
<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
<p>在核查语义的时候它也非常的方便，你可以利用the Inspect Accessibility Properties context菜单来很快地看一个项是否具有正确的角色设置（例：一个按钮是否真的是按钮，或者一个链接是否真的是一个链接）。</p>
<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Learn/Accessibility">Accessibility fundamentals</a></li>
<li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
<li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li>
</ul>
|
