百度前端技术学园

# 无障碍设计

# 课程目标

无障碍设计就是确保所有的用户都能轻松地访问你的内容。如果你的设计知识针对一群狭窄的用户群体，也就意味着你将所有失去具有永久残障或其他障碍的用户,所以你在开发网之初就应该确保可视设计具有无障碍性。接下来我们就来具体学习什么是无障碍设计(Web Accsessibility)。

您需要掌握：

  • 给网页设置合适语义 ARIA 和样式
  • 掌握合理的焦点策略
  • 了解如何满足 WebAIM 检查清单要求
  • 学习如何审计你的网站是否符合无障碍设计标准

# 什么是网页无障碍（Web Accessibility）

首先我们阅读下面的材料，学习网页无障碍是什么，了解面向不同类型用户构建网站的挑战.

在学习网页无障碍之前，这里推荐两个学习阅读的文档指南：

  • Web Content Accessibility Guidelines (WCAG) 2.0 (opens new window) :由研究无障碍性的专家制定的一组指导原则和最佳做法,目的在于有条理地向大众解释无障碍性的含义

  • WebAIM 清单 (opens new window):WCAG 是一组涵盖面特别丰富的指导原则,但是在日常开发和实际应用中使用起来可能会有点困难,所以，WebAIM 小组为了降低无障碍页面开发难度，提取了 WCAG 指南的精华,汇集了一份方便大家照着做清单

为了制作更友好的无障碍页面，我们有必要感受一下残障人士是如何浏览页面的。

阅读 屏幕阅读器指导 (opens new window) ,选择一款合适的屏幕阅读器，打开屏幕阅读器,开始浏览网站看看感受一下盲人是如何浏览网站的吧

# 制作无障碍网页

首先我们学习语义化，学习如何将语义化添加到 HTML 中构建出无论是盲人还是运动障碍的人都能访问无障碍页面

# 阅读

# 检查元素的名称

为了让屏幕阅读器向用户呈现语音 UI，有意义的元素必须具有适当的标签或替代文本。标签或文本替代项为元素提供了可访问的名称，这是在可访问性树中表达元素语义的关键属性之一。

当元素的名称与元素的角色相结合时，它会提供用户上下文，以便他们可以了解正在与之交互的元素类型以及它在页面上的表示方式。如果名称不存在，则屏幕阅读器只会宣布元素的角色。想象一下，在没有任何附加上下文的情况下尝试导航页面并听到“按钮”、“复选框”、“图像”。这就是为什么标签和文本替代方案对于良好的、可访问的体验至关重要。

使用 Chrome 的 DevTools 可以轻松检查元素的可访问名称：

  • 右键单击一个元素并选择 Inspect。这将打开 DevTools Elements 面板。
  • 在“元素”面板中，查找“辅助功能”窗格。它可能隐藏在 » 符号后面。
  • 在 Computed Properties 下拉列表中，查找 Name 属性。

# 任务一

先来练习一下最基础的，实现你的第一个无障碍页面。

你现在需要制作一个科普星球知识的网页，复制我们给出来样例代码webaccessibility01.zip (opens new window)，然后保存到本地。

使用 Chrome 无障碍开发者拓展程序检查这个网站元素,您将看到无障碍树结构 (opens new window)。显然这个页面对屏幕阅读器用户非常不友好的，比如用户不知道图片的内容,也不知道链接的信息

请你做出修改，让所有用户都访问页面，参考优化后无障碍树结构 (opens new window)

任务需求

  • 给页面提供简明的标题，让用户了解当前页面的主要内容或定位在流程中的位置。
  • 使用合适的标签让文本可访问,让屏幕阅读器用户更明确知识页面文本内容结构，而不是一些文本的堆砌。比如星球简介应到是页面一级标题，火星，木星应该是二级标题。
  • 完成图片元素的无障碍设计，对于有意义的图片提供简明的文本替代,可以添加 alt 或者 aria-labelledby 来实现。
  • 为点击跳转链接添加有意义的文本，让用户知道点击这个链接即将跳转到百度百科，而不是像“点击跳转”这样的填充词。

# 任务二

图标按钮在 Web 应用程序中非常常见，但它们通常存在可访问性问题。 请你使用 HTML、CSS 和 ARIA 使键盘和屏幕阅读器用户可以访问您的图标按钮。

复制我们给出来样例代码webaccessibility02.zip (opens new window)，然后保存到本地。

按下 Cmd + Fn + F5 打开 VoiceOver，按下 tab 依次访问这三个按钮，您会发现只能正常访问第一个按钮，并且正确获得它是一个 github 按钮。第二个只能只能得知它是一个按钮，而第三个按钮都访问不到。

请你编码实现这三个按钮都能无障碍访问，参考优化后无障碍树结构 (opens new window)

任务需求

  • 让屏幕阅读器成功读取第二个按钮信息为 github，并且内部的 i 图标标签是修饰作用，让它对屏幕阅读器隐藏
  • 让键盘用户能够成功访问第三按钮，按下enter或空格键，也向第一个和第二个按钮一样弹出您点击了第x个按键.
  • 实现让屏幕阅读器成功读取第三个按钮信息为 github ，内部的 i 图标标签同样是修饰作用，让它对屏幕阅读器隐藏。
  • 给键盘用户添加和普通用户一致的 CSS 响应样式，tab 键聚焦与按钮时也和用户鼠标悬浮按钮上方的样式一样

# 任务三

现在我们对一个完整的网站进行无障碍设计，学会用合理的语义标签结构页面形成站点地图，以及优化键盘用户的使用体验，设计合适的焦点策略

您现在开发了自己的个人博客。首先，复制我们给出来样例代码 blog.zip (opens new window) ，然后保存到本地。

打开页面会发现个人博客存在以下几点问题：

  1. 键盘用户访问导航栏，会先访问搜索按钮，在访问博客，文章。。。导航链接，会给用户造成一定困惑
  2. 现在头部导航栏链接可能还不太多，但是一旦头部导航增多，键盘和屏幕阅读器用户，必须浏览所有这些内容才能聚焦到主题内容，会造成非常不好的体验。
  3. 按下 Cmd + Fn + F5 打开 VoiceOver 或者打开其他的屏幕阅读器，然后按下进入 landmark 面板，发现面板什么也没有，请你使用合适的 h5 语义化标签，使你的标签更加的语义化，从而让辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。

请针对以上的问题，给你的个人博客给设计合理的焦点策略以及更语义化的结构。

任务需求

  • 请参考地标示例 (opens new window)，将 div替换成合适的语义化标签,使用语义化标签结构页面
  • 调整导航栏的导航顺序，让键盘用户访问顺序与 DOM 树顺序一致
  • 让用户能够进入网站快速进入到主题内容部分

# 任务四

现在我们来创建创建可访问的表格，复制我们给出来样例代码 webaccessibility03.zip (opens new window) ，然后保存到本地。

这个表格对于普通用户可能没有任何问题，用户可以根据表格的外观快速获取表格传递的信息，但是对于屏幕阅读器用户可能就比较吃力，因为他们无法将行或列作为数据分组关联在一起。

任务需求

  • 给表格添加合适的语义标签，语义化表格的结构。例如：
    • 添加表格标题，为屏幕阅读器用户提供有用的表格内容快速摘要
    • 表头使用<th> 元素定义
  • 根据内容结构给数据表格中的单元格关联行/列标题,以便提供给了屏幕阅读器可以理解的完整数据组

# WAI-ARIA 基础

现在进一步了解 WAI-ARIA，明白他如何提供有效的语义，以便接下来在有需要的时候提供无障碍优化。

WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么

# 任务

接下来，我们来实现无障碍表单。复制我们给出来样例代码 webaccessibility04.zip (opens new window),保存到本地

任务需求

  • 使用 label 元素提高表单可访问性，给每个字段表单组件关联字段名标签。比如点击姓名标签，自动聚焦姓名输入框。
  • 给年龄输入框添加合适的 aira 属性，让屏幕阅读器用户知道输入的范围
  • 除了用星号(*)表示必填字段外，也应通过添加 aria 属性屏幕阅读器用户也能识别必填字段。
  • 将性别单选按钮包裹在 fieldset 元素中以获得更好的可访问性 ，并且添加 legend 标签来为单选按钮组提供文字说明，从而让屏幕阅读器也可以朗读这些文字。
  • 让编辑输入框有简洁明了的占位符提示语。比如姓名输入框提示请输入您的姓名
  • 添加表单验证和错误显示:
    • 执行验证后，如果测试通过，则提交表单。
    • 如果存在错误 ，则我们停止表单提交，给验证不通过的表单组件添加aria-invalid=true,并且显示相应的错误信息，并将 tab 焦点聚焦到第一个错误字段。
    • 这些错误信息框也应当有合适的 aira 属性,比如：让屏幕阅读器能够读出这是 alert 提示框（通过添加role=alert实现）。

# 制作对视觉障碍用户友好的页面

# 任务

制作对色盲用户和屏幕阅读器用户友好的网页，确保所有文本满足最低色彩对比度,可以轻松改变用户的阅读体验，尤其是对有视觉障碍的用户来说。

同样复制我们给出来对比度练习样例代码 contrast.zip (opens new window) ，然后保存到本地。

如何发现低对比度文本

使用 Chrome DevTools 中 Lighthouse Audits (opens new window) 面板中的 Accessibility Audit 或者其他无障碍检测工具，审核页面并修复您发现的任何对比度问题,根据审计报告中的问题一一修复，使视力不佳的用户能够更加轻松地访问网站。

根据得到的审核报告 (opens new window)，查看第一个 article 元素的无障碍属性(ADT)，如图所示 (opens new window),会发现它的对比度只有 1.5，同样检查第二个 article 元素 ，如图所示 (opens new window),对比度只有 1.27 对于红绿色盲很难识别文本。

任务需求

根据WebAIM 检查清单的第 1.4.3 条建议 (opens new window),正文和图片的最低对比度应为 4.5:1。对于大号文本(比默认文本大 120%或 150%或更大),对比度可以调整到 3:1 。

可见第一个和第二个 article 元素 AAA 对比度要求，请您修复对比度，使其都符合 AAA 对比度要求。

# 自测问题

  • 无障碍设计关注的残障分为那几类？
  • 哪些元素应该有焦点,设置 tabindex 属性？
  • 屏幕阅读器会描述一个 Dom 元素的哪些内容？
  • WAI-ARIA 是什么？它有什么作用？
  • aria-labelledby ,aria-label ,aria-describedby 属性的应用场景是什么？有什么区别？
  • 如果元素的 CSS 属性设置为 display: none; 或 visibility: hidden,屏幕阅读器还能读到这个元素吗?
  • 元素的 CSS 属性设置为 width: 0px; height: 0px，屏幕阅读器又能不能读到这个元素呢?

# 提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

# 总结

依然把今天的学习用时，收获，问题进行记录

# 相关资料

← 异常处理机制 →