web无障碍实施细节（三）语音读取适配

提升屏幕朗读器对web应用的识别。

1.分析

视力障碍用户通常会使用屏幕朗读器，读取、操作web应用。

1.1 屏幕朗读器

屏幕朗读器软件会试图辨认和解释屏幕所显示的东西（或者，更准确地说，是标准输出的东西，无论是显示器还是其他）它的解释对用户会表现为朗读文本、声音图标或盲文输出设备。屏幕朗读器是一种辅助技术（AT），可用于帮助盲人、视力障碍者、文盲或学习障碍者，它通常和其他辅助技术——比如，屏幕放大镜——联合工作。

1.2 web应用可读性措施

• 使用标准html
• 使用ARIA

2.可访问性

屏幕朗读器软件读取web应用的时候，主要读取处于 焦点激活状态 的元素。

Voiceover 阅读内容：

元素的内容字段 + 元素状态 + 元素类型

例如，处于选中状态的单选，可选择的复选框等。

2.1 语义化元素

若是一个搜索按钮，使用标准html元素，如下：

<button class="btn btn-assist">Searchbutton>

button标签不仅提供了：

1. 按钮的样式（虽然有时会重新编写样式）
2. 键盘的可访问性
   • 使用tab键更换按钮
   • 回车键点击按钮

2.1 非语义元素、控件

有时候原生html元素在样式和功能上无法达到要求（eg，下拉多选菜单，各种radio），就需要使用非标准html元素来模拟原生元素。

若出于某些目的，需要使用div元素模拟原生button元素，就需要使用aria标签。

<div class="btn btn-assist" 
     role="button" aria-pressed="false" tabindex="0">
     Search
div>

这个时候就需要增加ARIA标签，提供辅助技术所需的缺少语义的方法，来“解释”元素的角色和状态。通常还需要使用JavaScript来模拟它的交互动作。

属性:

• role 角色
• aria-* 状态、描述、关联
• tabindex 是否可以被focus

3.可访问性优化

优化前读取demo

<div tabindex=“0”>
  <div>
      <p>HKG 14:20p>
      <p>Hong Kongp>
  div>
  ……
div>

优化后读取demo

<div tabindex=“0”>
  <div>
      <p aria-label="departure airport HKG , departure time 14:20">
           HKG 14:20
      p>
      <p aria-label="departure city Hong Kong">Hong Kongp>
  div>
  ……
div>

涉及：

• 产品确认语音内容
• 前端实施屏幕阅读器语音内容优化
• 嵌套赋值

其它优化适配方案：

• 表单元素的for和id
• aria-labelledby 和 id
• aria-label

4.相关规范

Accessible Rich Internet Applications (WAI-ARIA) 1.1
W3C Recommendation 14 December 2017