网站可访问性是指一个人访问网站的能力,无论其残疾类型或严重程度如何。当我们建立一个网站时,我们通常不会考虑其他人会如何使用这个网站。更不经常的是,我们会考虑与我们截然不同的人会如何访问我们的网站。
例如,如果你是色盲(也许你已经是),你会如何看待你的企业网站?你的CTA还会脱颖而出吗?您是否仍然可以从现有的视觉提示中知道什么是可单击元素?
在设计、开发和维护一个网站的时候,网站的可访问性确实应该被考虑进去,这样才不会疏远你的潜在受众。有了这个网站可访问性清单,你就可以从更广阔的视角来审视自己的网站了。
首先,从一些角度来看如何
网站内容可访问性指南(WCAG)是一套规则,旨在为应解决的项目提供指导,以确保没有用户被排除在互联网使用之外。为了理解WCAG旨在帮助的一些类型的损伤,我们将看一看美国一些残疾的一些统计数据
- 8%(2600万)的男性和0.5%(160万)的女性是女性美国的色盲。
- 15%(4800万)的成年人是重听.
- 1140万(3%)的人有视力损害100万人失明(0.3%)。
- 有一个估计全世界有2.85亿视障人士,有3900万人完全失明。
这是一个非常多的人,估计有27%的人口有上述障碍,不包括身体上的障碍,可能会阻碍一个人如何与网站互动。您是否希望错过这些受众可能带来的机会?或者,更重要的是,您是否希望排除超过四分之一的人在您的网站上获得任何有意义的参与?
好消息是WCAG2.0和2.1标准清楚地记录了现场操作员应采取哪些措施来提高可访问性。起初,在查看所有技术要求时,这似乎是一项令人难以置信的艰巨任务,但请耐心听我说,我将分解一个简单、简短的网站可访问性检查表,其中列出了大多数用户可以轻松解决的项目。
执行网页可访问性审计
作为2018年计划的一部分,我们对Brafton.com进行了审计,但没有做得很好。但好消息是,我们很容易地解决了几个关键问题,而且情况要好得多。下面你可以看到我们审计的细节以及我们在审计过程中学到的东西。使用这个简单的网站可访问性检查表,结合谷歌的灯塔工具,你也可以开始更新你的网站,以满足WCAG标准。比较我们在Brafton考试前后的分数,我们将检查我们的检查表,并强调我们为纠正错误所做的工作。
正如你所看到的,我们一开始的可访问性得分是58分,但搜索引擎优化得分至少是100分。否则就尴尬了。
1.内容可通过键盘访问,元素可在选定时识别。
你能只用一个键盘来浏览你的网站并浏览内容吗?这是一个自动化工具通常无法确定的项目,但您可以轻松地测试自己。
2.所有图像都有alt文本。
Alt text不仅仅用于搜索引擎优化的最佳实践。Alt标记还用于屏幕阅读器,以确定图像的上下文。正确和描述性的alt标签对视力受损用户至关重要。
我们在这里有一些需要解决的问题,但这些通常是简单的修复。在大多数情况下,这只是更新CMS中的某个字段的问题。需要记住的一个关键因素是,所有图像都应该有一个alt标签,即使它只是一个空标签。空的alt标记表示该图像纯粹是装饰,没有内容值。空的alt标签通常用于标识或装饰分隔符。
3.内容闪烁不超过3秒。
如果你的网站上有任何闪烁的文字或其他元素,确保它们闪烁的时间不超过3秒。还记得那些老卡通片吗?它们眨眼太多以至于孩子们开始癫痫发作。我们真的不希望这样的事情发生在我们网站的用户身上。
4.存在Aria标签。
站点上的一些项目(如导航或表单)可能需要额外的标记来向屏幕阅读器和其他辅助技术表明它们的目的是什么。使用咏叹调标签实现这一点。虽然这一项确实需要更多的技术知识,但仍然应该注意。
5.链接具有可识别的名称。
确保你的所有链接都有一个清晰可辨的名字,用于可能有视力障碍的人。如果图像用于链接,这意味着确保它们具有alt标记。
在这个类别中,我们有相当多的项目需要修复。在建立我们的网站时,我们使用了一些技巧来让我们的内容和图像看起来像我们想要的方式。因为我们在最初的构建过程中并没有真正考虑可访问性,所以为了满足指导方针,我们需要做一些小工作。
6.适当的标题层次是适当的。
与SEO优化携手,确保您的页面使用正确的
7.使用语义语言(用于主要内容
在构建页面和模板时,有一些特定的项,它们本质上描述了其中包含的内容。一些常见的例子是
8.如果使用图表作为图像,则会提供文本替代方案。
通常,提供图形和图表是向页面添加丰富内容的好方法。但是,在添加这些元素时,应始终确保以alt文本格式或完整描述提供替代内容,并在文本中分解上下文和含义。
9如果使用视频/音频转录本,则提供字幕和/或描述性文本。
如果您的站点嵌入了视频或音频,则有许多要求使此类内容符合WCAG标准。你在网上找到的大多数视频都不符合WCAG标准,是的,YouTube就是其中之一(尽管这更多是由于用户上传视频而不是YouTube的无能)。
10.颜色对比就足够了。
另一个Brafton的设计失败,尽管我们没有修复。适当的颜色对比度对视觉损伤(包括但不限于色盲)很重要。对于Brafton,我们发现我们曾经非常重要的Brafton绿色与白色文本不符合3:1的颜色对比度。因为这是一个品牌问题,我们将在稍后的日期重新讨论这个问题,但我们选择不在此时进行此更改。
在设计你的网站或对现有网站进行更改时,意识到你所做的颜色选择将防止你落入我们落入的陷阱。
11页面元素描述页面上的内容。
正如页面上的内容一样重要,充分描述内容是至关重要的。这需要在页面上使用适当的HTML元素,但可以做得更深一些。
我们对Brafton的审计发现,我们的页面上有一部分表单没有为视力受损者提供上下文,尽管查看该网站的人可以直观地确定该元素的用途。
通过添加带有for=”“属性的标签,我们可以指定违规的
12错误被清楚地指出。
当错误发生时(不可避免地会发生),请确保向用户清楚地指示错误。常见项是表单填充,其中包含可能已丢失的必填字段,或者当用户单击页面上的某个元素时无法生成预期结果。
总之,我们把分数从58降到了94。
可能值得注意的是,如果我们决定调整配色方案以完全满足颜色对比度标准,我们可以达到完美的100,但是,如前所述,我们目前正在提交。
我们确实花了一些时间来修复我们网站的其他区域,而不是链接到可访问性;毕竟,我们不能把所有的黄色留在那里。
尽管这些工具和这个清单可以帮助您开始,有许多技术和视觉要求,以满足法规遵从性的法律标准。如果您的业务需要合规性作为任何法律要求的一部分,最好咨询专注于网站可访问性的专家公司,以制定全面的审计和实施战略。