设计可访问性网站的 10 种方法

已发表: 2022-02-16
设计可访问性网站的 10 种方法

我对现代网页设计感到沮丧。 我当然对大多数主题和模板设计师感到沮丧,他们在不检查全局可访问性的情况下出售他们的作品。

许多设计师实际上采用了良好的、可访问的 CMS,然后创建了具有很大可访问性问题的设计。

我是澳大利亚的一名律师、网站设计师和可访问性/多样性顾问。 在为企业、政府和教育部门提供建议后,我发现很多网站无法访问,并且给许多用户带来了糟糕的体验。

为什么可访问性很重要?

2010 年,发达国家有 10% 的人患有阅读障碍。 在非发达国家,这一数字为 15%。

在澳大利亚,可访问性被认为非常重要,如果您的网站无法访问,我可以将您告上法庭。 震惊?

不,我绝不会建议客户专注于“盲人网站”,而是所有人都可以访问的网站。 这包括有阅读障碍、身体残疾、听力障碍的人——甚至是老一代。 简而言之,您的整个受众中有很大一部分无法以您的方式访问您的网站。

昂贵的? 不,事实上它回到了设计标准,因为这是真正的基本东西。

您可以采取以下十个步骤来确保您的网站可访问。

#1。 让您的网站易于使用

我不需要告诉你们如何设计。 但是这三个关键原则将帮助残疾用户:

  1. 使网站易于阅读和理解
  2. 使网站易于浏览
  3. 使网站易于在移动设备上使用

这将使您接近可访问性,它们还将帮助搜索引擎也喜欢您的网站!

我用来测试网站的屏幕阅读器就像谷歌机器人(除了盲人技术首先出现)。

#2。 使用无障碍软件进行测试

您知道 PC 具有辅助导航和阅读屏幕的辅助软件吗? 您可能知道,但您是否也知道移动设备的核心内置了辅助功能软件? 该软件可以阅读给人们,包括那些有视力障碍的人:

  • Apple (iOS) 使用 VoiceOver;
  • Android 使用对讲;
  • Windows 使用讲述人。

几乎所有的网站设计师都在模板中包含一个菜单,但 95% 无法使用上述任何技术阅读! 这些无障碍服务中的大多数都无法识别菜单存在,因为它的编码不正确。 大多数情况下,问题在于菜单编码不佳或标记不清晰。

值得将一些网站加载到您的手机中并打开辅助功能。 查看您网站的菜单是否有效。

Apple VoiceOver 上的盲文面板

#3。 不要全部写大写

这可能是任何人都可以对其网站进行的最基本更改:不要全部大写。

这是经过科学测试和证明的,因为任何人都很难阅读所有大写字母!

在菜单项和按钮中可以找到最过度使用的大写字母。 如果您使用常规大写正常书写,您正在帮助传达您的信息,除非您有特定的设计目的 - 例如品牌或徽标。

#4。 清楚地解释您的链接

“阅读更多”或“单击此处”按钮不会告诉 Google(或使用屏幕阅读器的用户)链接背后的内容。 只需将您的链接脱离上下文,看看它是否有意义。 页面中间的“阅读更多”对你有什么意义吗?阅读更多是什么?

#5。 使用良好的对比风格

这并不意味着扼杀你的内容——它意味着让视力受损的人更容易。 这里有一个提示...将您的手机屏幕调到一半并尝试阅读网站。 它在光明和黑暗中看起来如何?

#6。 使用“跳转到内容”链接

想象一下在阅读主要内容之前点头 30 次! 如果您不允许有阅读障碍的人跳过菜单,他们必须这样做。 实际上,使用标题标签也是如此,H1 到 H4 可以帮助搜索引擎和阅读障碍者浏览您的网站。

哦,不要隐藏屏幕外的链接! 视力受损的人经常使用放大镜并手动查找这些链接(而不是通过键盘)。

#7。 停止使用弹出窗口

至少,停止使用那些我们无法按“esc”来摆脱的东西。 您知道我们的软件基本上无法进入那些弹出框吗? 通常我们最终会阅读盒子后面的内容 - 它在您看来是灰色的,但对我们来说却不是。

如果您要使用弹出窗口:

  • 制作它们,以便可以使用“esc”按钮将其关闭。
  • 制作它们以便我们的软件可以读取框,而不是后面的文本。
  • 提供查找内容或填写表格的替代方法的详细信息 - “或访问我们的 xxxx 页面了解更多详细信息”。

#8。 文本调整大小在某些情况下可能很有用

就个人而言,文本调整大小远不如跳转到内容链接重要。 这是因为有打印障碍的人(包括老一代)会使用 windows 放大镜或一些专业产品 - 例如缩放文本、魔术眼睛或其他免费软件。 在我的经验文本中,调整大小通常会破坏移动内容 - 甚至比捏或使用核心移动辅助功能更不敏感。

此外,通过自适应技术调整文本大小,用户可以将其关闭和打开,以便他们可以在屏幕上找到自己(一些缩放,因此他们一次只能看到屏幕的 1/8)。 也就是说,文本调整器可能仍然是相关的,值得为政府网站投入使用——只是对我来说不是前 10 名优先事项。

#9。 使用字体图标而不是图像图标

使用放大镜的人一次只能看到大约 1/8 的网站,而使用手机的人通常会通过点击“阅读器”按钮来加载图像免费版本。 我可以写一篇关于大多数“图像图标”在最大缩放时像素化到极端的事实的帖子,但字体图标不会(好吧,反正没有那么多)。

#10。 添加视频脚本

如果 YouTube 视频完全无声,则将其放在网站上是没有意义的,也没有任何意义将一个没有文字记录或听力障碍者遵循的方式的视频放在网站上。 这就像拥有全球受众或客户群,但只提供日语信息。

只是为了好玩,获取一个没有语音的技术 YouTube 视频,然后闭上你的眼睛。 注意——闭上你的眼睛不会复制失明,因为你可以再次睁开它们,但这是一个有趣的练习。

带有隐藏式字幕的 YouTube 播放器

无障碍资源

这些网站提供了检查您的网站的指南和工具:

  • Web Aim 可访问性检查器
  • 澳大利亚政府网页内容无障碍指南
  • W3C 验证器。 请注意,W3C 验证器会返回许多不必要的错误。 您需要判断每个错误是否值得麻烦。

这些站点提供了屏幕阅读器,您可以使用它来测试您的桌面站点:

  • 语音工作访问 (JAWS)
  • 艾平方提供免费试用版
  • Window Eyes - 屏幕阅读器
  • NV Access 提供完全免费的非可视桌面辅助 (NVDA) 屏幕阅读器

注意:我不推荐 Sitecues:它不是我所说的易于安装或对有打印障碍的人有效的东西。

结论

像任何事情一样,在功能和严格遵守规则之间存在平衡。 我的客户网站都不是 100% 可访问/符合 W3C 的。 它们是可访问的 - 并且搜索引擎友好。 它们合乎逻辑且对比鲜明,但也具有影响力的风格和特征。

全世界有多少人有阅读障碍? 有多少潜在客户?

无论您是在 Joomla、Drupal、WordPress、纯 HTML 还是任何其他平台上构建网站,我希望我已经让您相信,对于您的企业和您的客户来说,这个问题值得认真对待。