- 2018年的文,搬运存档用 -
TL;DR
互联网产品最容易做到的无障碍优化,应该就是针对视障的了。色弱、高度近视、色盲…都算是视障人群,并不是所有视障用户都会使用 voiceover 或 talkback 之类的工具才能浏览页面。色彩对比度友好也应该成为页面要求的一部分。
对于我们耳熟能详的无障碍标签检测,在工具上,无论是 Chrome 插件(ChromeLens、aXe)还是命令行工具(aXe-cli、pa11y)都有很多可选, 甚至 Chrome 开发者工具中就有相应的面板。但最重要的是要用对标签。
企鹅 FM 从今年9月发布的3.8开始就在完善无障碍优化,现在 app 内的无障碍优化得到了不少视障用户的点赞。但在分享、活动、运营等场景还有部分 app 内的通过 webview 承载的内容牵涉到了不少 H5 页面。H5 的无障碍优化自然也不能落后。
此篇文章总结了 H5 无障碍优化的一些方法和流程上的思考。
FM 页面是一个高度组件化的页面,而且内容导向,没有特别多复杂动画承载视觉效果,按照以下步骤优化页面:
button
,不要什么都用 div
和 span
做了。html 标签太多了,想了解更多可以访问这里。
除了场景模拟外,ChromeLens 还可以追踪键盘轨迹,例如 tab 键的移动轨迹,这对开发者检测页面元素顺序很有帮助:
有的页面没有做过无障碍优化,可能在命令行里看检查情况伤眼。那也可以通过输出本地文件的方式,得到一份报告:
npm run test-a11y
pa11y({
actions: [
'click element #tab-1',
'wait for element #tab-1-content to be visible',
'set field #fullname to John Doe',
'check field #terms-and-conditions',
'uncheck field #subscribe-to-marketing',
'wait for fragment to be #page-2',
'wait for path to not be /login',
'wait for url to be https://example.com/'
]
});
就目前遇到的情况来看,做到:
大家都能轻松写出无障碍友好的页面。
广义上的“无障碍”其实指的不仅仅针对全盲的用户,听障、行动不便、智力障碍…等用户场景都应该包括其中。只是在互联网产品的前提下,视觉障碍用户大概是我们最容易优化到的全体。
其实大部分视觉障碍用户就在我们的身边:近视、远视群体、老人、色弱人群…笔者曾经参加过一次视障用户相关的义工活动里,发现很多视障用户不是完全看不见的,更多的是视力有严重问题,只能看到色块看不清文字内容。有一天我们变老了,也会成为这些“视障人群”,所以无障碍优化更应该从现在开始啊~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。