Go Wiki:WebAccessibilityResourcesAndTips
可访问性或“a11y”是 Web 开发中日益重要的一个主题。它对 Go 来说很重要,因为许多 Go 工具和资源都使用 Web 技术,例如 godoc。确保这些工具具有可访问性,可以确保更多人能够使用它们,从而有更多人能够使用 Go。
可访问性是一个宏大的主题,其范围从仅仅是晦涩难懂到极其晦涩难懂。
然而,有一些简单的经验法则可以遵循,它们可以大大降低意外创建不可访问页面的几率。
- 优先使用语义标记。原生 HTML 元素内置了大量的可访问性功能,无需开启或关闭任何东西。如果您有一系列项目,请使用
ul
或ol
,即使您不希望它显示为列表。额外的 CSS 是值得的。 - 使用标题(
h1
-h6
)时,切勿跳过级别,并确保它们具有逻辑嵌套,例如,h4
应是前一个h3
的逻辑子部分。屏幕阅读器将这些用作导航标记,类似于目录。 - 避免使用与文档源顺序相悖的布局。使用 flexbox 和 grid 重新排列元素非常容易,但这样做时,焦点顺序保持不变。通过键盘浏览网站的人会看似随机地在不同位置之间跳转,导致很难理解发生了什么。
- 确保足够的色彩对比度。并非所有人都拥有完美的视力或高质量的显示器。两者都可能导致难以区分低对比度内容在哪里开始和结束。 https://leaverou.github.io/contrast-ratio/
- 确保页面在没有颜色的情况下也可用。存在多种类型的色觉缺陷。有些(如红绿色盲)很常见。其他一些则可能相当罕见。确保每个人都能获得相同信息的最佳方法是将信息编码到形状和颜色中。例如,如果您正在为测试运行器制作仪表板,请不要仅仅用绿色圆圈表示成功,用红色圆圈表示失败:用绿色勾号表示成功,用红色叉号表示失败。
- 提供清晰的悬停和焦点样式,让用户知道某个元素是“可点击的”。与上述一样,即使没有颜色,这一点也应该是清晰的。
- 确保将页面放大到 200% 时不会中断。浏览器在这方面处理得很好,但并不总是完美。视力不佳的用户会感谢您的努力。
- 确保页面完全可以通过键盘使用。某些医疗状况使得使用鼠标或触摸板变得困难,而且许多特殊的辅助软件和硬件通过创建合成键盘事件来工作。要特别注意隐藏在页面外的元素,因为它们会在焦点顺序中保留,而没有特殊的处理。
- 确保所有非文本元素都有适当的替代文本。(如果非文本项仅用于装饰,则适当的替代文本为空字符串。)
- 避免使用全大写书写。屏幕阅读器将始终将全大写读取为缩写,并逐个字母地拼读(但 `text-transform: uppercase` 是可以的,它只会为语音增加强调)。
- 有许多工具可以帮助查找可访问性问题(下方列出了一些),但请记住,这些仅仅是 linter,并且静态分析存在局限性。它们有时会有误报,也经常会有漏报。同时也要记住,它们检查的是您运行工具时页面所呈现的样子。
有用的浏览器扩展
Firefox
- Fangs 是一个屏幕阅读器模拟器。它一次性输出屏幕阅读器会播报的所有信息作为带注释的文本,从而可以进行快速审查。
Chrome
Chrome 有一些非常实用的内置 a11y 工具,但您需要通过转到开发者工具中的“设置”>“实验”并勾选“可访问性检查”来启用它们。
- Google 的可访问性开发者工具 大部分已集成到 Chrome 开发者工具中,但仍有一些尚未包含的功能,例如访问完整的可访问性树。
- aXe 一个不错的静态分析器。它是 Chrome 开发者工具中可访问性审计的基础,但此扩展包含更多信息并运行更多测试。(也可用于 Firefox,但在 Chrome 中集成得更好)。
- ChromeVox 一个完整的浏览器内屏幕阅读器。(您需要配置键盘快捷键,以便在不使用时能够将其关闭,并且当不使用时您可能还需要完全禁用该扩展,因为它即使在不活动时也可能会做一些烦人的事情)。
- High Contrast 此扩展由有特殊对比度需求的用户使用。最好通过每个过滤器运行一个页面(并测试任何悬停/焦点状态),以确保所有内容仍然可见。
- Siteimprove Accessibility Checker 这是最好的静态审计器。该扩展首次使用时会要求您注册新闻通讯,但您不必注册——只需跳过即可。
- Spectrum 模拟各种类型的色盲,以确保在患有特定疾病的用户阅读页面时,页面上没有任何内容变得不可见或难以区分。(出于某种原因,这似乎在安装后不能立即工作,但在几次重试后会起作用)。
- Funkify 一个易于使用的残障模拟器。
延伸阅读
此内容是 Go Wiki 的一部分。