无障碍网站开发工具

本文讲的是无障碍网站开发工具,


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

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

Leonie Watson at FronteersConf

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

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

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

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

Accessibility Inspector

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

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

Tenon

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

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

Chrome Vox

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

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

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

High Contrast (扩展)

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

键盘

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





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


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

时间: 2024-10-27 22:17:40

无障碍网站开发工具的相关文章

移动网站开发工具Brandcast融资,传统建站软件未来堪忧

近日,移动网站开发工具Brandcast宣布获得了1390万美元的A轮融资,领投方为Shasta Ventures,跟投方为Correlation Ventures和Saleforce的CEO Marc Benioff. Brandcast成立于2012年,总部位于旧金山,其联合创始人兼CEO Hayes Metzger此前也曾就职Salesforce,也是借着此层关系,2013年4月 Marc Benioff便向Brandcast投资了180万美元. Brandcast为用户提供了一个无需代码

curl网站开发指南

我一向以为,curl只是一个编程用的函数库. 最近才发现,这个命令本身,就是一个无比有用的网站开发工具,请看我整理的它的用法. =================================== curl网站开发指南 阮一峰 整理 curl是一种命令行工具,作用是发出网络请求,然后得到和提取数据,显示在"标准输出"(stdout)上面. 它支持多种协议,下面举例讲解如何将它用于网站开发. 一.查看网页源码 直接在curl命令后加上网址,就可以看到网页源码.我们以网址www.sina

网站开发中, php所扮演的角色,以及与其他语言,工具或库的关系,这个问题很重要

问题描述 网站开发中, php所扮演的角色,以及与其他语言,工具或库的关系,这个问题很重要 网站开发中, php所扮演的角色,以及与其他语言,工具或库的关系,这个问题很重要 解决方案 php是一种web脚本语言,它主要用来编写应用层.web应用层需要iis或者apache这样的web服务器去执行.只使用php其实也可以开发一个完整的服务器端程序了.如果你希望一部分业务放在客户端执行,那么需要用js脚本.如果你希望调用一些别的语言的库,或者出于性能的优化,可以用C++写dll,用php模块加载.

开发工具-curl 模拟登录网站,表单数据的填写问题

问题描述 curl 模拟登录网站,表单数据的填写问题 10C <form name=form1 method=post action=""/Control""><input type=""hidden"" name=""id"" value=""2000""><table border=""0&qu

想 问一下,ASP.NET网站管理工具能不能脱离ASP.NET网站开发环境而独立成为一个站点。

问题描述 想问一下,ASP.NET网站管理工具能不能脱离ASP.NET网站开发环境而独立成为一个站点.也就是我不需要在网站服务器上安装ASP.NET开发环境,就可以用ASP.NET网站管理工具这个站点进行角色管理和角色授权.可以不?望回复解决,谢谢! 解决方案 解决方案二:管理网站和开发环境没有关系,只要有ASP.NET2.0就有那个管理了.解决方案三:我是说打开ASP.NET网站管理工具来配置角色和授权等可以吗解决方案四:有ASP.NET2.0就可以用ASP.NET网站管理工具这个站点进行角色

分享一款数据库代码生成的工具,非常简单,功能强大,速度快,非常适合中小网站开发

问题描述 分享一款数据库代码生成的工具,非常简单,功能强大,速度快,非常适合中小网站开发,适合Sqlite,Access,MsSql,MySql(Beta)等数据库这是我多年实战开发的一款数据库代码生成工具原文地址新建ASP.Net空网站TestWebSite修改Web.config添加以下内容添加引用,引用MaoCaiJun.DataBase.dll,MaoCaiJun.DataBase.Sys.dll,MySql.Data.dll,System.Data.SQLite.dll添加目录App_

Stout —— Go 开发的静态网站部署工具

Stout 是一个可靠的静态网站部署工具.用它将网站上传到 S3 比用其它工具更加可靠.它可以替代支付服务如 Divshot ,动态 web 服务器 Rails,或者手动上传您的网站到S3 或 FTP服务器. Features 版本脚本和样式文件,以确保您的网页部署时或部署后不使用不一致的文件集. 支持返回到以前的版本 不依赖于任何特定的构建工具或工作流(它是一个用 Go 写的独立的可执行文件) 不需要任何类型的数据存储维护状态或历史记录 可以由多个开发人员同时使用,不会有锁定或不一致的状态危险

新手:什么是PHP?网站开发为什么选择PHP?

PHP教程 PHP初学者教程 什么是PHP 为什么选PHP 一.什么是PHP?PHP的概念和简介 PHP是一种易于学习和使用的服务器端脚本语言.只需要很少的编程知识你就能使用PHP建立一个真正交互的WEB站点.本教程并不想让你完全了解这种语言,只是能使你尽快加入开发动态web站点的行列.我假定你有一些HTML(或者HTML编辑器)的基本知识和一些编程思想.网页教学网webjx.com 1.简介 PHP是能让你生成动态网页的工具之一.PHP代表:超文本预处理器(PHP: Hypertext Pre

十八款各有千秋的精选设计开发工具

  相比于在每月设计圈干货 里面漫无目的的"碰",不如试试 CodeGeekz 推荐的精选工具合集.这些精选的工具同样不拘泥于受众,不论你是设计师还是开发者,同样可以从中发掘出不少正好能用到的好工具,而且会更容易在有限的精品中发现正好用的上的干货 . 这次是CodeGeekz 的设计干货 专场!这里同样有最新的设计和开发资源,这里精选的工具大都是针对设计师.开发者和自由设计师,其中的JS代码.开源工具.CSS资源.设计素材 基本上大家都用的到. 列表中不仅有免费的工具,还有付费的工具.