网络已经成为人们生活中不可或缺的一部分。而对于那些身体障碍的人来说，互联网对于他们的生活有着更重要的作用。但是，许多网站并没有为身体障碍的人提供友好的用户体验。无障碍性是 Web 开发中很重要的一部分，因为它不仅使得残疾人对内容能够更容易的获取，并且还可以改进整体网站的可用性和可访问性。在这篇文章中，我们介绍无障碍 Web 开发的十大技巧，它们能够帮助开发者打造更为友好和易访问的网站。
技巧一：无障碍表单
表单是网站的重要组成部分，它们提供了用户输入信息的机会。但是，很多人都忽视了它们的无障碍性。以下几个技巧可以帮助开发者为表单添加无障碍性。
- 表单控件应该使用标签标识类型。例如：label 下面的 input 标注为 email 以便屏幕阅读器识别并提示给用户。
- 为表单中的所有必填字段添加星号，这样屏幕阅读器就会发出提示。
- 表单提交按钮应该使用明确的标签，以便屏幕阅读器可以读出按钮的用途。
以下是示例代码，展示了一个无障碍表单的实现方式：
------ ------------ ----- ------------- -------------------- -------- ------ ---------- ------------ --------- ------- -----------------------------
技巧二：无障碍图片
在 Web 开发中使用图片，这些图片可能是标识性的，也可能是图像本身提供的信息，例如组织的 logo 或产品的照片。以下几种技巧可以增强图片无障碍性。
- 图像应该使用
alt属性，这样当图像无法显示时，屏幕阅读器就会读取alt属性中的文本。 - 对于没有特意意义的图像，可以在
alt属性中加入空值，比如alt=“”。
以下是示例代码，展示了一个无障碍图片的实现方式：
---- -------------- ------- ------ ---- -------------- -------
技巧三：无障碍键盘操作
上网的大多数人都使用鼠标进行网站导航和交互。但是，从技术层面上说，网站是应该被键盘完全操作的。开发者可以使用以下技巧让网站更易于键盘操作。
- 使用
tabindex属性来确定焦点顺序。通过tabindex为键盘用户提供优先级，这些用户通常比其他用户更倾向于使用 tab 键切换元素。 - 通过
:focusCSS 伪类来设计焦点样式。这对于视觉障碍用户特别重要，他们需要知道当前输入焦点的位置。
以下是示例代码，展示了一个无障碍键盘操作的实现方式：
-- ----------------- ------------------ ------
-- ------------------- -------------------- ------
-------
------- -
-------- --- ----- --------
-
--------技巧四：使用语义化 HTML 结构
语义化 HTML 是无障碍可访问性的基础，HTML 元素的正确使用很重要。以下是一些技巧，以帮助开发人员构建更具有语义性的 HTML 结构。
- 使用正确的 HTML 元素，例如使用标题元素
<h1>至<h6>对标题进行标记。 - 使用
aria-*属性使得非标准元素更有语义性。
以下是示例代码，展示了一个使用语义化 HTML 结构的实现方式：
--------
-------------
-----
----
------ -----------------------
------ -----------------------
------ -----------------------
------ -----------------------
-----
------
---------技巧五：无障碍视频
视频成为网站越来越流行的元素之一，但是，对于那些不能听到音频的人来说，这些视频变得没有意义。以下技巧可以帮助开发者为视频添加无障碍性。
- 使用
aria-*属性，如aria-describedby来描述视频的信息，如说什么、表演什么等信息。 - 使用字幕来为音频文件提供文本等其他形式的信息。
以下是示例代码，展示了一个无障碍视频的实现方式：
------ --------------- -------- -------- -------------------------------------
------ ------------------ ---------------- ------------ -------------- --------- --
-- -----------------------
-------------
---------------
----
--------技巧六：无障碍链接
链接对于用户来说是专门设计用于导航网站的重要部分。许多用户在使用键盘导航网站时希望更便捷地访问链接，并且希望页面中的链接能为引导用户以及描述链接的信息。 以下是几个在无障碍网站链接设计时应注意的事项。
- 为链接提供清晰的描述性文本，避免使用模糊的文本，如“点此”。
- 优化链接的排版和样式以迅速地让用户发现其中的链接信息。
以下是示例代码，展示了一个无障碍链接的实现方式：
-------- ---------------------------------------
技巧七：无障碍自定义样式
许多开发人员在使用自定义样式时忽视了无障碍性问题。以下是设计自定义样式时应注意的问题。
- 确保文本能够与背景色相对比，以保证较佳的可读性。
- 使用
:hover和:focusCSS 伪类设置样式，以允许键盘用户查看其被聚焦的位置。
以下是示例代码，展示了一个无障碍自定义样式的实现方式：
-------
- -
------ --------
----------------- --------
-
--------
------- -
------ --------
----------------- --------
-
--------技巧八：无障碍组件
Web 应用程序通常需要包含各种组件，例如下拉菜单、手风琴、标签页和模态窗口等。以下是设计无障碍组件时应注意的事项。
- 必须考虑键盘和屏幕阅读器用户的操作方式。
- 让组件的行为和交互具有无障碍性，例如利用 ARIA 标准，通过
aria-*属性传达更多信息。
以下是示例代码，展示了一个无障碍下拉菜单的实现方式：
------ ------------------------------- ------- ---------------- ---------------- ------- ----------------------------- ------- ----------------------------- ------- ----------------------------- ---------
技巧九：无障碍符号
一些文本中有成堆的字符和符号，显示这些字符和符号需要使用 Unicode，包括符号、箭头和三角形等。以下是设计无障碍符号时应注意的事项。
- 使用 HTML 实体和 Unicode 字符来比通用字符更具有描述性和可读性。
- 考虑使用 ARIA 属性和文本来提供更多有关符号和字符的信息。
以下是示例代码，展示了一个无障碍符号的实现方式：
-----------------------------------------
技巧十：测试无障碍性
为了确保网站能够为所有人提供无障碍性体验，开发者需要测试它。以下测试方法可以识别无障碍性问题。
- 使用评估工具，例如 WebAIM 和 Wave，以便检测网站中的无障碍性问题。
- 进行人工测试，以模拟用户不同的使用情景。
总结
无障碍性不仅仅是一个优秀的设计，而且是对于每个网站和 Web 应用程序的责任。 无障碍性使用一些已知的技术和标准，以提高数字产品的可用性和易用性，最终可以让每个人都能轻松地获得网站上的信息。这十个技巧提供了一些改进网站无障碍性的方法，让用户更轻松地访问您的网站。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653df0f97d4982a6eb78eb43