开发者社区> 玄学酱> 正文

无障碍网站开发工具

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

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

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

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日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于低代码开发工具的思考
低代码开发工具研发的蓬勃兴起跟目前的业务软件开发现状息息相关,目前,信息管理系统的研发需求成爆炸式增长,其软件规模和复杂程度不断提高,业务系统开发随着复杂度的提高,开发的代码重复度越来越高,开发效率直线下降,人力成本越来越高,而很多的研发工作都可以用低代码开发工具所替代,从而得到解决目前困境的方法。本文通过对信管通低代码开发平台研发过程的所思所想,提出自己的一些观点,供同行商榷。
688 0
.NET开发不可错过的25款必备工具,徐汇区网站设计
【Csdn独家译稿 7月12日】这些年来,我们的.NET开发团队不断在更新升级开发工具,这也提供了一个机会,让我们能对.NET系列的开发工具做出不断的评估和规范。以下是我们总结出的一些.NET开发不可错过的高效工具。
1324 0
网站压力测试工具webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便。  1、适用系统:Linux  2、编译安装:  引用  wget http://blog.
731 0
iOS开发笔记 5、开发工具Xcode,Inteface Builder
开发工具使用Mac的安装盘或从apple站点下载 Xcode 开发代码使用 扩展名的分类 application delegate 需要处理的内容 ƒAt launch time, it must create an application’s windows and display them to the user.
616 0
无障碍网站开发工具
本文讲的是无障碍网站开发工具,构建一个无障碍网站对于像我这样从没用过任何辅助性技术的开发人员来说非常的具有挑战性。可及性问题不像布局等可视问题一样那么容易被发现,如果我们没有用合适的工具测试,它很容易就会被忽视掉。
1571 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20709
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载