无障碍网站开发工具

简介: 本文讲的是无障碍网站开发工具,构建一个无障碍网站对于像我这样从没用过任何辅助性技术的开发人员来说非常的具有挑战性。可及性问题不像布局等可视问题一样那么容易被发现,如果我们没有用合适的工具测试,它很容易就会被忽视掉。
本文讲的是无障碍网站开发工具,

构建一个无障碍网站对于像我这样从没用过任何辅助性技术的开发人员来说非常的具有挑战性。可及性问题不像布局等可视问题一样那么容易被发现,如果我们没有用合适的工具测试,它很容易就会被忽视掉。

可及性设计并不是一定要做得完美无缺,它只需日渐精进就够了。

Leonie Watson at FronteersConf

有一些我经常使用并且对可及性开发大有裨益的工具,我想应该和大家一起分享。由于我大部分开发都基于 Chrome,所以这些工具更适用于 Chrome。

Accessibility Developer Tools 是一款由谷歌可访问性团队开发的谷歌 Chrome 浏览器扩展程序。这款扩展在开发者工具界面添加了一个名为 "Audits" 的嵌板,通过 Audits 我们能得到网页的网络利用率、网页性能,当然也包括可及性。

Screenshot of Panel

这款可及性检测工具会按照预定的可及性检查项对网页进行测试。它将会按照重要性列出任何需要修复的关键问题,同时也会列出已经通过测试的项目。

Accessibility Audit Results

除了可及性检测之外,我们能在元素审查中审查任何特定元素的可及性属性。在元素审查项中有一个新的名为 "Accessibility Properties" 的嵌板,它能够列出某特定元素的所有可及性相关的属性。

Accessibility Properties Inspector

Accessibility Inspector

作为 Chrome 的内测部分,一款 Accessibility Inspector 已经可以在 Chrome 开发者工具中使用了(隐藏在标记下)。

这款可及性审查工具是元素检测中附加的嵌板,名为“Accessibility”。这款工具让我们能够审查页面中的特定元素,并获取其可及性属性的信息。与可及性扩展程序不同的是,这款工具有更大的访问可及性 API 的权限,它可以提供给更加深入的元素可及性信息。

Screenshot

Tenon

Tenon 是一款极其有用的工具,它能在任何环境下鉴别 WCAG 2.0 和 Section 508 的问题,无论是本地开发环境还是生产环境。实际上它是一款付费的 API,也可以被整合到你的开发工作中,并且能为每一步开发进展提供深入的可及性分析。

另外,也有在线的免费工具,能够生成任何页面甚至一小段代码的可及性报告。

Chrome Vox

对于还没有使用屏幕阅读器的开发者来说,确保网站能够适应屏幕阅读器有点像猜谜游戏。Chrome Vox 就是一款可以用于 Chrome 扩展安装的简单易用的屏幕阅读器。安装成功之后,你可以通过它操作任何页面。

以下是我利用 Chrome Vox 做的一个导航至博客主页的样例 -

Using Chrome Vox Screen Reader

即便屏幕阅读器五花八门,Chrome Vox 也是一款能够简易上手并模拟体验屏幕阅读器的工具。

High Contrast (扩展)

High Contrast 是谷歌 Chrome 浏览器的一个扩展插件,它能够提高页面调色方案的对比度,通过此类工具来查看页面能够在配色的选择上助我们一臂之力。

键盘

最后,最简单也最有效的一个测试方法,试着只用键盘不用任何点击设备来操作网站。





原文发布时间为:2016年11月17日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
5月前
|
监控
必知的技术知识:iosavplayer视频播放器
必知的技术知识:iosavplayer视频播放器
|
6月前
|
人工智能 安全 API
发现一款提高工作效率的利器——ONLYOFFICE办公软件
发现一款提高工作效率的利器——ONLYOFFICE办公软件
300 1
|
Web App开发 缓存 小程序
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
本文旨在帮助微信小程序开发工程师提升他们的开发技能,并介绍一些高效实用的开发技巧和工具,以提高开发效率和质量。我们将探讨一系列优化开发流程、提升代码质量、加速调试等方面的技巧,并推荐一些常用的工具,帮助开发工程师更好地进行微信小程序开发。
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
|
XML JSON 编解码
2023最新常用开发网站汇总
2023最新常用开发网站汇总
118 0
|
XML SQL JSON
程序员开发常用的云在线工具
云在线开发工具:代码格式化,base64/md5加密解密,utf-8转换,时间戳在线生成
216 0
|
移动开发 编解码 前端开发
移动端H5网页开发必备知识
H5网页开发必备知识
144 0
|
前端开发 JavaScript 小程序
值得收藏的 开发网站
值得收藏的 开发网站
134 0
值得收藏的 开发网站
|
Web App开发 Windows
提升生产力!一款简单却功能强大记事工具
好记忆不如一个烂笔头,对于这句话的认识越来越深刻、强烈。
提升生产力!一款简单却功能强大记事工具
开发一个好网站
开发一个好网站的注意事项
APP开发移动APP开发定制
现在很多企业在使用app上都是一头雾水,但是还是有很多的企业都不能很好的利用自己的app去给自己的企业带来利益,而且也不能很好的运作手机app。
396 0
下一篇
无影云桌面