实施无障碍目标的5种最佳做法

前言

无障碍是指可以让所有人(包括有残疾者)都能够方便地使用数字产品和服务的一个概念,随着社会的进步和人们对公正的期望,无障碍已经成为了一个越来越受重视的话题。针对数字产品,特别是 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 标签来完成。特别是当图像是网页上的一个链接时,这一点尤其重要,如果没有文本说明,用户将不知道导航链接的目标所在。

以下是一些需提供替代文本的图像的示例:

---- ----------------- ------------
-- ---------------------- -------------- -----------------
------ ------------ ---------------- ----------

您应该注意到,对于背景图像(使用 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 属性的示例:

---- ------------ ----------------------------- ---------------
  --- -------------------------
  -- -------------------------------------
  ------- ----------------- ----------------------------------
------

结论

对所有用户都友好的 Web 应用程序是必要的,应该是任何人都可以访问您网站内的所有信息。实施无障碍目标的五种最佳做法是:使用语义 HTML 标记、表单标记、提供键盘导航支持、为图像提供替代文本和使用 ARIA 标记。通过遵守这些建议,可以更容易地实现无障碍内容,并使其可供所有人所使用。

引用文献

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671c5b809babaf620fb069d8