Web前端可访问性

MSE-STAR-CVHERO

已于 2023-07-25 17:15:27 修改

阅读量117

点赞数

分类专栏： .net学习文章标签：前端

于 2023-07-25 17:15:25 首次发布

本文链接：https://blog.csdn.net/dd_wl1/article/details/131922464

版权

.net学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

请务必确保所有用户和客户端都能访问你的网页，这一点至关重要。万维网之父蒂姆·伯纳斯·李曾经表示：“Web 的力量在于其普遍性。一个重要事实是，不论残疾与否，人人都有权访问 Web。”

作为一名迅速成长的 Web 开发者，你认为学习如何确保自己的页面可供及早访问十分重要。构建可供访问的页面总比稍后改进更容易。如果在新手上路时了解这些技能，这些便会水到渠成。之后，你便可创建可供访问的页面并发现潜在缺陷。

在本模块中，你将学习以下内容：

用户用来浏览网页的工具。
开发者用于确保可访问性的工具。
确保页面可供访问的技能。

不只使用浏览器在网上冲浪

你可能十分熟悉如何将浏览器用作浏览 Web 的客户端。在考虑设计网页时，你可以设想此客户端带来的用户体验，因为你本人已亲自使用过。但并非所有用户都以相同方式使用浏览器，有些用户甚至都未使用过浏览器。若要为所有用户打造访问体验，你应当了解人们浏览 Web 时可能使用的各种工具。

屏幕阅读器

最知名的一个访问工具就是屏幕阅读器。屏幕阅读器是视障用户常用的客户端。它们内置于大多数操作系统中。我们不仅要花时间确保浏览器正确传达我们要共享的信息，同时还须确保屏幕阅读器也能满足这项需求。

屏幕阅读器基本是从上到下朗读页面。如果页面只包含文本，阅读器会以相似方式向浏览器传达信息。当然，网页很少只包含文本内容，同时还会包含链接、图形、颜色和其他可视化组件。你必须注意确保屏幕阅读器可以正确读取此信息。

某些浏览器还具有内置工具和扩展功能，这些工具和扩展可以朗读文本，甚至提供一些基本的导航功能，如这些聚焦辅助功能的 Edge 浏览器工具。这些浏览器工具也是重要的辅助工具，但其工作方式与屏幕阅读器不同。因此不应将它们误当成屏幕阅读器测试工具。
备注

尝试使用屏幕阅读器和浏览器文本阅读器。 Windows 系统默认包括讲述人工具。也可以在 Windows 上安装 JAWS 和 NVDA。 macOS 和 iOS 系统默认安装有 VoiceOver。

缩放

视障用户通常使用的另一种工具是缩放。最基本的缩放类型为静态缩放，用户可以通过键盘快捷方式 Ctrl + 加号 (+) 或通过降低屏幕分辨率来控制该功能。此类型的缩放将调整整个页面的大小。若要在更高的缩放级别上提供良好的用户体验，用户有必要使用响应式设计，使项目能够基于视区进行相应调整。
用户的操作系统很可能具有内置缩放功能，这些功能可用于放大屏幕的各个部分，就像使用真实的放大镜一样。放大镜内置于 Windows 中，而 ZoomText 则可用作功能更全面且更受欢迎的协作加载项。 macOS 和 iOS 都具有名为 Zoom 的内置放大工具。

使用开发者工具确保可访问性

在不同的客户端和视图中测试网页与在各种浏览器中测试网页同等重要。这种测试可能不适用于所有情况，并且可能会遗漏用户使用浏览器但可能患有其他残疾的情况。幸运的是，作为开发者，你可借助某些工具来测量页面的可访问性。

对比检查

色盲用户可能无法区分颜色，或是可能很难辨别相似的颜色。 Web 标准组织万维网联合会 (W3C) 建立了颜色对比评级系统。

我们很难手动选择正确的颜色，确保所有用户都能访问页面。你可以使用以下工具生成适当的颜色及测试站点，从而确保合规性：

调色板生成工具：
- Adobe Color，一种用于测试颜色组合的交互式工具
- Color Safe，一种基于选定背景色生成文本颜色的工具
合规性检查工具：
- 用于测试页面的浏览器扩展：
- 应用程序：
  - Colour Contrast Analyser (CCA)

Lighthouse

Lighthouse 是 Google 研发的网站分析工具。该工具广受欢迎，现已添加至许多浏览器的开发者工具中。 Lighthouse 可以检查页面的搜索引擎优化 (SEO)、负载性能和其他最佳做法。 Lighthouse 还可分析页面，并为页面当前的可访问性打分。
备注

与任何自动化工具一样，你不能仅依靠 Lighthouse 提供的分数来评判页面的可访问性。不过，该工具确实提供了一个良好的起点，能够帮助我们发现和纠正问题。

练习：生成页面的 Lighthouse 可访问性分数

在浏览器中测试 Lighthouse。以下均为 Edge 的屏幕截图，但你也可在 Chrome 和许多其他浏览器中执行相同步骤。

打开浏览器并前往 Microsoft 主网页。
选择 F12 键，开启开发者工具。
选择顶部的 V 形 (>>) 图标，开启隐藏选项卡列表。
从列表中选择“Lighthouse”。
在“类别”下方，清除“辅助功能”之外的所有项。
在“设备”下方，选择“桌面设备”。
选择“生成报告”。
请注意分数和页面的相关信息。
你也可以测试其他页面，具体步骤为：在 Lighthouse 中选择“全部清除”，转到其他页面，然后选择“生成报告”。
现在，你已了解 Lighthouse 的使用说明，以及该工具可提供的可访问性信息。

确保链接和图像可供访问

链接和图像是各个网页上最常见的两个组件。这些组件对可访问性具有深远影响。如要为所有用户改进页面，首先可以采取的一项措施便是确保提供有意义的链接文本和替换文本。

链接文本

超链接是浏览 Web 的核心。确保屏幕阅读器正确读取链接有助于所有用户浏览你的网站。

思考一下以下示例文本中的两个链接：

“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。详情请单击此处。”
“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。详情请访问 https://en.wikipedia.org/wiki/Little_penguin。”
备注

这两个示例展示了 Web 开发者“不”应使用的内容。

尽管这些链接对于健视用户而言可能很正常，但在屏幕阅读器上，它们将不会按预期方式运作。请记住，屏幕阅读器会读取文本。如果文本中出现 URL，屏幕阅读器将会读取 URL。该 URL 通常不会传达有意义的信息，并且听起来可能还会令人生厌。如果你的手机曾经朗读过包含 URL 的短信，你可能已经遇到过这一问题。

屏幕阅读器还能只读取页面上的超链接，就像视力正常的用户扫读页面中的链接时一样。如果链接文本始终为“单击此处”，所有用户都将反复听到“单击此处…”此时所有链接都将变得无法区分，让人甚感沮丧。

“单击”一词也存在问题，因为并非所有用户都会选择单击。电话用户会按电话键，键盘用户可能会按 Enter 键或空格键，其他客户端则会使用其他方法。

我们需要一律使用有意义的链接文本。有意义的链接文本会简要说明链接另一端的内容。在上述小企鹅示例中，示例中的链接将转到有关该物种介绍的维基百科页面。 “小企鹅”一词就是完美的链接文本，因为它能向用户清楚表明选择链接后将能了解到的内容：

“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。”
备注

确保所有用户都能访问网站还会带来额外好处，即有助于搜索引擎浏览你的网站。搜索引擎使用链接文本了解页面的主题。因此，使用有意义的链接文本对每个人都有帮助！

ARIA 属性

设想以下产品页：

产品	说明	顺序
小组件	`[Description]('#')`	`[Order]('#')`
超级小组件	`[Description]('#')`	`[Order]('#')`

这是页面的常见布局，其中会显示表中各项的相关信息，以及指向说明和顺序的链接。对于浏览器用户而言，复制说明文本和顺序很有意义。但屏幕阅读器用户只会反复听到“说明”和“顺序”这两个词，而且没有任何上下文。

为了满足这些场景类型的需求，HTML 现支持一组名为 Accessible Rich Internet Applications (ARIA) 的属性。你可以使用这些属性为屏幕阅读器提供详细信息。

例如，当页面格式不允许时，可以使用 aria-label 来描述链接。 “小组件”的描述可能设置为：
<a href="#" aria-label="Widget description">description</a>
除了添加文本以便屏幕阅读器读取链接之外，ARIA 还具有许多其他用途。它可用于描述某些元素在语义 HTML 不可用时所扮演的角色。例如，在创建树时，可以使用 ARIA 角色来向屏幕阅读器描述界面：

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

重要

如前文所述，使用语义标记和有意义的链接文本通常可取代 ARIA。浏览器和屏幕阅读器不是用户可能会唯一使用的客户端，因此设计能够有效适用所有客户端和用户的页面应是你的主要目标。

图像的替换文本

一般而言，屏幕阅读器无法读取图像的内容。尽管有些用户可能会使用人工智能，但生成的结果在特定上下文中可能并不准确。幸运的是，确保用户可以访问图像并不费力，这也就是 alt 属性的全部意义所在。所有有意义的图像都应借助 alt 属性（俗称“替换文本”）描述自身或其试图传达的信息。

纯修饰图像的 alt 属性应设置为空字符串：alt=""。此设置可防止屏幕阅读器不必要地讲述修饰性图像。
备注

正如你所料，搜索引擎无法理解图像中的内容，而需依赖替换文本。再次强调下，确保页面可供访问会带来多种好处！

设计辅助功能

可访问性是一个范围相对较广的主题。我们无法在单个学习模块中作出全面介绍。不过，你需要在创建的每个页面中实现一些核心原则。相比返回现有页面作出调整使其可供访问，一开始便设计可访问页面总是更加容易。

按设计方式使用 HTML

HTML 提供了许多可用于创建页面的元素，其中包括按钮、链接和窗体控件。每个元素都具有一组内置功能，例如实现可单击、可链接或接受焦点。
备注

“焦点”是 Web 开发术语，表示控件可以接受键盘输入。按钮可以接受焦点，以便用户通过选择空格键来激活或“单击”它。

CSS 和 JavaScript 可以使任何元素看起来就像任一类控件一样。例如，你可以使用 <span> 创建一个 <button> 元素，也可将 <b> 变为 <a>。尽管此功能提供了一些用于设置页面样式或布局的键盘快捷方式，但也会删除内置功能。屏幕阅读器等工具无法理解 <span> 正在用作 <a>。使用键盘浏览的用户无法对经过编程可模拟 <button> 元素的 <div> 元素设置焦点。

另一个通常会跳过的 HTML 元素是标头（<h1> 至 <h6>）。从视觉角度来看，标头标记的文本从大到小排列。此约定导致许多开发者放弃标头元素，转而对 <div> 或其他泛型元素设置样式。

遗憾的是，设有样式的泛型元素仅会传达视觉信息而非结构信息。屏幕阅读器用户非常依赖标题来查找信息和浏览页面。对于为屏幕阅读器用户创建易于导航的站点而言，编写描述性的标题内容及使用语义标题标记非常重要。

最佳做法是，你应在页面上创建控件时，始终使用适当的 HTML。如果需要超链接，请将 <a> 或 <button> 用作按钮。

使用方便的视觉提示

开发者通常将屏幕阅读器视为唯一的辅助工具。但用户可能会使用许多其他工具，或根本不使用工具。使用浏览器的用户将依赖特定的视觉提示来了解如何与你的页面交互。

CSS 的其中一个强大功能在于，它能完全控制页面的显示方式，包括删除某些显示元素。例如，你可以删除文本框的边框或超链接的下划线。遗憾的是，删除这些类型的提示会使依赖它们的用户更难识别控件类型。

考虑使用键盘

某些用户无法使用鼠标或触控板/触摸板，而是依靠键盘交互从一个元素移至下一个元素。页面按逻辑顺序显示内容非常重要，这样一来，键盘用户便可在向下移动时访问每个交互元素。

当用户按 Tab 键在页面中移动时，焦点会根据控件在 HTML 源中的列出顺序从一个控件移至下一个控件。页面控件应按照你希望的页面浏览顺序在 HTML 源中列出，同时还要依赖 CSS 进行页面布局，以便直观展示给用户。
例如，假设创建了一个包含两列的窗体。对于填写窗体的用户，你需要考虑自然流程的顺序，然后按顺序列出控件。接着，你可以使用 CSS 创建列并在这些列的适当位置显示控件。

键盘导航非常依赖语义 HTML。某些控件（例如按钮）会接受焦点，但 div 元素并无法接受。如果重新创建的控件已经存在于 HTML 中，用户将更难通过键盘使用你的页面。
重要

你需手动测试键盘导航，且应在创建的每个页面上执行此操作。如需了解键盘导航策略的更多信息，请前往 WebAIM。
1. 以下哪一项是可访问的链接？
<a href="https://www.microsoft.com">Microsoft</a>
添加备注来说明用户可通过链接找到可访问的链接文本。

2. 以下哪一项正确使用了 ARIA (Accessible Rich Internet Applications) 属性？
当语义 HTML 中不存在控件时，为屏幕阅读器提供上下文（如树）。
当创建的自定义控件并非原生存在于 HTML 中时，ARIA 属性可以为屏幕阅读器提供上下文。

3. 若要添加用户选择用于执行操作的控件，应使用哪个 HTML 元素？