咨询电话:186 7916 6165 咨询电话:186 7916 6165 (微信同号)    在线QQ:181796286
DESIGN SHARING ·
设计分享
关注开优网络 关注前沿
After Effects vs. Premiere:二者有什么区别?
企业网站首页五种设计 让用户去“点一下”

10个帮助改善网站可访问性的工具

发表日期:2019-08-26    文章编辑:南昌开优网络    浏览次数:5278    标签:网页设计

毫无疑问,您一定很想了解如何能尽最大的可能使更多的用户访问你的网站。 但是阅读所有的指南和标准可能对你来说有点压力。 不过,今天你可以在此处找到最新的W3C建议,但是你是否需要了解每个点,并遵循每个建议,这就需要你的判断了。

今天,我们将尝试使用一些工具和资源来帮助提高网站的可访问性。

无论你是希望拥有足够的视觉对比度,在不同的设备上都能很好的工作,甚至是创建可访问的电子邮件,这些建议都能满足你的需求!

1.Color Safe


Color Safe可帮助你根据WCAG只能检查文本和背景颜色对比,检查(甚至创建)可增强视觉的调色板。 该工具和标准使用基于比率的公式来确定所有人都可以阅读。

WCAG指南建议小文本的对比度为4.5,大文本(超过24点的任何对象)的对比度为3。

只需输入你的颜色 - 基于HEX代码 - 字体选择和大小就可以马上生成调色板。 你可以立即检查比率,并可以看到其他类似的颜色搭配。 根据你的字体和大小,查看是否有类似的,可能是更好的选择。

2.NoCoffee



NoCoffee是一款Google Chrome浏览器扩展程序,可帮助你以与视障人士相同的方式查看你的网站设计。

它可以检查并显示以下内容:

· 低视敏度情况下的小文本或点击目标;

· 文本和背景元素的低对比度问题;

· 色盲;

· 雪花,眩光,鬼影和白内障情形下;

· 眼球震颤,或眼睛的快速不自主运动;

· 受阻的视野。

3.Contrast Checker



Contrast Checker允许你在屏幕上输入背景和前景色,并通过即时的颜色编码基于几个视觉标准来立即检查该搭配是否合适。

该工具的优点包括能够在彩色和灰度选项之间切换,共享颜色样板以及从图像中提取颜色。 你还可以保存PDF样本,它是一个简单的工具,但是具有许多功能,任何人都可以快速使用。

它还提供了颜色比率,如WCAG指南中所述。

4.Tota11y



Tota11y是一个JavaScript文件,它在文档的底角放置了一个小按钮。 用它可以扩展一个工具栏,其中包含用于不同辅助功能检查的多个插件。

· 标题和标题顺序是否违规;

· 链接缺少或混淆的文本;

· 输入中缺少的标签;

· 没有alt标签的图像;

· 标签是ARIA的标志;

· 屏幕阅读器,你可以像屏幕阅读器一样“阅读”该网站。

5.WAVE



WAVE,或网站辅助功能评估工具是一个强大的检查集合。

该工具使用与侧边栏中的信息相关的图标的视觉叠加,以提供从颜色对比度到冗余标题到HTML和结构元素链接的所有内容的详细信息。

免费版本的检查器几乎可以为你提供有关单个页面的任何信息,但WAVE还包括针对多站点所有者或希望一次查看多个页面的用户的付费计划。 它还包括Chrome和Firefox浏览器的扩展,可以在私有环境中检查Intranet,受密码保护,动态生成或敏感的网页。

6.508 Checker



508 Checker可以测试URL以确定网站是否符合美国508合规性指南,这是法律要求的任何接受联邦资助的组织站点都必须通过的要求。

虽然此工具是免费的,但你必须注册以查看扫描的完整结果。

该网站还包括其他工具和资源,包括一个测验,帮助组织了解他们是否符合508合规性以及高等教育,非营利组织和政府机构的特定资源。

7.HTML_CodeSniffer



HTML_CodeSniffer是一个客户端脚本,用于检查源代码并查找违反已定义标准的内容。

将代码直接粘贴到网站上以进行检查或使用书签。

它易于使用,你可以选择要显示的信息类型 - 错误,警告或通知,并查看详细说明检查中有关任何问题的报告。

8.Accessible Email


Accessible Email是一个在线检查器和HTML编辑器,可帮助你在发送之前改进电子邮件简报的代码。

有了这么多数字通信和来自电子邮件的潜在客户,它不应该是可访问性方面被遗忘的元素之一,但它通常是。 Web上可访问性的相同规则也适用于电子邮件。

该工具可免费使用,旨在促进电子邮件营销的可访问性和可用性。

9.Amara




Amara是一个为视频创建字幕和隐藏字幕的工具。

提供视觉或其他语言类连接的方式,可以向更多人说明和表达你的设计元素,特别是如果视频是设计的关键元素。

此工具包括免费和付费计划,可以轻松地将语言以可读格式显示在屏幕上,该格式适用于YouTube等网站和视频流平台。

10.MobiReady



MobiReady以可视格式提供移动辅助功能测试,并提供结果报告,以便你可以查看你的网站在最小的设备上运行的实际体验。

根据Alexa 1000对你的网站进行基准测试,Alexa 1000是世界顶级网站排名的标准,通过推荐获得详细的技术结果,并在不同的屏幕上查看你的网站设计的效果图,包括高,中,低设备。

该测试的最佳部分之一是它可以提供多达几十个不同方面的检测和得分,并且对任何“低分”或“失败”选项都提供了改进建议。

总结

在网站设计的可访问性方面,考虑所有类型用户的可用性和可读性非常重要。 考虑元素的颜色,大小和位置,标题和副标题,适当的HTML和结构甚至电子邮件,以便为尽可能多的人提供最佳体验。

检查可能适用于你的项目的任何区域或国家合规性规则也很重要,例如上面提到的508合规性标准。

最好不要在可访问性方面犯错。 可以从调色板调整颜色或提高字体大小开始,以便更多人可以轻松地了解屏幕上的内容。