原文： Accessibility Best Practices – What to Remember When Building Accessible Web Apps
任何人都应该能够使用你的网站和应用程序，包括残障人士和健全人士。这将增强你的网站的可访问性。
想想你创建的上一个网站，或者你最喜欢的网站，你是否确信任何人都能使用你的网站并执行其所需的关键操作？你是否考虑过患有运动障碍、视力障碍、认知障碍和听力障碍的人呢？
无障碍往往是事后才想到的问题。当需要发布一项功能时，我们会进行无障碍测试，然后发现我们的网站并不具有无障碍特性，于是就进行简单的修复。
创建一个无障碍网站是一项艰巨的任务。但如果我们从一开始就牢记无障碍，那么创建一个无障碍的 Web 应用程序就会容易得多。
在本篇文章中，我将介绍你在创建应用程序的过程中可以牢记的 5 件事，这样你就不必在最后一筹莫展了。
实现良好的无障碍需牢记的 5 件事
- 语义化 HTML（Semantinc HTML）
- Tabindex
- Aria 属性（Aria attributes）
- Role
- 键盘导航和屏幕阅读器（Keyboard navigation and screen readers）
简而言之，S.T.A.R.K。
如果你需要什么来辅助记住这一点，想想托尼-斯塔克（Tony Stark）。
让我们逐一了解如何在 Web 应用程序中使用它们。
语义化 HTML 是什么
使用语义化 HTML 对于无障碍非常重要。这是因为屏幕阅读器等辅助技术能够通过解析页面的 HTML 来解释页面上的内容。它们能让用户根据元素采取相应的行动。
例如，如果屏幕阅读器遇到一个按钮，它就会向用户发出信号，让他们点击该按钮。
让我们来看看不使用语义化 HTML 时会发生什么情况：
使用 div 而不是 button 创建按钮：
div 是容器元素，因此当屏幕阅读器遇到 div 时，它会自动认为这是一个呈现元素。
当屏幕阅读器用户遇到一个内含内容或子元素的 div 时，屏幕阅读器会宣布 role="group"，而用户将完全不知道这个 div 是交互式的。因此，请确保使用适当的语义元素来实现其目的。这是实现轻松实现无障碍的方法。
使用 CSS 写标题，而不是使用 h1-6 标记：
<h1> 和 <h2>等标题标记可以让辅助技术知道这是重要的文本，屏幕阅读器会提示 "标题"。
如果使用 CSS 而不是正确的语义来生成标题，屏幕阅读器就会忽略文本的重要性。
因此，请确保尽可能使用语义化 HTML。
Tabindex 是什么
添加 tabindex 可使交互式元素具有键盘导航功能。为元素添加 tabindex 后，用户只需使用键盘和/或辅助技术就能导航到该元素。
tabindex为0时，按默认制表顺序将焦点设置到元素上tabindex为-1时，使用 JavaScript 通过编程的方式让元素获得焦点- 不要为
tabindex赋值 > 1
但有一点要注意——你只能为交互式元素添加 tabindex。为 div 等元素添加 tabindex 并不是一种好的做法。
在这种情况下，请使用语义元素（如 button）来代替添加 tabindex，因为语义元素已经可以添加 tabbable，不需要额外的 tabindex 值。
Aria 属性是什么
aria-checked 和 aria-label 等 Aria 属性可为辅助技术提供额外信息。
Aria 属性是一组 HTML 属性，用于提供有关网页上元素的目的和状态的附加信息。这些属性尤其有利于辅助技术为用户提供更多的上下文和更好的导航。
一些常见的 aria-attributes 包括：
aria-label：用于为元素提供标签或名称aria-hidden：用于表示元素应从辅助技术中隐藏，这对用于布局但与页面内容无关的元素非常有用aria-describedby：用于将元素与描述关联起来，这有助于提供元素的上下文aria-live：用于表示元素的内容可能会动态变化，辅助技术应注意元素内容的变化
你可以将这些属性与标准 HTML 属性结合起来使用，以创建更易于访问的和用户友好的网页内容。
aria-role 属性是什么
你可以使用 aria-role 属性来定义 HTML 元素的用途并提供其语义。
例如，如果你正在使用 CSS 和 div 创建一个网格组件，你可以使用 role="grid" 让辅助技术了解该组件的语义。
一些常见的 aria-role 包括：
button：用于表示一个元素应被视为一个按钮alert：用于表示某个元素是一个提示框presentation：用于表示一个元素只是演示性的
使用 aria-role 时一定要谨慎。切记不要过度使用。
如何操作键盘导航和屏幕阅读器
许多有运动障碍的用户依靠键盘和辅助技术来浏览网页。因此，每个组件都必须能够使用键盘和屏幕阅读器进行导航。
你可以通过仅使用键盘导航网站来测试键盘的无障碍性。以下是一些常用键：
- tab 键，用于浏览网站的不同部分
- 空格键，用于选择元素，如复选框
- 回车键，用于按下按钮
在测试键盘导航时，请务必考虑以下几点：
- 焦点保持可见：确保你能清楚地看到页面上哪个元素获得焦点。焦点应始终保持可见。
- 选项卡顺序：在各部分之间切换时，切换顺序应遵循网站的自然流程和逻辑结构。不应在各部分之间来回跳转。
- 键盘陷阱：确保使用键盘导航时，焦点不会被困在某个元素上。例如，当打开模态框或焦点导航到日历或表情符号选择器等小工具时，就会出现这种情况。确保你在选择部件中的元素时，能够导航回网站。
总结
总之，在开发过程中进行无障碍测试是整个流程的重要组成部分，有助于为所有用户创建更可用、更无障碍的软件。尽早测试无障碍特性有助于为每个人提供良好的用户体验。
在下一篇文章中，我将介绍各种无障碍性工具以及如何调试无障碍性问题。你可以在这里注册，在收件箱中收到这篇文章。
在此之前，请享受你的假期！
圣诞快乐