前言
无障碍是指可以让所有人（包括有残疾者）都能够方便地使用数字产品和服务的一个概念，随着社会的进步和人们对公正的期望，无障碍已经成为了一个越来越受重视的话题。针对数字产品，特别是 Web 应用程序，另一方面也是因为强制遵守 WCAG，所以最近几年的 Web 开发领域越来越注重无障碍实现。
本文将介绍5种最佳做法来实施无障碍目标，从简单到复杂逐一介绍，以便您在实际工作中的实现。
1. 语义 HTML 标记
HTML的语义标记可以让屏幕阅读器理解您网站的内容结构。通俗地说，这些标记描述了 HTML 元素的用途和其在页面中的位置，有益于许多用户（不只是有视觉障碍的用户）阅读和浏览网站。如果没有使用 HTML 的语义标记，屏幕阅读器将很难明确您网站内容的正确结构及重点内容，降低了用户体验。
以下是一些常见的语义 HTML 标记：
header– 定义一个页面或一个区域的标题。nav– 定义一个页面导航链接的容器。article– 定义一个独立自管理的内容块，比如博客文章。aside– 定义一个可选内容块，通常用于引用或侧边栏。section– 定义一个页面的区域。footer– 定义一个页面或一个区域的结尾。
以下是一个使用语义 HTML 标记的示例：
-- -------------------- ---- -------
--------
-------------
-----
----
------ --------------------
------ --------------------
------ --------------------
-----
------
---------
---------
---------
--------
--------------------
---------
-------------
-------------- -- -------------------
----------
-------
-------------
-----------
--------
----------
--------
------- - ---- --------
---------2. 表单标记
除了使用语义 HTML 标记，并且为需要填写的表单元素提供合适的标记也是很有必要的，这无论有没有障碍使用者，都会增加 UX。
以下是一些常用的表单标记：
label– 为每个表单元素创建标签，这样用户的屏幕阅读器可以朗读相关信息，还可以通过点击相应的标签选中文本框。input– 用于创建各种类型（例如文本框、单选框、复选框等等）的表单元素。textarea– 用于创建多行文本框。select– 显示一个下拉列表，用于选择一个或多个选项。option– 定义下拉列表中的选项。fieldset– 定义一个控件组的容器，每个组包含说明文本和一个或多个相关控件。legend– 为fieldset元素定义一个标题。
以下是一个示例：
-- -------------------- ---- -------
------
----------
-------------------
------ ----------------------
------ ----------- --------- ----------- -------------
------ -----------------------
------ ------------ ---------- -----------------
------ --------------------------
------ --------------- ------------- --------------- -------------
------ ------------------------------
------ --------------- ---------------- -----------------------
------ ----------------------------
--------- ------------- -------------------------------
------ ------------------------
------- ----------- --------------
------- ------------------------
------- --------------------------
------- -------------------------
-------------
------- -------------------------
-----------
-------3. 键盘导航支持
键盘是使用最广泛的输入设备之一，并且大多数可访问性工具都采用键盘输入。Web 应用程序应该支持键盘导航，以使所有用户都可以访问和使用您的网站内容。比如，岛国内部的一些开发团队就没有为小键盘布局的用户考虑的习惯（麻烦）。
以下是几个可以实现支持键盘导航的方法：
- 给当前元素设置
tabindex属性，并使用tab键或shift+tab使得当前元素被选中。 - 通过给某个元素添加
focus事件监听器来设置元素的焦点。 - 设计能够通过键盘移动页面上的元素或可访问交互组件，如列表、表单、弹出框等。
- 对于输入错误的场景，您可以在键盘焦点改变时（如在下一个表单元素内部按 Tab 键）对输入框进行验证，然后直接提示输入错误。
以下是一个支持键盘和鼠标的示例：
-- -------------------- ---- -------
---- ------------
------- ---------------- -------------------------------------------
------- ---------------- ----------------------------------------------
------- ---------------- ------------------------------------------------
------
---- --------- -------------------
-----------
---------------------
------
---- ---------- -------------------
-------------
---------- --- ------------
------
---- ------------ -------------------
-------------
------------------------
------
--------
-------- ------------ -------- -
--- -- ----------- ---------
---------- - ----------------------------------------------
--- -- - -- - - ------------------ ---- -
--------------------------- - -------
-
-------- - --------------------------------------------
--- -- - -- - - ---------------- ---- -
--------------------- - ------------------------------- -------- ----
-
---------------------------------------------- - --------
--------------------------- -- - --------
-
---------4. 图像替代文本
屏幕阅读器无法读取图像描述，因此需要为每个图像提供替代文本。这个功能可以使用 alt 标签来完成。特别是当图像是网页上的一个链接时，这一点尤其重要，如果没有文本说明，用户将不知道导航链接的目标所在。
以下是一些需提供替代文本的图像的示例：
<img src="picture.jpg" alt="阳光草地"/> <a href="index.html"><img src="logo.png" alt="我的公司名"/></a> <input type="image" src="submit.gif" alt="提交"/>
您应该注意到，对于背景图像（使用 CSS background-image），您无法设置 alt 属性。对于此种图像，可以将其更改为以内容形式呈现的图像，或者向 HTML 实现者提供替代文本或 ARIA 属性。
5. ARIA 标记
ARIA 是 Accessibility for Rich Internet Applications 的缩写，通常是通过自定义属性添加来增强 HTML 的语义，以增强辅助技术的可用性，并改进 Web 页面的可访问性。
ARIA 属性在本质上并不是语义标记，但值得一提是，通过为元素添加 ARIA 规范中定义的属性，我们可以提供对于盲人、弱视和其它障碍用户更有用的交互经验，从而提高可访问性。通常可使用下列属性：
aria– 描述角色和状态的顶层属性。role– 描述元素的语义角色。aria-label– 提供一个对屏幕阅读器可访问名称的简短说明。aria-labelledby– 提供一个到标注自身的区域检索条目的标识符。aria-describedby– 提供一个包含有关元素更多信息的 ID 引用。
以下是一个实现了 ARIA 属性的示例：
<div role="alert" aria-labelledby="alert-header alert-message"> <h2 id="alert-header">错误</h2> <p id="alert-message">用户名不能为空，请填写用户名</p> <button aria-label="关闭警报" onclick="closeAlert()">关闭</button> </div>
结论
对所有用户都友好的 Web 应用程序是必要的，应该是任何人都可以访问您网站内的所有信息。实施无障碍目标的五种最佳做法是：使用语义 HTML 标记、表单标记、提供键盘导航支持、为图像提供替代文本和使用 ARIA 标记。通过遵守这些建议，可以更容易地实现无障碍内容，并使其可供所有人所使用。
引用文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c5b809babaf620fb069d8