页面无障碍实践

avatar
前端工程师

页面无障碍（Accessibility）

什么无障碍（Accessibility）？

在web开发中的无障碍意味着让更多的人尽可能的访问网站。包括那些在网页访问有障碍的人群。

1. 有视觉障碍的人群: 例如色盲、色弱。需要放大页面来展现页面真实内容或者需要借助页面阅读工具。
2. 有听觉障碍的人群：例如耳聋。这种情况的人一般对视频或者音频无感知，可能会借助音频阅读工具。
3. 有行为障碍的人群：行为障碍并不好定义。但是前端能做到的是在交互上是否可避免的让用户更少移动手或者是其他肢体。例如是否可以用键盘去直接操作页面的事件。完成想要的既定内容。
4. 有认知障碍的人群： 对于认知障碍的人群。所输出网站内容是不是更便于理解。比如将晦涩难懂的文字更正为更容易理解的视频。

无障碍辅助工具

辅助工具：帮助残障人士理解软件内容的工具。常用的辅助工具包括读屏软件、屏幕放大功能、语音转文字功能、字幕等。其中读屏软件的适配一般是一个前端开发者最容易忽略的。

常用的读屏软件

IOS的辅助功能-旁白

前往“设置”>“辅助功能”>“旁白”。确认“旁白”已打开。
轻点“旁白识别”。
然后，选择任意可用选项以打开相应功能。

打开旁白后，操作和日常的很不一样。需要了解下旁白的手势便于更好的操作手机。以下旁白的手势列表：

image.png

Android的辅助功能-talkback

talkback文档

设置路径：设置 然后 无障碍 然后 TalkBack

快捷键：同时按住上下音量键3s或者通过语音设置。

talkback 手势

image.png

无障碍测试工具

  • wave 可以下载免费的chrome插件，或者打开网站输入要测试的网址就回得到对应的无障碍评分。以及获取一些细则，可根据细则进行更正。

  • lighthouse chrome 评分建议

  • accessibility insights 支持chrome插件可以作为桥接在手机上做无障碍的基础测试。

  • 做持续化集成的工具有pa11y等。

无障碍在前端的实践

HTML

使用语义化的标签

语义化的标签能让阅读器更方便了解页面内容。在阅读内容的同时，在尾部添加一些结束词。 下面是我使用ios旁白阅读对一些标签的结束词介绍。

标签结束词
h1标题级别1
a链接
button按钮
input文本栏-轻点两下编辑
select按钮-轻点两下激活选择器
ul、li会有项目开头或结尾的描述

除以上阅读器会对不同的标签有不同的解释以外，语义化的标签还能够帮助阅读器更好的断句以及功能上的tab切换。

Roles

www.w3.org/TR/wai-aria…

除了使用语义化的标签。我们可以使用role属性对非语义化标签做出语义化的解释。

<div role="button"></div>

对于带有role="button"属性的<div>元素，VoiceOver将其解析为一个可点击的按钮。

常见的role属性有：

  1. role="banner"：标识页面或节的页眉部分。
  2. role="navigation"：标识导航菜单或链接集合。
  3. role="main"：标识页面的主要内容区域。
  4. role="complementary"：标识与页面主要内容相关但可以独立存在的辅助信息。
  5. role="contentinfo"：标识页面或节的页脚部分。
  6. role="form"：标识表单。
  7. role="search"：标识搜索功能或搜索框。
  8. role="region"：标识一个逻辑分块的区域。
  9. role="article"：标识独立、完整或可复用的内容单元。
  10. role="alert"：标识重要的提示或警告信息。
  11. role="dialog"：标识对话框或模态框。
  12. role="presentation"：指示元素不具有任何语义角色，仅用于呈现视觉效果。
  13. role="img"：标识一个图片元素。
  14. role="button"：标识一个可点击的按钮。
  15. role="link"：标识一个链接。

state

www.w3.org/TR/wai-aria…

state 对语义化标签的状态的描述。不同的角色的state是不同的。aria-checked属性用于表示一个可切换的元素（例如复选框或开关按钮）的选中状态。

<li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>

在iOS的旁白下，对于具有role="menuitemcheckbox"和aria-checked="true"属性的<li>元素，VoiceOver会将其解释为一个具有选中状态的复选框式菜单项并宣读"已选中，Sort by Last Modified"，指示该菜单项已被选中，并提供菜单项的文本内容。

一些小技巧

tabindex

在一般情况下，优先使用自然的DOM顺序和有意义的HTML标签结构来确保正确的键盘导航顺序和语义化。但是当自然的DOM顺序无法满足需求时。可以采用tabindex=0来调整焦点顺序。当tabindex="-1"元素不能使用tab键进行聚焦，但仍然可以使用js进行聚焦。

image-alt

阅读器对于图片内容的解析依赖于alt属性的内容，所alt以于可访问性非常重要，它可以帮助视觉障碍用户理解图像的内容和意义。

label

使用好label能够有效的提高表单的可访问性。在iOS的旁白下，会读取label的内容进行解释改input操作。

  1. 关联表单元素：
<label for="username">Username:</label> <input type="text" id="username">

2.使用嵌套：

<label>
  Username:
  <input type="text" id="username">
</label>

3.隐藏标签： 对于视觉上不需要显示的标签，可以使用CSS将其隐藏。

.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

<label for="username" class="visually-hidden">Username:</label> <input type="text" id="username">
avatar
文章
阅读
粉丝