Web 可访问性与无障碍最佳实践

Posted kayo5994

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web 可访问性与无障碍最佳实践相关的知识,希望对你有一定的参考价值。

Web 无障碍开发知识

对于 Web 开发者来说,可以通过调整 html 的结构和标签,增加 HTML 属性,配合 CSS 和 javascript 等手段来提高页面的可访问性和无障碍性。例如使用了 a 标签制作了按钮,如果不进行额外的优化,读屏软件在朗读时会读作"文字内容 链接",但实际上该 a 标签是用作按钮使用,因此可以在标签上添加 role="button" 属性。此时,读屏软件会读作"文字内容 按钮"。

可以看到,读屏软件在朗读时会在结尾朗读出元素的属性,这也是无障碍优化中重要的一环。无障碍优化就是要解决如何使得元素的属性被正确识别,如何使得元素的内容被清晰准确地朗读,如何排除干扰元素等问题。在了解 WeRead H5 的无障碍优化处理之前,首先需要了解 Web 无障碍开发的基础知识,及读屏软件的工作方式(以 Apple VoiceOver 为例),可以参考以下资料:

  • 页面无障碍基础知识:Accessible Rich Internet Applications (WAI-ARIA) 1.1
  • 无障碍教程:可访问性 - 学习 Web 开发 | MDN
  • 读屏软件的使用:VoiceOver - iPhone 使用手册

WeRead H5 的开发细则

我们参考 WCAG 2.1,在微信读书 H5 项目中总结了一些无障碍开发的最佳实践。

DOM 的顺序很重要

读屏软件在读屏时默认按照 DOM 的顺序朗读,因此如果 DOM 的顺序与内容的语义顺序不一致,例如使用了 flex-direction: row-reverse; 使得内容的顺序倒序显示,会使得内容难以理解。因此尽量避免使用会影响到 DOM 视觉顺序的样式,如果无法避免,需要手动设置 tabIndex 属性,告知读屏软件正确的内容顺序。

为非文本元素提供文本说明

图像使用 alt 属性描述图像内容

<img> 标签需要加上 alt 属性,读屏软件会自动读出 alt 的内容,例如 alt 内容为"一只目光汹汹凝视远方的猫",那么会被读作"一只目光汹汹凝视远方的猫 图像"。如果没有添加 alt 属性,那么仅会读作"图像",视障用户会完全无法理解其实际含义。

但是,当 <img> 标签出现在 <a> 标签内部,作为一个图像链接时,应在 <a> 上使用 title 属性,<img> 标签可不加 alt 属性。

视频使用 title 属性

与上面的 <img> 标签相似,<video> 标签需要加上 title 属性,例如 title 内容为"一只正在奔跑的猫",那么会被读作一只正在奔跑的猫 视频"。

使用语义化的元素

尽量使用语义化标签

语义化的 HTML 标签,例如 <header> <footer> <nav> <section> <main> <aside> <button>,使用语义化的标签,主要影响两个方面:

  • 选中元素时是否会整块选中
  • 朗读时结尾会加上怎样的修饰词

其中默认设置下,目前仅 <button> 标签可以使得选中元素时会整块选中,而不单独选中子元素。至于修饰词这里列举具体的情况:

  • <header> 读作"xxx 横幅 标志性内容"。
  • <footer> 读作"xxx 页脚 标志性内容"。
  • <nav> 读作"xxx 导航 标志性内容"。
  • <section> 仅读作"xxx",没有结尾修饰词。
  • <main> 读作"xxx 主要 标志性内容"。
  • <aside> 读作"xxx 补充 标志性内容"。
  • <button> 读作"xxx 按钮"。
  • <a> 读作"xxx 链接"。

实际上,在浏览器内部,使用语义化标签会隐式加上特定的 role 属性,最后朗读时的结尾修饰词也正是这些 role 属性的值以及分类,其他 role 的值朗读时也可以以此类推,而以上标签与 role 属性具体对应的关系如下:

HTML 标签role 属性值
headerbanner
footercontentinfo
navnavigation
sectionregion
mainmain
asidecomplementary
buttonbutton
alink

以上 role 属性值的分类大多数都属于标志性内容。

role 属性

如果出于其他考虑,使用了非对应语义的标签,例如开头提到的使用 a 标签实现按钮,就需要添加 role="button" 属性来声明这是一个按钮。同理,其他类似情况也可以这样处理,主要的就是影响朗读时的修饰词。

禁用状态使用 disabled 属性

使用特定的 class 来增加禁用态样式是常见的手法,但由于 class 语义并不能被读屏软件识别,因此读屏时无法知道当前处于禁用态。可以改为使用 disabled 属性实现禁用态,例如:

<input type="search" name="q" placeholder="请输入用户名" aria-label="搜索用户" disabled/>
/* 禁用态样式 */
input[disabled] {
    opacity: .5;
}

会读作 搜索用户 请输入用户名 变暗 搜索栏,读屏软件会用"变暗"这个词表示搜索栏处于不可用的状态。而对于没有 disabled 属性的标签,例如 a 标签,可以使用 aria-disabled 属性达到同样的效果。

可使用 aria 标签向不存在原生语义的元素添加语义

  • aria-label="screen reader only label",用于添加朗读时的描述,读屏时会读出其中的内容,而忽略标签的原有的文字,例如为 a 标签同时添加 role="button"aria-label="额外的按钮描述",最终会朗读成"额外的按钮描述 按钮"。
  • aria-controls="main",用于给操作按钮关联控制区域,VoiceOver 上这个属性没有任何作用,但 PC 读屏软件中,添加了该属性后,可以把焦点从按钮快速移动到被控制区域。
  • aria-live="true",添加了该属性的元素,在其内容发送变化时,读屏软件会自动读出变化后的新内容。可以用于会动态刷新的元素,例如发现卡片上的“XXX人参与活动”,书城的换一批功能,用于监听实时变化的数据。实际效果可以参考这个 demo。
  • 更多属性详见:https://www.w3.org/TR/wai-aria/。

动画

可在 ios 下通过 CSS 选择器 @media(prefers-reduced-motion) 来针对开启了“避免动画”的用户取消动画。

隐藏屏幕外的元素

确保屏幕外的内容已通过 display: nonevisibility: hidden 隐藏(如浮动出现的 alert 和 banner 等),如没有隐藏,读屏软件仍会读出元素内容,但屏幕外的元素通常不希望被读出,如果不方便使用样式进行隐藏,可以为元素添加 aria-hidden="true" 属性,元素则会被读屏软件忽略。

常用场景

图像的编写

如上文所述,图像需要补充文字描述,补充时需要使用具体的内容标题,例如书籍封面,可以使用书籍名称,而不要直接统一描述为"书籍封面",同理用户头像也应该使用用户名作为描述文字。

按钮的编写

在 H5 中,为了避免一些浏览器默认样式的干扰,以及制作点击效果(具体原因),目前采用 a 标签实现。但从无障碍的角度考虑,a 标签默认会被当做链接处理,读屏时会读作"链接内的文字 链接"。

基础无障碍适配

需要加上 aria="button" 属性,例如:

<a class="test_btn" role="button" href="javascript:;">文字</a>

读屏时会读出"文字 按钮"。

增加描述文字

如果 a 标签内本身没有文字,例如以图片、背景色和边框制作的按钮,还需要加上 aria-label="描述文字",读屏时会读作"描述文字 按钮"的形式。当 a 标签内的文字对于视障人士不足以描述清楚按钮作用时(例如需要结合上下的元素,或者结合按钮本身的背景图才能理解按钮的含义时),也可以加上 aria-label 属性,aria-label 的内容会被优先读出,例如:

<a class="test_btn" role="button" href="javascript:;" aria-label="更完整的描述">文字</a>

多重标签嵌套

另外 a 标签内容如果有嵌套的标签,并不会影响文字被读出,例如:

<a class="test_btn" role="button" href="javascript:;">
    <span class="test_btn_inner">
        <span class="test_btn_inner_text">文字</span>
    </span>
</a>

读屏时仍会读出"文字 按钮"。

整块可点击元素的编写

在遇到 banner 等本身由多个子元素组成,但点击时为整块点击的元素,需要分为两种情况考虑:

使用 a 标签实现

如果使用了默认的点击效果,即使用了 a 标签实现外层框,读屏时子元素会被分别选中,但实际上单独读出每个子元素不能表达按钮整体的完整含义。因为,我们建议整块当作按钮处理,但一般无需添加 aria-label,让读屏软件直接按 DOM 顺序读出子元素的文字内容即可,例如:

<a class="welcomeBonus_packet" href="javascript:;" role="button" @click="packetRedeem">
    <div class="welcomeBonus_packet_info">
        <div class="welcomeBonus_packet_info_title">主标题内容文字</div>
        <div class="welcomeBonus_packet_info_desc">描述文字</div>
    </div>
    <div class="welcomeBonus_packet_btn">
        <span>提示文字</span>
    </div>
</a>

会被读作"主标题内容文字 描述文字 提示文字 按钮",视障人士会清楚这是整体点击的按钮,并且了解到其作用。如果部分内容不希望被读出来,精简朗读文案的时长,例如作用不大的辅助语句,可以单独添加 aria-hidden="true"

需要注意,可点击元素点击后跳转页面通常采用 role="link" 声明,而点击后进行一些操作则通常采用 role="button" 声明,读屏的时候结尾分别为"链接"和"按钮",但本场景下建议统一使用 role="button",因为 role="link" 并不会让元素整块被识别,实际体验上,整体识别能带来更好的体验,而视障人士对于"链接"和"按钮"的理解包容度也比较高。

使用语义化标签实现

如果无需使用默认的点击效果,建议使用语义化的标签实现外层框,例如 sectionaside,这样用户在使用“container 模式”进行读屏时,元素会直接被整体识别,而不会单独读出子元素。

以 VoiceOver 为例,双指旋转可以调节焦点选择的模式,”container 模式“下焦点仅会被 section 这类外层容器捕捉。

小程序注意事项

  • 小程序中目前仅支持 aria-role(相当于原生 Web 的 role)和 aria-label 两个属性,如果读屏时需要忽略某些元素,无法使用 aria-hidden 来声明,因此需要注意尽量让无需被读屏的元素不输出 DOM。
  • 小程序中没有语义标签,因此整块点击的元素只能加上 aria-role="button"

以上是关于Web 可访问性与无障碍最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

Web 表单上帮助文本的可访问性最佳实践

这 5 个前端性能测试工具,高薪大佬们都在用!

在片段和活动之间进行通信 - 最佳实践

实践:Kubernetes 集群中 DNS 故障的可观测性与根因诊断

JS最佳实践

Vue.js 中的片段