Go Wiki：WebAccessibilityResourcesAndTips

无障碍性或“a11y”是 Web 开发中日益重要的话题。它对 Go 很重要，因为许多 Go 工具和资源使用 Web 技术，例如 godoc。确保这些工具具有无障碍性，可以确保更多人能够使用它们，并且更多人能够使用 Go。

无障碍性是一个很大的话题，范围从仅仅深奥到极其晦涩。

但是，有一些简单的经验法则可以遵循，从而极大地减少了意外创建无障碍页面的可能性

首选语义标记。本机 html 元素具有极大的无障碍性，无需打开或关闭任何内容。如果您有一系列内容，请使用 ul 或 ol，即使您不想将其显示为列表。额外的 CSS 是值得的。
使用标题 (h1-h6) 时，切勿跳过级别，并确保它们在逻辑上嵌套，以便例如 h4 是前一个 h3 的逻辑子部分。屏幕阅读器将它们用作导航标记，类似于目录。
避免与文档的源顺序相冲突的布局。使用 flexbox 和网格重新排列元素非常容易，但当您这样做时，焦点顺序保持不变。通过键盘浏览网站的人员会看似随机地从一个地方跳到另一个地方，这使得很难了解正在发生的事情。
确保足够的颜色对比度。并非每个人都有完美的眼睛或高质量的显示器。两者都会让人难以分辨低对比度内容的开始和结束位置。https://leaverou.github.io/contrast-ratio/
确保页面在没有颜色时仍然可用。有许多种色觉缺陷。有些色觉缺陷（如红绿色盲）很常见。其他色觉缺陷可能相当罕见。确保每个人获取相同信息的最有效方法是在形状和颜色中同时对信息进行编码。例如，如果您要为测试运行程序制作一个仪表板，请不要仅仅使用绿色圆圈表示通过，使用红色圆圈表示失败：请使用绿色对勾表示通过，使用红色 X 表示失败。
拥有清晰的悬停和焦点样式，以便让用户知道某个元素“可点击”。与上述内容一样，即使没有颜色，这一点也应很清晰。
确保在将页面缩放到 200% 时没有任何内容损坏。浏览器在处理此问题时非常出色，但并非总是完美。视力较差的用户会感激这种努力。
确保页面完全可以通过键盘使用。某些医疗条件让人难以使用鼠标或触控板，许多特殊的辅助软件和硬件通过创建合成按键事件来工作。对于隐藏在页面之外的元素，请非常小心，因为它们将保留在焦点顺序中，而无需特殊努力。
确保所有非文本元素都有适当的替代文本。（如果非文本项纯粹是装饰性的，则适当的替代文本为空字符串。）
避免全部大写。屏幕阅读器始终会将此读作首字母缩略词并拼出每个字母（但是，text-transform: uppercase 很好，并且只会为语音添加强调）。
有很多工具可以帮助查找无障碍问题（下面列出了一些），但请记住，这些只是 linter，静态分析存在限制。它们有时会出现误报，而且经常会出现漏报。还要记住，它们检查的是运行工具时显示的页面。

有用的浏览器扩展

Firefox

Fangs 是一款屏幕阅读器模拟器。它将屏幕阅读器会一次性宣布的所有信息转储为带注释的文本，从而可以非常快速地进行审查。

Chrome

Chrome 有一些非常有用的内置 a11y 工具，但您需要通过转到设置 > 开发工具中的实验并选中“无障碍检查”来启用它们。

Google 的无障碍开发者工具在很大程度上已集成到 Chrome 开发工具中，但仍有一些尚未包含的功能，例如访问完整的无障碍树。
aXe 出色的静态分析器。它是 Chrome 开发工具中无障碍审计的基础，但此扩展包含更多信息并运行更多测试。（也可用于 Firefox，但在 Chrome 中的集成度更高）。
ChromeVox 一款完整的浏览器内屏幕阅读器。（您需要配置键盘快捷键才能在不使用时将其关闭，并且您可能还需要在不使用时完全禁用该扩展，因为它即使在不活动时也会做一些烦人的事情）。
高对比度此扩展程序由有特殊对比度需求的人使用。最好通过每个过滤器运行页面（并测试任何悬停/焦点状态），以确保一切都仍然可见。
Siteimprove 无障碍检查器这是最好的静态审计器。该扩展程序会在首次使用时要求您注册时事通讯，但您不必注册——只需跳过即可。
Spectrum 模拟各种色盲，确保页面上的任何内容对于患有特定疾病的用户来说不会变得不可见或难以区分。（由于某种原因，这似乎在安装后不会立即生效，但经过几次重试后会生效）。
Funkify 一个易于使用的残疾模拟器。

延伸阅读

此内容是 Go Wiki 的一部分。