无障碍设计：必知必学的八个基础知识

随着数字产品的普及，越来越多的人使用电脑和移动设备进行日常生活和工作。但是，却有一个很容易被忽视的问题：许多人面临着使用数字产品的障碍，这包括老年人、残疾人以及那些视力不佳、听力受损或者手部行动不便的人。这个问题可以通过无障碍设计来解决。

无障碍设计就是在设计数字产品时考虑到一切可能的用户，并确保他们都能够轻松地使用产品。这不仅是职业道德问题，也是法律问题。根据《美国残疾人法案》和《网络无障碍法》，所有网站和移动应用必须遵循可访问性标准。

在本文中，我们将分享八个基础知识，让您掌握无障碍设计的基本要素并能够进行实践。

1.使用有意义的颜色和对比度

对于色盲、弱视或者视力严重受损的用户来说，字体颜色和背景之间的对比度非常重要。您需要确保字体颜色不会被混淆或者难以辨认，而且与背景颜色有足够的对比度。这样，无论用户使用什么设备或者浏览器，他们仍然能够清晰地看到您的内容。

以下是一些有意义的颜色和对比度的示例：

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

2.使用有意义的标签和表单元素

保证使用语义化的 HTML 标签而不是 div 或 span 。例如，使用 h1 标签表示页面标题，p 标签表示段落，ul 和 li 标签表示列表。这有助于屏幕阅读器用户快速了解内容结构。

此外，正确地使用表单元素非常重要。确保您的表单有标签，并且使用默认的表单小部件，例如小圆按钮、箭头、标记框等。如下所示：

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

3.使用适当的 ALT 文本和标题

针对图片及其它媒体内容必须要添加适度的 ALT 文本和标题，来辅助屏幕阅读器用户了解图像内容。在文本替换的情况下，也需要为每个链接元素添加有意义的标题。

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

4.提供可访问的表格

在设计表格时，需要确保其易于访问。使用 th 元素来标记表头单元格，使用 scope 属性来定义其作用域。此外，使用表单时应第一时间启用可访问性功能。

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

5.提供音频和视频的字幕和标题

对于视力障碍人士来说，提供音频和视频的字幕以及标题非常重要。确保您的视频和音频都有文字版的副本。如果您的视频有视觉注释，也可以考虑把这些注释写在文字文件中，并在视频的字幕中使用相应的时间戳进行同步。

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

6.提供可访问的键盘交互方式

有些用户无法使用鼠标或触摸屏幕时，键盘是他们唯一的选择。确保您的网站可以使用标准的键盘操作方式，例如使用 tab 键切换元素，并且确保键盘在激活状态下所连接最近的元素是当前元素，以及键盘可以操作在当前输入控件上的标签、关闭当前菜单或者模态框、以及执行提交和取消等操作。

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

7.使用语言信息标记来标识多语言

有些网站可能采用多种语言。针对此种情况，您需要把每个页面的语言写到 HTML 标记中。这样，屏幕阅读器就会自动将内容阅读成相应的语言。

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

8.测试并验证可访问性

在设计时要考虑到不同用户的情况，因此对于可访问性的测试非常重要。不断地检查您的网站或应用程序，并使用屏幕阅读器来测试简便性及操控。您还可以使用 WAVE 等在线测试工具来验证可访问性，并确保其已经达到需求标准。

结论

以上是无障碍设计的八个基础知识。在设计数字产品时，确保您的产品符合可访问性标准，并确保不会把用户排除在外。随着无障碍设计的特点的不断增加，我们在此基础上的知识也将更加深入，从而为更多用户提供更简便的用户体验。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/66eec2b96fbf9601972963b0