web无障碍访问

1、为什么要设计无障碍访问?

Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站:

  • 无论是身患某种障碍
  • 通过慢速的网络连接访问
  • 使用老旧或损坏的硬件
  • 仅处于某种不方便的环境

例如,在视频中添加字幕可以帮助失聪、有听力障碍或身处嘈杂环境而听不到手机的用户。同样地,确保文字样式没有处于太低的对比度,可以对低视力用户和在明亮的强光下使用手机的用户都有所帮助。

2、从哪些方面进行设计?

1. 跳过链接

每个页面的顶部添加一个直接指向主内容区域的链接,这样用户就可以跳过在多个网页上重复的内容。通常这个链接会放在 App.vue 的顶部,这样它就会是所有页面上的第一个可聚焦元素

xml 复制代码
<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink" class="skip-link">Skip to main content</a>
  </li>
</ul>

比如电子报纸,可能会有搜索框,公司横条,侧边栏,小模块等。就可以在顶部放入一个连接,用来跳入到主要内容区域。在非聚焦模式下也可隐藏连接。

2. 内容结构

确保设计可以支持易于访问的实现是无障碍访问最重要的部分之一。设计不仅要考虑颜色对比度、字体选择、文本大小和语言,还要考虑应用中的内容是如何组织的。

1. 标题

用户可以通过标题在应用中进行导航。为应用的每个部分设置描述性标题,这可以让用户更容易地预测每个部分的内容。有几个推荐的无障碍访问实践:

  • 按级别顺序嵌套标题:<h1> - <h6>
  • 不要在一个章节内跳跃标题的级别
  • 使用实际的标题标记,而不是通过对文本设置样式实现出来
2. Landmark

Landmark 会为应用中的章节提供访问规划。依赖辅助技术的用户可以跳过内容直接导航到应用的每个部分。你可以使用 ARIA role 帮助你实现这个目标。

HTML ARIA Role 地标的目的
header role="banner" 主标题:页面的标题
nav role="navigation" 适合用作文档或相关文档导航的链接集合
main role="main" 文档的主体或中心内容
footer role="contentinfo" 关于父级文档的信息:脚注/版权/隐私声明链接
aside role="complementary" 用来支持主内容,同时其自身的内容是相对独立且有意义的
search role="search" 该章节包含整个应用的搜索功能
form role="form" 表单相关元素的集合
section role="region" 相关的且用户可能会导航至此的内容。必须为该元素提供 label
3. 语义化表单

创建一个表单,可以i使用到以下几个语义化标签元素:<form><label><input><textarea><button>

  • label标签:描述所有表单控件的用途;使 forid 链接起来
  • aria-label:可以为 input 框配置一个带有 aria-label的无障碍访问名
  • 使用 aria-labelledby 类似于 aria-label,除非标签文本在屏幕上可见。通过 id 与其他元素配对,可以链接多个 id
  • aria-describedby 的用法与 aria-labelledby 相同,它提供了一条用户可能需要的附加描述信息。这可用于描述任何输入的标准
  • 避免使用占位符,默认情况下它们不符合颜色对比度标准;应当修改其颜色,让它看起来像是预先填入 input 框中的数据一样
  • 在表单中使用按钮时,必须设置类型以防止提交表单,也可以使用一个 input 元素来创建按钮
ini 复制代码
<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Name: </label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      :aria-label="nameLabel"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Please provide first and last name.</p>
  </div>
  <button type="submit">Submit</button>
</form>
相关推荐
单休好_好就好在比双休少一天几秒前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪几秒前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽几秒前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课几秒前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤151 分钟前
封装axios二方包
前端·http
饮茶三千2 分钟前
几个在开发中起大作用的CSS新特性!
前端·css
mrsk2 分钟前
React useContext 实战指南:打造主题切换功能
前端·react.js·面试
然我3 分钟前
闭包在类封装中的神技:实现真正安全的私有属性,面试必懂的封装技巧
前端·javascript·面试
小公主3 分钟前
别再用 props 一层层传了!React useContext 真正用法与 useState 深度解析
前端·react.js
帅夫帅夫5 分钟前
深入理解 JavaScript 的 const:从基础到内存原理
前端