无障碍网站开发工具

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

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

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

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日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
6天前
|
机器学习/深度学习 人工智能 算法
探索移动应用无障碍功能的设计与实现
【4月更文挑战第2天】 随着智能移动设备的普及,应用程序已成为日常生活的重要组成部分。然而,对于有视觉、听力或其他身体限制的用户来说,传统的应用界面和交互方式可能构成重大障碍。因此,本文将深入探讨移动应用的无障碍功能设计,分析现有技术标准与挑战,并提出创新性的设计理念和技术实现策略,以期推动更包容性的数字生态建设。
|
6天前
|
前端开发 UED
探索前端开发中的无障碍设计与实践
在当今数字化时代,无障碍设计已经成为前端开发中不可忽视的重要环节。本文将介绍无障碍设计的概念和原则,并结合前端开发实践,探索如何为用户提供更加包容和友好的用户体验。
56 2
|
6天前
|
移动开发 小程序 前端开发
小程序与现代化移动Web体验的完美结合
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
9月前
|
XML JSON 编解码
2023最新常用开发网站汇总
2023最新常用开发网站汇总
85 0
|
10月前
|
Web App开发 缓存 小程序
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
本文旨在帮助微信小程序开发工程师提升他们的开发技能,并介绍一些高效实用的开发技巧和工具,以提高开发效率和质量。我们将探讨一系列优化开发流程、提升代码质量、加速调试等方面的技巧,并推荐一些常用的工具,帮助开发工程师更好地进行微信小程序开发。
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
|
移动开发 编解码 前端开发
移动端H5网页开发必备知识
H5网页开发必备知识
81 0
|
前端开发 JavaScript 小程序
值得收藏的 开发网站
值得收藏的 开发网站
112 0
值得收藏的 开发网站
开发一个好网站
开发一个好网站的注意事项
APP开发移动APP开发定制
现在很多企业在使用app上都是一头雾水,但是还是有很多的企业都不能很好的利用自己的app去给自己的企业带来利益,而且也不能很好的运作手机app。
361 0
|
存储 安全 Java
程序开发必备工具推荐
工欲善其事必先利其器,作为程序员不光熟练掌握某种语言技能,相关的工具的运用和选择也相当重要,好的工具让你事半功倍,现在我向码农推荐一下工具,这些工具都是我目前在用的(主要针对Mac平台)