Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何测试你做的项目的可访问性

如何测试你做的项目的可访问性

作者头像
苏南
发布于 2020-12-16 02:56:05
发布于 2020-12-16 02:56:05
2K0
举报
文章被收录于专栏:漫画前端漫画前端

点击上方“IT平头哥联盟”,选择“置顶或者星标”

编者按:本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。

站在 Web 开发的角度,一提到网站的可访问性,可能大部分人最想知道的就是:如何评判一个网站的可访问性的好坏?是否有自动化的检测工具可用,可以很直接地指出问题所在和改进策略?

本篇文章就来聊聊这个话题,主要包括:

  1. 自动化测试工具
  2. 手动测试的方法和工具
  3. 可访问性需要覆盖的特性列表

一、自动化测试工具

比较常用的四个工具:

  • axe-core(https://github.com/dequelabs/axe-core) 是一个用于测试 Web UI 可访问性的引擎。可以将它合并到自动化测试套件中,在命令行中运行
  • 浏览器扩展 aXe(https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?utm_source=chrome-ntp-icon) 或者 WAVE(https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?utm_source=chrome-ntp-icon)
  • Chrome 插件 Lighthouse(https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?utm_source=chrome-ntp-icon),它内置了 axe-core,也能提供可访问性检测
  • Chrome 开发者工具里也内置了可访问性检测,见 Audits 面板(它内置了 Lighthouse)

我们就以 Chrome 开发者工具里的 Audits 面板为例,看看自动化检测工具都提供了哪些功能。

下图是 Audits 面板:

用它检测360课程培训(https://www.so.com/zt/training.html#/?q=%E4%BC%9A%E8%AE%A1&srcg=a11y)页面,审计结果如下:

结果涵盖了以下五个方面:

  1. 对比度
  2. 表单控件的名字和标签
  3. 需要手动检查的项目
  4. 通过的测试项
  5. 未应用到的项

1. 对比度

对比度属于可阅读范畴,检测结果显示“背景色和前景色没有足够的对比度”(点击 文本元素必须与背景有足够的颜色对比度(https://dequeuniversity.com/rules/axe/3.3/color-contrast)查看更多)。

呃,修改这个...似乎有点难度,因为绿白是360搜索的主题配色。那有没有什么“曲线救国”的方式呢?答案是有的,高对比度模式。至少我们可以做到,在开启高对比度模式的时候,页面 UI 仍然是可见&可用的。比如安装了 Chrome 插件 高对比度模式(https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph),开启“增加对比度”后,页面长这个样子:

大家也可以尝试其它选项,比如翻转颜色。高对比度模式,可以开启操作系统级别的,也可以开启应用程序级别的。

2. 表单控件的名字和标签

检测结果显示“表单元素没有关联的标签”(点击 input 元素必须要有标签(https://dequeuniversity.com/rules/axe/3.3/label)查看更多)。

一般情况,表单控件需要有以下信息:

  • Role 角色,比如是编辑文本、单选框、复选框、还是按钮
  • Name/Label 名字,用来说明字段的含义。比如要输入的是“姓名”,还是“城市名”;要选择的是“性别”还是“日期”
  • State 状态,比如下拉框是否展开,单选框或多选框的选项是否被选中
  • Value 值

这些信息都会传给无障碍树,以方便辅助技术更好地“理解”页面。无障碍树类似 DOM 树,只是 DOM 树是给网页的渲染引擎用的,而无障碍树是给辅助技术用的。比如,下图就是一个简化版的无障碍树。

3. 需要手动检查的项目

自动化检测的 cases 覆盖不全可访问性的所有特性,需要我们手动测试。包括:键盘焦点的顺序是否合理、可交互元素是否易于理解、是否有键盘陷阱、自定义组件是否也易于理解和使用等等。详见下图。

机器的自动化检测有覆盖不到的情况,也不难理解,毕竟“可访问性”本身就是为了方便“人”使用。需要手动检查的项目,我们在第二小节中介绍。

4. 通过的测试项

通过的测试项,包括:按钮有可访问的名字、文档有标题、id 唯一、图片有alt属性等等。详见下图。

5. 未应用到的项

自动化工具只能检测可访问性问题的子集,因此手工测试必不可少。

二、手动测试的方法和工具

关于手动测试,重点和大家分享三点:键盘的可访问性、屏幕阅读器、缩放功能。

键盘的可访问性

重点关注页面上的所有可交互元素,须同时满足以下两点:

  • 元素可被选中,当按Tab键时
  • 元素可交互,当按Enter/空格/箭头键/Esc键时

我们继续以 360课程培训(https://www.so.com/zt/training.html#/?q=%E4%BC%9A%E8%AE%A1&srcg=a11y)为例,下面是手动测试的结果:

页面

可交互的元素

Tab键可被选中

可交互

说明

头部

logo

通过

通过

按Enter跳转至列表页

input 框

通过

通过

按Enter可执行搜索

“搜一下”按钮

通过

通过

按Enter可执行搜索

筛选区

课程

通过

不通过

1. 按Enter键,打开弹层2. 按方向键,在弹层里选择元素3. 按Esc键,关闭弹层

形式

通过

通过 80%

按Enter可进行筛选可优化为:1. 按Tab进入下一个筛选项“级别”2. 按Tab+Shift进入上一个筛选项3. 按箭头键可在本层内的选项前后移动“不限/线上/线下”4. 按空格键可触发筛选交互

级别/设置/周期

同上

已选条件

通过

通过 10%

1. 按Enter键重新筛选2. 但此时,键盘焦点丢失

列表区

图像/标题/按钮

通过

通过

按Enter跳转至其它页面

翻页区

按钮

通过

通过 80%

1. 按Enter触发翻页2. 按Tab进行下一项3. 按Tab+Shift进入上一项同理,可优化成“形式”的交互

屏幕阅读器

操作系统都有自带的屏幕阅读器,我们就直接用它了。比如 Mac 上的 VoiceOver(https://webaim.org/articles/voiceover/),在“系统偏好设置/辅助功能/VoiceOver” 中启用它。

首先简单介绍下它的键盘操作,更多信息可查看上面截图里的“使用指南”。

  • 在运行 VoiceOver 时,普通的键盘操作保持不变。比如TAB Shift+TAB 箭头键 空格键 Enter等
  • CMD+L 跳到地址栏,可输入URL
  • CTRL+Option+U:打开 Web Router,即导航面板
  • 在打开 Web Router 的情况下:
    • CTRL + Option + ← ↑ ↓ →:浏览内容
    • CTRL + Option + CMD + H:逐个标题向前移动
    • CTRL + Option + CMD + H + Shift:逐个标题向后移动

本次重点和大家分享下它的 Web Router,即导航面板。它主要有四种导航形式:按标题导航、按页面结构导航、按表单元素导航、按链接导航。

以下是 360课程培训(https://www.so.com/zt/training.html#/?q=%E4%BC%9A%E8%AE%A1&srcg=a11y)页面上四种导航的截图:

按标题

按页面结构

按表单控件

按链接

我们发现,导航信息还是有一些不足的。比如:

  • 按“页面结构”导航时,信息有点单薄。比如我想告诉屏幕阅读器用户,页面有搜索区域、筛选区域、列表区域和翻页区域
  • 按“页面结构”导航时,有混入不恰当的信息。比如“导航”,它其实是按钮式的翻页区域
  • 按“表单空间”导航时,不够全面。页面应该告诉用户还有个“筛选”区
  • 按“链接”导航时,呃...里面就有点一言难尽了。因为它混入了“筛选”区的表单信息,也混入了“翻页”区的按钮区

当用户第一次登录他们不熟悉的页面时,更倾向于用标题导航和页面结构导航;当他们熟悉了之后,按表单控件和按链接导航有利于提高他们的导航效率。

缩放功能

对于视觉障碍的用户,有时需要使用放大镜来阅读页面。这里介绍两种:

  • 页面缩放:浏览器自带的缩放功能
  • 设置大字体:浏览器里设置字号。比如chrome://settings/里的字号可以设置“特小、小、中、大、特大”

360课程培训(https://www.so.com/zt/training.html#/?q=%E4%BC%9A%E8%AE%A1&srcg=a11y)网站是支持页面缩放的,感兴趣的小伙伴可以在线试用。

三、可访问性需要覆盖的特性列表

现在,我们对网站的可访问性有了更具象的认识。良好的页面可访问性,需要(至少)涵盖以下特性:

  • 足够的对比度
  • 表单控件需要有角色、名字或标签、状态
  • 良好的键盘可访问性:所有可交互的元素可被键盘选中、可与键盘交互;不可交互的元素可以不被聚焦
  • 使用恰当的标题和链接、良好的页面结构
  • 页面支持缩放

总结

本文主要讲了两部分,第一部分是可访问性的自动化测试工具,重点介绍了 Chrome 开发者工具的 Audits 面板;第二部分是手动测试网站的可访问性,包括键盘可访问性、屏幕阅读器的导航、页面缩放。

虽然自动化工具只测试了可访问性特性的一个子集,但它能帮助我们检测很多琐碎的细节,同时它也给出了非常全面的参考信息,里面的“learn more”链接非常贴心。

键盘可访问性和页面缩放,功能比较直观,理解起来也没有歧义,这部分完全可以通过 Web 开发人员的自测满足,测试量也不大。

让屏幕阅读器提供精简、准确的信息也是非常重要的,但这部分需要我们结合着屏幕阅读器的使用再进一步细化。

下一步

本文里其实已经暴露出了几个可访问性问题了,诸如已选条件的bug、自定义下拉框/弹层的键盘可访问性、屏幕阅读器导航信息不精准。这些需要通过 HTML 语义化和 ARIA 技术来解决,如何修复这些问题,咱们下回见~!

主要参考

https://developers.google.com/web/fundamentals/accessibility/

end -

用心分享 一起成长 做有温度的攻城狮

每天记得对自己说:你是最棒的!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 画漫画的程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
可访问性测试(无障碍测试)
网络是向所有人开放的,作为一个测试者(也是人),我们有责任检查它是否对所有用户开放。反过来,这将为业务的成功做出很大贡献,因为我们努力让每个用户都能访问应用程序。
FunTester
2023/08/04
8380
可访问性测试(无障碍测试)
无障碍设计
优秀的无障碍设计,不仅能让残疾人用户正常地与产品交互;还会为普通人提供更好的使用体验。
lucifer210
2019/10/24
1.4K0
无障碍设计
企鹅 FM H5 无障碍优化总结
企鹅 FM 从今年9月发布的3.8开始就在完善无障碍优化,现在 app 内的无障碍优化得到了不少视障用户的点赞。但在分享、活动、运营等场景还有部分 app 内的通过 webview 承载的内容牵涉到了不少 H5 页面。H5 的无障碍优化自然也不能落后。
kmokidd
2019/04/17
1.7K0
企鹅 FM H5 无障碍优化总结
Web Accessibility基础:构建无障碍的前端应用
Web Accessibility(网络无障碍)是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例:
天涯学馆
2024/08/19
1660
关于信息无障碍我们能做些什么
严格意义上来说,我是一名前端开发,清楚地记得我参与过的项目曾花费大量的人力和时间对网站的UI进行重新改版设计,尽可能多地吸引用户,也曾花费大量人力和时间优化网站的性能,想方设法地提高首屏加载速度,追求极致的性能体验。
ThoughtWorks
2019/10/28
9040
前端不止:Web内容的无障碍性 | 洞见
截至 2017 年 6 月,中国网民规模达 7.51 亿,中国手机网民规模达 7.24 亿, 中国网民中农村网民占比 26.7%,规模为 2.01 亿。
ThoughtWorks
2018/07/23
1K0
前端不止:Web内容的无障碍性 | 洞见
做了七年前端开发,我最近才意识到可访问性的必要......
作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
深度学习与Python
2022/04/19
1.8K0
做了七年前端开发,我最近才意识到可访问性的必要......
提升网站可访问性的CSS实践方法
随着互联网的不断发展,越来越多的人开始依赖于网络,如何让网站更加易于访问、易于阅读是一个至关重要的问题。本文将从多个方面介绍如何使用CSS来提升网站的可访问性。
很酷的站长
2023/10/07
2870
提升网站可访问性的CSS实践方法
简单了解下无障碍设计模式
一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的事情。
Jean
2018/10/31
5K0
使用浏览器开发工具测试网站可访问性的七种方法
有很多方法可以测试你的网站是否具有可访问性。服务、软件包,甚至是人工测试公司。他们都有自己的位置,通常最好是对真实的人进行测试。然而,对于一个快速的初步测试,你无需安装任何东西或支付服务费用。浏览器内置了开发者工具,这些工具具有出色的可访问性测试特性。以下是微软Edge和谷歌Chrome等浏览器的开发者工具。
winty
2021/03/09
1.3K0
10条提高网站可访问性的建议
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
frontoldman
2019/09/02
1.1K0
10条提高网站可访问性的建议
前端无障碍开发指南
30年前,Tim Berners-Lee 在欧洲核子研究中心创建了第一个 Web 网页,宣告了万维网的诞生。自此,万维网就承载着开放平等的愿景。
ThoughtWorks
2023/05/22
1.3K0
前端无障碍开发指南
50个能帮你节省时间的开发工具
本文列举出 50 个能够帮你提高开发效率,节省开发时间的 Chrome 扩展和 Web 应用,它们很有可能会在什么时候派上用场。老规矩,先转发、点赞、点再看三连,最后再慢慢阅读,千万别让它在收藏夹里吃灰。
疯狂的技术宅
2020/10/22
1.8K0
50个能帮你节省时间的开发工具
如何提高网站的可访问性?
关于可访问性的错误观念 可访问性影响所有用户,而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人的任何医疗或任何情境状况,无论是什么场景时间点。一些常见的压力案例原因是:
lyb-geek
2018/12/11
1.6K0
如何完成WEB标准的网站重构?
实际重构时建议采用 渐进式重构 策略,优先处理关键路径页面,同时建立 自动化检测机制 防止退化。
裕贞
2025/02/17
880
如何完成WEB标准的网站重构?
Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要
信息无障碍,英文词语来自“Accessibility”,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息(注意是任何人,无论是健全人还是残疾人,无论是年轻人还是老年人等等)。
周陆军博客
2023/05/07
9140
现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。
Sb_Coco
2023/03/11
7490
现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理
2021 年值得推荐的 14 款 Chrome 开发者插件
使用它你可以使用到许多不同的 Web 开发工具。一些最常用的包括快速清除会话 Cookie、显示元素信息、显示图像文件大小、显示地形信息和编辑 CSS。
ConardLi
2021/09/08
3K0
2021 年值得推荐的 14 款 Chrome 开发者插件
无障碍网页设计(A11Y):提升用户体验,践行社会责任
无障碍网页设计(A11Y)不仅是提升用户体验的关键举措,更是我们作为开发者、设计师和内容创作者,积极践行社会责任的重要体现。在这篇文章中,将探讨无障碍网页设计的核心价值,分享一些实用的设计原则与技巧,并通过代码示例来展示如何将这些理念融入到实际项目中。
Jimaks
2024/04/16
3570
写前端代码时请多为残障人士思考之『Accessibility』
Accessibility,通常缩写为 A11Y ,这缩写取的是首字母 + 中间字母长度 + 结尾字母,译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念,通过这个概念,让互联网访问公平变得可能。
陈大鱼头
2020/04/16
1.7K0
写前端代码时请多为残障人士思考之『Accessibility』
相关推荐
可访问性测试(无障碍测试)
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档