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

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

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


猜你喜欢

  • Deno 中使用 WebSocket 的最佳实践

    WebSocket 是一种建立 Web 实时通信的技术。它允许客户端和服务端进行双向通信,允许实时推送数据,且不像 HTTP 请求一样需要进行多次请求。在前端开发中,经常需要使用 WebSocket ...

    15 天前
  • PM2 进程管理详解

    什么是 PM2 PM2 是一款现代化的 Node.js 进程管理工具,可以让您轻松地管理您的 Node.js 应用程序。它是一个生产就绪型的工具,可帮助您不仅管理您的应用程序,而且也提供了许多强大的功...

    15 天前
  • Babel 7.13.0 更新,始终走在前沿

    Babel 是一个广泛使用的 JavaScript 编译器,它可以将新的 ECMAScript 标准转译成靠近原生的 JavaScript 代码。而在最近的 Babel 7.13.0 更新中,除了增加...

    15 天前
  • 使用 Cypress 测试弹出口

    引言 在前端开发中,常常需要使用弹出口来交互数据。这些弹出口例如提示框、确认框等等,是页面主体的一部分,却需要额外的测试用例进行检验。本文将讲述如何使用 Cypress 对弹出口进行测试。

    15 天前
  • 学习 Chai 库之前需要掌握的 JavaScript 知识点

    1. JavaScript 中的值和类型 在 JavaScript 中,一切都是值。值分为原始值和对象。原始值包括数值、字符串、布尔值、null 和 undefined。

    15 天前
  • Tailwind 如何支持实时预览更改后的样式

    Tailwind 如何支持实时预览更改后的样式 如果你是一名前端开发人员,你一定不会陌生 Tailwind 。它是一种基于类的 CSS 框架,可以帮助开发人员快速构建网站和应用程序。

    15 天前
  • 如何使用 CSS Reset 重置 'input' 元素的默认样式

    在前端开发中,我们经常需要对网页元素进行样式调整以达到更好的视觉效果和交互体验。但是,不同浏览器对于网页元素的默认样式存在差异,这就可能导致样式不一致的问题。为了解决这个问题,现在有了一个常用的工具—...

    15 天前
  • GraphQL 查询中两个字段的值需要一致的解决方案

    在GraphQL查询中,我们常常需要查询两个字段的值是否一致,比如查询用户信息时需要同时获取用户的nickname和username,但又要保证这两个字段的值相同。本文将介绍一些解决方案。

    15 天前
  • 解决在 Fastify 中使用 Nodemailer 发送邮件失败的问题

    在使用 Fastify 编写应用程序时,我们可能会使用 Nodemailer 库来发送电子邮件。但是,有时候在使用 Nodemailer 发送邮件时会出现一些问题,导致邮件发送失败。

    15 天前
  • RxJS 实现数据流的缓存与共享

    RxJS 是一个强大的响应式编程库,可以通过它实现数据流的实时响应和复杂操作。在实际开发中,我们经常会遇到需要共享和缓存数据流的场景。本文将详细介绍如何使用 RxJS 来实现数据流的缓存与共享,并给出...

    15 天前
  • Express.js 中的日志记录与管理

    日志记录是任何 Web 应用程序的重要组成部分,能够帮助开发人员快速定位和解决应用程序中的错误和问题。作为一个流行的 Node.js Web 框架,Express.js 提供了一些内置的日志记录工具和...

    15 天前
  • PM2+Node.js 打造高可用 Web 服务

    前言 在现代 Web 开发中,高可用性是非常重要的。在处理大量请求和访问压力时,Web 服务的性能和可靠性非常重要。如果您使用 Node.js 开发服务端应用程序,那么您需要确保应用程序能够正确地运行...

    15 天前
  • 优化微服务的 RESTful API

    前言 随着云计算和微服务的发展,RESTful API 已经成为了开发者不可或缺的一部分。开发高性能和高可用的 RESTful API 对于微服务应用来说是至关重要的,因为它们需要在一个复杂的分布式环...

    15 天前
  • Sequelize 中如何实现权限管理功能

    Sequelize 中如何实现权限管理功能 在前端开发中,权限管理是非常重要的一项功能。Sequelize 是一个强大且极具可扩展性的 ORM 框架,允许我们在 Node.js 中使用关系型数据库。

    15 天前
  • 如何在 Koa 框架中使用 Mongoose 进行 mongodb 数据库操作

    在现代 web 应用中,数据库是不可缺少的一部分,而 mongodb 作为一种现代数据库,已经被广泛使用。在 node.js 生态系统中,Koa 是一种轻量级的 web 框架,而 Mongoose 是...

    15 天前
  • Redis 中最佳的内存使用方式

    Redis 是一个开源的内存数据结构存储库,它提供了速度快、可靠、可扩展的方法来存储和处理数据。在前端开发中,Redis 可以用于缓存用户数据、Web 地图或图像、地理位置等应用场景。

    15 天前
  • Vue.js 中如何实现动态加载组件

    引言 Vue.js 是一个流行的前端开发框架,具有非常强大的组件系统,但在实际的应用中,我们常常需要动态地加载组件以实现更灵活的功能。动态组件加载是 Vue.js 动态使用组件的一个非常重要的方面。

    15 天前
  • 解决 Angular 中对话框组件开启失败的 Bug

    在 Angular 应用程序开发中,对话框组件是一项非常重要的功能。 它们使我们能够向用户显示提示信息、询问用户确认或提供用于输入数据的表单等。 然而,有时在尝试打开对话框组件时,可能会遇到“组件开启...

    15 天前
  • Kubernetes 配置管理 —— 使用 ConfigMap

    在现代应用程序中,配置管理是至关重要的一环。应用程序的配置可能包含许多不同的变量,如数据库连接字符串、API 钥匙和密钥等。使用 Kubernetes,可以使用 ConfigMap 机制管理应用程序的...

    15 天前
  • 解决 ES6 对象扩展符 "..." 的语法问题

    在 ES6 中,对于对象的扩展,我们可以使用 ... 语法来进行操作。它可以用来将一个对象展开为多个参数,或将多个对象合并为一个对象。但是在使用 ... 语法时,有一些需要注意的语法问题,本文将会详细...

    15 天前

相关推荐

    暂无文章