无障碍网站开发工具

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

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

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

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日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
9月前
|
机器学习/深度学习 人工智能 算法
探索移动应用无障碍功能的设计与实现
【4月更文挑战第2天】 随着智能移动设备的普及,应用程序已成为日常生活的重要组成部分。然而,对于有视觉、听力或其他身体限制的用户来说,传统的应用界面和交互方式可能构成重大障碍。因此,本文将深入探讨移动应用的无障碍功能设计,分析现有技术标准与挑战,并提出创新性的设计理念和技术实现策略,以期推动更包容性的数字生态建设。
|
5月前
|
移动开发 安全 Android开发
移动应用与系统:探索移动开发的未来##
在当今数字化时代,移动应用和操作系统已成为我们生活中不可或缺的一部分。无论是用于个人娱乐、社交互动还是商业运营,移动设备和应用的普及程度都在不断增长。本文将深入探讨移动应用开发和移动操作系统的关键技术,分析当前市场趋势,并展望未来的发展方向。通过对技术细节和实际应用案例的剖析,帮助读者更好地理解这一领域的核心内容和发展动态。 ##
|
3月前
|
前端开发 开发工具 Android开发
移动应用与系统:探索开发之旅
本文将深入探讨移动应用开发和移动操作系统的相关话题。我们将从移动应用开发的基本概念开始,介绍一些常见的移动操作系统,如iOS和Android。然后,我们将通过一个简单的代码示例,展示如何在Android平台上创建一个简单的“Hello World”应用。最后,我们将讨论移动应用开发的一些最佳实践和未来趋势。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和启示。
|
4月前
|
数据可视化 项目管理 UED
有哪些免费的设计协作工具?推荐六款实用工具
设计协作工具在跨团队合作和远程办公中发挥着重要作用,能打破沟通壁垒,促进实时交流与创意共享。文中介绍了六款实用工具:板栗看板、Pixso、Figma、Invision、Miro和Trello,它们各具特色,支持从项目管理到设计协作的多种需求。未来,这些工具将朝着功能集成化、智能化辅助、跨平台兼容性和增强第三方集成等方向发展,以提供更好的用户体验。
有哪些免费的设计协作工具?推荐六款实用工具
|
4月前
|
移动开发 Java Android开发
移动应用与系统:探索移动开发的世界
本文将深入探讨移动应用开发和移动操作系统的相关话题。我们将从移动应用开发的基础知识开始,然后深入到移动操作系统的工作原理,最后通过代码示例来展示如何在实际项目中应用这些知识。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和启示。
|
6月前
|
开发者 语音技术 开发框架
用Xamarin打造无障碍移动应用:让每个人都能轻松使用你的软件的实战技巧和示例代码
【8月更文挑战第31天】本文将以技术博客形式,探讨如何利用 Xamarin 开发无障碍移动应用,确保所有用户无论身体条件都能有效互动。从理解无障碍需求到具体实现技巧,涵盖 Xamarin.Forms 的使用、无障碍文本及音频支持,并介绍高对比度与字体调整方法,助力开发者打造更具包容性的应用体验。通过实际案例与代码示例,帮助读者掌握无障碍设计最佳实践。
61 0
|
9月前
|
移动开发 vr&ar Android开发
移动应用与系统:探索移动开发的未来
【5月更文挑战第31天】本文主要探讨了移动应用开发和移动操作系统的相关话题。首先,我们将介绍移动应用开发的基本概念和流程,包括需求分析、设计、编码、测试和发布等阶段。然后,我们将深入讨论移动操作系统的发展历程和现状,以及它们对移动应用开发的影响。最后,我们将展望移动应用开发的未来发展,包括新兴技术和趋势,以及开发者如何应对这些变化。
|
9月前
|
移动开发 小程序 前端开发
小程序与现代化移动Web体验的完美结合
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
Web App开发 缓存 小程序
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
本文旨在帮助微信小程序开发工程师提升他们的开发技能,并介绍一些高效实用的开发技巧和工具,以提高开发效率和质量。我们将探讨一系列优化开发流程、提升代码质量、加速调试等方面的技巧,并推荐一些常用的工具,帮助开发工程师更好地进行微信小程序开发。
提升微信小程序开发技能:高效实用的开发技巧与工具推荐
|
Web App开发 安全 API
五款轻量级的办公软件,界面简洁且无广告
五款轻量级的办公软件,界面简洁且无广告
266 0
五款轻量级的办公软件,界面简洁且无广告

热门文章

最新文章