可访问性查看器提供了一种访问重要信息的方法，在当前页通过可访问性树的辅助技术可以使重要信息显示出来，从而允许你去检查丢失的或者需要注意的信息。本文将带你了解可访问性查看器的主要特征和如何使用。
关于可访问性的简短说明
可访问性就是让你的网站能够尽可能为越来越多的人可用的做法，这意味着需要竭尽全力不要将任何访问信息的人挡在门外，仅仅因为他们可能有某些方面的残疾或者因为某些个人情况例如他们正在使用的设备、他们的网速、或者他们所处的地理位置或场所。
在这里我们主要讨论向有视觉障碍者展示信息-这个过程需要通过网页浏览器内部可用的accessibility APIs来完成，这些API展示了页面上不同元素扮演什么角色的信息。（例如：它们是纯文本或者按钮、链接、表单元素等等？）
默认情况下，暗示它们用途的语义文档对象模型元素被分配了角色。有时候，你需要利用一些非语义的标识（例如 {{htmlelement("div")}}s）来创建一个复杂的自定义控件，可是该控件不具备反映用途的默认角色。在这种情况下，你就可以使用WAI-ARIA的角色属性来提供自己的角色。
通过浏览器accessibility APIs展示出的角色和其他信息以被称为可访问性树的分层结构呈现。这个就有点像文档对象模型树，只不过它承载了数量更有限的元素和与它略微不同的信息。
辅助技术就像屏幕阅读器，用它的信息去发现一个网页上有什么，告诉它们的用户那里有什么，然后让用户能够和网页发生交互作用。可访问性查看器同样的运用它的信息在开发者工具中提供有价值的调试排障功能。
走近可访问性查看器
可访问性查看器（自火狐浏览器61版本起可用）在DevTools里不是默认显示的。要打开它，你需要去开发者工具设置里（按F1键，或者去“三点”菜单并选择设置）然后选中the Default Developer Toolsheading下的可访问性查看器复选框。这样呢，可访问性查看器选项卡就会出现在主开发者工具显示中，单击就可以显示可访问性查看器的控制面板了：
最初呢，它的性能是被关闭的（除非你已经在另一个浏览器选项卡将其打开，或者你如果是一个屏幕阅读器用户或者测试者，已经提前打开了火狐可访问性引擎）。这是因为可访问性功能被打开了之后，可访问性功能引擎就会在后台运行了。当引擎正在运行的时候，它会降低性能，占用内存；因此，会干扰其他面板的权值，例如内存和性能，同样也会影响到整个浏览器的性能。正因如此，最好在你不是特别需要使用它的时候关掉它。
你可以利用打开可访问性功能按键来启用它。面板内容加载后，你可以在左上角利用关闭可访问性功能按键再次关掉它，除非你已经提前通过可访问性功能引擎运行来操作了一个屏幕阅读器，这样的话那个功能按钮便会被禁用。
注：如果你在多个选项卡里运用可访问性的功能，那么关掉一个选项卡里的功能按键则会关掉所有选项卡里的所有功能按键。
已启用的可访问性控制面板是这样的：
在左手边，有一个树形图，代表当前页可访问性树中的所有项。 具有嵌套子项的项都带有箭头，通过点击可以显示子项，这样你就可以进入更深的层级结构。每一个项包含下面列出来的两个属性：
角色—项目在页面上的角色（例如 pushbutton或者 footer）要么是浏览器提供的一个默认角色，要么就是通过WAI-ARIA分配的一个角色。
名称—这个项在页面上的名称。名称从哪里来由元素决定，例如：绝大多数文本的元素名称就是它们的文本内容，然而表单元素的名称却是与它们相关联的{{htmlelement("label")}}。
在右手边，你可以就当前选择的项看到更多的信息。列出的属性如下：
角色—项的角色，如上所述。
操作一可以对项目执行的操作列表，例如，一个按钮会列出“Press”，而一个链接会列出“Jump”。
描述一元素上任何进一步的描述都是由一个标题属性的内容提供。
帮助一它不是在Gecko中执行的，所以它通常返回一个空字符串。它将会从Firefox 62版本的查看器中移除 ({{bug(1467643)}})。
子项计算一当前项在可访问性树层级所有的子项数量。
注：所有平台上的公开信息都是一样的-查看器显示Gecko 可访问性树而不是来自可访问性的平台层信息
可访问选项卡是完全可以通过键盘访问的：
当焦点放在其中一个面板时，你可以使用上下箭头来上下移动焦点，并使用向左向右箭头来展开和折叠可拓展行。（可访问性树的不同层次结构级别）
当可访问性功能被打开的时候，开发者工具中提供了许多有用的附加功能，具体如下：
上下文菜单选择项
对于网页上一般的上下文菜单，当你按下右键/Ctrl键点击一条UI特性的时候，便会增加一个额外的上下文菜单选项；对于页面检查器上的HTML面板，当右/Ctrl +单击一个DOM元素时，便会增加一个额外的上下文菜单选项。
当你选择“检查可访问性属性/显示可访问性属性上下文菜单选项”时，可访问性选项卡将会立即打开来展示相关的访问树项和它的属性。
注：一些文档模型元素并没有可访问性性属性，在这种情况下，“检查可访问性性属性/显示可访问性性属性上下文菜单选”将会显示为灰色。
在无障碍选项卡中，当鼠标停留在可访问性项上，如果适用的话，你可以看见一个半透明的高光出现在它们相关的UI项上。该项的角色和名称将会在一个小的信息栏里显示出来。这对于在实际页面中测定可访问性树的项和UI项的关联方式是非常有用的。
在下述例子中，你可以看到图像已被突出显示出来了，然后它的角色、图像、名称，“Road, Asphalt, Sky, Clouds, Fall”，以及色彩对比度3.46等信息都在上面的信息栏中显示出来了。
当你为网页设计调色板的时候，对比度信息就会非常的有用。原因是如果色彩对比不足的话，有视觉障碍的读者例如患有色盲症的人将无法阅读文章。对于网页上较小文本，WCAG2.0版本将4.5:1的比例定义为前景色和背景色之间建议的最小的色彩对比度。
在上图中色彩对比度是2.77，可能就不足以使其轻松阅读。请注意，旁边的感叹号就暗示了该对比度无法满足可接受的对比度，请参照下例来比较
在这个例子中，色彩对比度是12.63，这个时候这个值后面紧跟了AAA和一个绿色的√，它表明这个文本的色彩对比度是7:1或者更高，意思是它满足增强对比度标准或者AAA级别的标准。
与页面检查器HTML窗格选择器相似，当可访问性选项卡上的选择器按钮按下的时候，你可以在当前页让鼠标悬停，选择UI项，然后便可以在可访问性树里边突出显示相应的可访问对象。可访问性选项卡选择器会与页面检查器HTML窗格选择器略微不同，请参见下图：
当你执行一个选择的时候，你可以看见可访问性对象会在可访问性树中突出显示，然后选择器就会失效，请注意 但是如果你按下SHIFT按键当执行一个选择的时候，你可以在可访问性树里边预览无障碍访对象（以及在右侧窗格里它的属性），直到释放Shift键之前，你可以随意的多次的进行选择（选择器不会取消）
当选择器被激活的时候，你也可以通过第二次按下选择器按钮或者按下Esc键来取消激活。
可访问性查看器对于一目了然地发现可访问性问题非常有用。刚开始的时候，你可以调查没有合适文本等效项—例如没有alttex图像和一个属性名为空没有合适标签的表单元素，例：
在核查语义的时候它也非常的方便，你可以利用the Inspect Accessibility Properties context菜单来很快地看一个项是否具有正确的角色设置（例：一个按钮是否真的是按钮，或者一个链接是否真的是一个链接）。
