如何进行基本的可访问性审核

已发表: 2017-08-09

因此,您最近学习了很多关于可访问性的知识,但现在您想亲自检查您的网站,看看您需要改进的地方。 你怎么做呢? 是时候进行可访问性审核了! 在本教程中,我将向您展示基本可访问性审核的技巧,这将使您走上拥有更易于访问的网站的道路。

正如您从我的概述系列中所记得的那样,一个可访问的网站是可感知的、可操作的、可理解的和健壮的。 确保您的网站符合所有四个可访问性支柱的测试不涉及编码,所以不用担心。 我们可能会安装一两个 Chrome 扩展程序,但您稍后会感谢我的。 让我们开始吧!

注意:本教程假设您知道如何使用 Chrome Inspector,或提供的任何浏览器的基本开发工具。

可感知的

戴墨镜和平板电脑的飞轮可访问性审计女性的布局

从可感知开始,因为如果您的网站不能被用户感知,他们就不知道它的存在。 在这里,我们将关注三件事:文本替代、标题和颜色。

对于您网站上的每张不仅仅是装饰性的图片(这意味着它是信息的重要组成部分,而不仅仅是一种增强功能),该图片应该有一个alt属性。 您可以通过检查图像的源代码并查找属性来检查这一点。 如果它在那里,那就太好了! 现在我们需要确保属性的值是有用的。 alt 属性应该以告知视障用户的方式描述图像。 这不是将 SEO 关键字塞入您的网站的机会。 使您的描述简短、切中要害且有帮助。 应该为网站内容本身保存更长的描述。

伴随图像的是视频和音频内容。 在这两种情况下,您都需要提供某种字幕或内容转录。 您的视频应启用隐藏式字幕,或预先添加字幕。 对此进行测试就像在您的网站上启动视频并检查字幕一样简单。

最后,我们需要测试我们的颜色。 为此,我们将安装一个启用灰度模式的 Chrome 扩展程序。 安装后,再次加载您的站点并打开扩展程序。 注意难以阅读的区域。 从对比的角度来看,这些是您的问题所在。 从那里,禁用灰度并使用 Snook 颜色对比度检查器检查您的分数。 如果您手边没有它们,您将需要使用检查器来获取您的十六进制值。 请记住,任何小于 4.5(或 3.0 对于大文本)都是一个问题。

可操作

下一步是确保该站点是可操作的。 这意味着我们将测试键盘功能。 为此,请打开您的网站。 加载页面后,按 Tab 键。 发生什么了? 希望会弹出一个跳过链接。 如果没有,您至少应该在页面上的第一个链接周围有一个大纲。 理想情况下,您将拥有自定义样式的:focus状态,但最低限度应该是浏览器提供的。 从那里,继续按 Tab 键以确保您按照它们在页面上出现的顺序从一个链接转到另一个链接。 如果您的注意力一直在跳跃,那么您就会遇到需要解决的选项卡索引问题。 表单插件通常是这里的罪魁祸首。

飞轮可访问性审核人员在手机上的法兰绒布局

可以理解

接下来,我们将检查您的网站以确保其可读性。 毕竟,如果用户无法阅读您的内容,那么拥有它有什么意义呢? 这里的要求很简单:你的网站语言可以用代码来确定吗? 要检查,请打开检查器并查看主<html>标记。 它有lang属性吗? 如果是这样,你就清楚了。 您还需要确保使用不同语言的任何句段都应用了 lang 属性。

还有其他对可读性的 AAA 级检查,但这些超出了基本审计的范围。 不过,一般来说,除非您的目标受众受过高等教育,否则您会希望将您的内容保持在 6 年级的阅读水平。

站点不稳定的其他重要方面围绕错误消息和上下文变化。 更具体地说,缺乏它。 当用户给予焦点或激活输入时,不应发生重大变化。 除非以某种方式(箭头图标、帮助文本等)警告用户,否则页面不应跳转。 这些是您在使用键盘进行测试时会注意到的事情。

在测试表单时,错误消息也是如此。 错误应该清楚地显示给用户并留在屏幕上,以便他们可以更正错误。 即使是大型网站也经常出错。 他们忘记将焦点放在页面中有错误的部分,或者至少以某种方式标记它。 测试您的表格是否有错误,并确保信息清晰。 使用可靠的表单插件会对此有很大帮助,但不要依赖插件来完成所有工作。 您还需要确保不只是使用颜色(通常是红色)来表示错误。 实际文本“错误”非常重要,尤其是对于红/绿色盲的人。

除了错误之外,您的表格和输入应该有明确的说明。 浏览您网站上的每个输入,并确保非常清楚用户应该做什么。 例如,搜索表单除了放大镜之外还应该有一些东西。 一个简单的“搜索”标签就足够了。 确保您的用户知道如何处理交互式元素。 永远不要假设。

强大的

由飞轮可访问性审计 destop 布局,键盘前有图表和笔记本

最后,您的网站需要健壮。 这意味着该网站可与屏幕阅读器等辅助技术一起使用。 如果您的网站使用 HTML 格式良好,那么您应该没问题。 请记住,包括 Chrome 在内的一些现代浏览器将修复基本的 HTML 错误,或者至少尝试修复它们。 测试站点稳健性的最快方法是在 Safari 中加载站点并启用内置屏幕阅读器 VoiceOver。 如果您的网站无法正常工作,您需要解决这些问题。

包起来

这个审计教程很快,但这就是重点。 确保您的网站可以访问并不需要那么长时间,并且所需的工具很少。 要记住的重要一点是,您想设身处地为一个没有您认为作为普通用户理所当然的能力的人着想。 保持这种心态,您的审核将确保您的网站更易于访问。

如果您错过了它,请查看这个关于可访问性的系列:

  • 可访问性简介:第 1 部分
  • 可访问性简介:第 2 部分
  • 可访问性简介:第 3 部分