JavaScript 无障碍性教程

在当今数字时代，Web 应用程序已经成为人们生活的一部分。然而，这种随处可见的数字化工具往往也意味着许多人不能够访问 Web 信息，并享受数字化国际。 无障碍性 相关的设计与开发需求越来越被 Web 版本关注，以确保 Web 上的所有用户都能够访问和使用信息。无障碍性可以为你的网站或应用程序带来很多好处，如拓展你的受众，提高品牌信誉，提高整个网站的搜索引擎可访问性等。

第一步：为你编写的代码添加“标签”

在编写 HTML 的时候，许多开发者经常忽略了属性中的语义"词汇"，这可能会导致网站不够无障碍性。

其中，主要标签有：

  1. h1-h6:定义 html 的标题级别

  2. ol：定义有序列表

  3. ul：定义无序列表

  4. a: 超链接、锚点

  5. img: 图片

在编写Javascript时，如果标签没有被正确的定义它所需要的角色和语义，可能会影响到具有不同需求的用户，并可能导致自动化工具无法访问这些节点。 因此，很好的方法是使用 JavaScript / DOM，以确保可以正确地遍历和控制每个元素。

以下是一个例子，使用javascript 修改标题文本内容：

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

在这里，我们使用JavaScript 选择特定的标签id并更改其文本内容。

第二步：添加闪烁和暂停控制

一些用户可能患有特定类型的癫痫，他们可能会对不断闪烁的内容产生反应。网页可能会使用闪烁定制赞美之词或背景视频等编辑方式，但是这样做可能会对该类用户造成颠狂的反应，因此这种方法并不是一个好方法。然而，您可以通过添加CSS或JavaScript代码来控制闪烁或暂停，以帮助这些受众留在您的网站上。最有效的做法是安装插件来去掉背景色和防止闪烁。

以下是一个例子，显示如何通过 JavaScript 暂停和停止一个 video 播放：

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

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

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

在这里，我们使用 JavaScript 控制特定元素的播放和暂停。

第三步：为页面添加描述文本

在您的Web页面中，您还可能会包含其他屏幕阅读器无法识别的图像，视频或音频内容。这意味着那些使用网络技术的人将无法理解它们的意义。解决这个问题的方法是通过添加文字描述来传递这些信息。文本的质量不仅应该解释内容，还应该传达图片或视频的感知特征和环境，这些感知特征和环境用户可能无法通过各种媒体进行感知。这样，无论用户使用屏幕阅读器、辅助性技术还是普通浏览器，都可以获得完整的信息。

例如，以下是如何将“alt”属性用于img标记的示例：

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

在这里，我们在img标记中添加了一个alt属性，描述该内容是一张图片。

第四步：使用 ARIA 属性

ARIA是一种用于工具或网站界面构建的网站数据属性集，它有助于Web开发人员在不增加复杂性的情况下增强可访问性。它主要尝试解决屏幕阅读器无法理解的网站元素，以及一些用户可能需要的功能，但实际上在HTML规范中不存在。

例如，以下是如何为网站的表格添加ARIA属性以增强可访问性的示例：

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

在这里，我们添加了一个新属性aria-describedby，以帮助屏幕阅读器阅读表单。

总结：

本文详细介绍了JavaScript 操作无障碍性的教程。如果将无障碍性视为Web设计和开发的关键组成部分，它可以有效地拓展访问您网站和应用程序的人口。使用本文中提到的技术，您可以从中受益，同时也更好地服务于网站用户。无障碍性设计和开发不仅可以拓展您的目标用户群体，还可以提高品牌信誉，增强对您网站的访问量。

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

阅读全文

猜你喜欢

  • 利用 Next.js 构建 SSR 应用的最佳实践

    随着前端技术的不断发展，单页面应用（Single Page Application，SPA）已经成为了主流。然而，SPA 也带来了一些问题，例如 SEO 不友好、首屏加载慢、对爬虫的支持不好等等。

    9 个月前
  • Swoole 高性能网络编程实战

    前言 Swoole 是一个为 PHP 开发的高性能网络通信框架，以协程为基础支持异步 IO，可以用于构建高性能的 Web 应用、游戏服务器、聊天室等。 本文将向您介绍 Swoole 的基本概念、使用方...

    9 个月前
  • 在 Custom Elements 中使用 async/await 实现异步操作的技巧

    Custom Elements 为我们提供了一种定义自己的 HTML 元素的方式，从而使得我们可以创建定制化的、功能丰富的 Web 组件。但是，有些时候我们需要在自定义元素中进行异步操作，这时候就需要...

    9 个月前
  • Hapi 应用部署到容器中的方法探究

    前言 随着云计算和容器化技术的快速发展，将应用程序部署在容器中已经成为了现代化软件开发的一个主流方案。相比于传统的服务器部署方式，容器化部署具有更高的可移植性、可扩展性和安全性。

    9 个月前
  • 在 Node.js 项目中使用 ESLint 进行代码风格检查

    在 Node.js 项目中使用 ESLint 进行代码风格检查 在开发 Node.js 项目时，代码的可维护性和可读性非常重要，对于团队协作来说更是至关重要。而代码规范就是提高代码可维护性和可读性的一...

    9 个月前
  • MongoDB 中使用 $all 进行数组包含查询技巧总结

    在MongoDB中，我们经常需要根据关联的数据进行查询。其中一种情况是查找包含某些元素的数组。这时就可以使用 $all 关键字进行查询。本文将详细介绍在MongoDB中如何使用 $all 进行数组包含...

    9 个月前
  • Serverless 大减负：通过异步优化接口响应速度

    Serverless 是一种新的应用部署方式，它允许我们以函数为中心的方式来构建和部署应用程序。与传统的应用部署方式相比，Serverless 可以有效减少应用开发、部署、运维等环节的负担。

    9 个月前
  • CSS Grid 实现栅格化布局的方法

    CSS Grid 是一种全新的布局方案，它可以让我们更加灵活地进行栅格化布局。在开发前端网页时，栅格化布局是非常常见的一种布局方式，它能够帮助我们快速地实现响应式设计，适配不同的设备和屏幕大小。

    9 个月前
  • ECMAScript 2019 中 Optional Catch Binding 的应用场景

    ECMAScript 2019 引入了 Optional Catch Binding。这个特性允许开发者编写 catch 块时，可以不指定错误对象。Optional Catch Binding 的引入...

    9 个月前
  • Koa 中的参数验证技巧

    前端开发中，经常需要使用 Koa 框架来搭建服务器。但是，当我们需要对传入的参数进行验证时，Koa 框架并没有提供相应的验证功能。为了解决这一问题，本文向大家介绍一些常用的 Koa 中的参数验证技巧。

    9 个月前
  • Material Design 中的 TextInputEditText 使用详解

    Material Design 是谷歌推出的一种设计风格，为 Android 设计提供了非常优美、干净和极富层次感的视觉效果以及出色的用户体验。在 Material Design 中，TextInpu...

    9 个月前
  • 在 Kubernetes 中使用外部存储服务的技术总结

    背景 Kubernetes 是一个开源的容器编排工具，在容器化部署中有着广泛的应用。随着应用规模的不断扩大，容器中的应用数据也越来越多，需要更高效、更持久的存储方式。

    9 个月前
  • 在 Vue.js 单页面应用程序（SPA）中，如何精确地控制页面渲染顺序

    在 Vue.js 的单页面应用程序（SPA）中，页面渲染顺序的控制是一个非常重要的问题。有时我们需要确保某些组件在其他组件之前渲染，或者需要等待某些异步数据加载后才能开始渲染。

    9 个月前
  • 如何用 Express.js 实现 Websockets

    Websockets是一种基于TCP连接的双向通信协议，可以在客户端和服务器之间建立实时的、持续的、双向的通信通道。这种通信模式适合实现一些需要实时性和即时性的场景，比如在线聊天、协同编辑等。

    9 个月前
  • 在 React 应用程序中使用 Enzyme 进行 DOM 测试的最佳实践

    在 React 应用程序中使用 Enzyme 进行 DOM 测试的最佳实践 React 是现代 Web 开发中常用的前端框架之一。Enzyme 是一个流行的 React 测试工具，它提供了方便的 AP...

    9 个月前
  • 使用 Headless CMS 进行商用产品部署的最佳实践

    在现代 Web 开发中，为了提高效率和可扩展性，越来越多的网站和应用采用 Headless CMS 的方式进行内容管理。Headless CMS 是指没有自带前端展示的 CMS，所有数据通过 API ...

    9 个月前
  • ES6 中 let 和 const 的正确使用方法（使用 Babel）

    ES6 中 let 和 const 的正确使用方法（使用 Babel） 随着 JavaScript 语言的不断更新迭代，ES6 已经成为了当下的主流语言，特别是其中的 let 和 const 关键字，...

    9 个月前
  • GraphQL 中的事件溯源机制及解决方案

    前言 GraphQL 是一种用于 API 的查询语言和运行时环境，它能够在客户端进行联合查询、减少网络传输和提高查询效率。在应用开发中，GraphQL 已经越来越成为前端开发、服务端开发的热门技术之一...

    9 个月前
  • ES6 中的正则表达式使用技巧和特性详解

    正则表达式是一种用来匹配字符串的工具，是前端开发中常用的一项技术。ES6 中正则表达式的使用方式有很多新特性，本文将对这些特性进行详细说明，以及一些常见的使用技巧，在使用正则表达式时能够更加得心应手，...

    9 个月前
  • TypeScript 中的类和接口详解

    TypeScript 是一种静态类型的 JavaScript 超集，它可以在编写 JavaScript 代码的同时提供类型检查和更好的代码组织结构。在 TypeScript 中，类和接口是两个非常重要...

    9 个月前

相关推荐

    暂无文章