前言
无障碍是指可以让所有人(包括有残疾者)都能够方便地使用数字产品和服务的一个概念,随着社会的进步和人们对公正的期望,无障碍已经成为了一个越来越受重视的话题。针对数字产品,特别是 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