随着全球范围内残疾人口的增加，如何为他们提供更好的在线体验已成为 Web 开发者需要考虑的重要问题之一。无障碍模式是一种为视力、听力或运动能力受限用户提供更友好界面的设计技术。在本文中，我们将学习如何使用富交互工具和 ARIA 属性来优化 Web 应用的无障碍体验。
什么是无障碍模式？
无障碍模式是一种设计原则，它将可访问性放在设计的核心，以确保任何用户都能够访问和使用 Web 应用程序，包括那些面临视觉、听觉和运动障碍的用户。这涉及到在 Web 应用程序中增加可访问性功能，例如：
- 提供替代文本以帮助屏幕阅读器阅读图像内容。
- 提供音频描述以帮助视觉障碍用户了解图像内容。
- 提供合理的语义结构和键盘焦点以帮助运动障碍用户操作界面。
为无障碍模式优化 Web 应用
- 使用富交互工具
提供交互式组件，可以让用户更轻松、更迅速地使用您的应用程序。而对于残疾人群体而言，这些组件能够提供更多的可访问性功能。
例如，您可以使用一个对话框来呈现大量内容：%(%(aui-dialog)style=float:right;)
----------- -------------- --------------------------------- -------------
您可以使用键盘上的 Tab 键或 Shift + Tab 键来分别聚焦和离开该对话框。
此外，富交互组件还经常具有与容器元素无关的通用键盘快捷键，这些快捷键使得特定的功能可以通过快捷键实现，而不需要与逐个控件进行交互：
------- ----------------------------
在这里，我们使用了 aria-label 属性，使屏幕阅读器或其他辅助技术可以将按钮标记为“列出头像”按钮，而不是普通按钮。
更多细节可以参见 *ARIA 即“可访问性 Rich Internet 应用” 规范*。
- 使用 ARIA 属性
ARIA 属性（例如 aria-label）是一种自定义 HTML 属性，它可以让您更好地控制网页的可访问性，特别是在动态 Web 应用程序中。ARIA 属性可以将标准 HTML 元素标记为特定的可访问性角色，例如按钮、下拉菜单、无障碍对话框等。
例如，您可以使用以下嵌套列表HTML：
---- ------ --------------------- ------ --------------------- ------ --------------------- ------ --------------------- -----
这里提供以下优化方案：
为列表添加一个可访问性角色。因为元素默认的角色是
list，因此不必显式声明：--- --------------- ------ --------------------- ------ --------------------- ------ --------------------- ------ --------------------- -----
为每个项目添加可访问性角色。而默认情况下，每一项都由
listItem作为角色。--- --------------- --- ---------------- --------------------- --- ---------------- --------------------- --- ---------------- --------------------- --- ---------------- --------------------- -----
结合上面两个例子，如下所示：%(%(html))
--- --------------- --- ---------------- --------------------- --- ---------------- --------------------- --- ---------------- --------------------- --- ---------------- --------------------- -----
如上，语义是更明确了，同时也可以帮助根据屏幕阅读器的声音在内容的区域中连续导航或者查找的操作。
- 设计键盘可访问性
键盘可访问性是关于确保应用程序中的组件能够通过键盘进行交互。例如，键盘可访问性可以帮助用户通过 Tab 键和 Shift+Tab 键移动焦点，以查找和导航到应用程序的不同部分。
您需要测试您的应用程序，以确保它们是键盘可访问的。执行以下操作：
- 使用
Tab键和Shift + Tab键移动焦点。所有可见的交互式组件都应该能够获得焦点。 - 您的应用应该在使用键盘时通过正确的顺序呈现可访问性功能。
- 确保组件可以使用
Enter或Space键激活。例如，通过点击按钮时，您可以使用Enter或Space键触发其行为。
- 使用有意义的 HTML 标签
使用具有语义性的 HTML 元素（例如 <nav>、<section>、<aside> 等）可以使屏幕阅读器和其他辅助技术更容易理解文档的结构。例如，将导航元素置于 <nav> 元素中：
-----
----
------ --------------------
------ --------------------
------ --------------------
-----
------这里，我们使用 <nav> 元素通知了网页的源代码解析器（例如谷歌）导航是指导性的元素，而其中的内容仅仅是网页主内容的补充。
结论
提供优秀的用户体验对所有用户都很重要，因此在设计 Web 应用时不要忽视残疾用户。使用富交互工具和 ARIA 属性以及对键盘访问性的处理，可以增强无障碍模式的功能，并提供更友好的用户体验。我们鼓励开发人员在设计和测试时，考虑到残疾人也是使用 Web 应用的重要用户之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67302a2feedcc8a97c913c34