提升网站可访问性的 13 种方法 ✨

我最近在推特上发了个帖子，讨论如何让您的网站更易于访问。结果发现它对很多人非常有帮助，所以我想把它浓缩成一篇帖子，供大家参考。

在为新客户对该主题进行了进一步研究后，我发现我可以对我的项目进行一些更改，这可能会对使用辅助技术浏览网站的人的体验产生很大的影响。

1.提前规划

我需要改进的一点是从一开始就考虑可访问性。我正在努力，但还有几个项目需要我追溯修复过去在 a11y 方面犯下的错误，包括我自己的新网站。我得承认，这很不礼貌，而且浪费时间。

2. 正确使用大写字母

不要手动输入全部大写的内容，text-transform: uppercase而是在 CSS 中使用其 class 或 id。这是因为有些屏幕阅读器会逐字逐句地读取大写文本。你能想象那会有多烦人吗？！

3. 使用 Aria-label

标签alt用于描述图像，但你用过它的aria-label属性吗？它用于描述元素在屏幕阅读器中的作用。例如，在“关闭”按钮上，aria-label可以将其设置为“返回主页”，以便提供更清晰的上下文。你可以在这里阅读更多内容。

4. 指定主要内容

务必使用一个<main>标签来明确主要内容的位置。这有助于行动不便的用户忽略网站上任何花哨的无用内容，直接跳转到主要内容。

5. 适当隐藏元素

当使用 left: -9999px 而不是使用 display: none 来隐藏绝对定位的内容时，它在典型的屏幕上是不可见的，但从技术上讲，这段文本对于屏幕阅读器来说仍然是可见的，因此它仍然可以读取它的内容。

<button>6.当它是按钮时使用

天哪，各位开发者，别再用<div>s 做按钮了。我知道默认的 s 很丑，需要去掉一些样式，但这样就失去了所有按钮功能，比如屏幕阅读器用来导航的键盘事件。

7. 合理设计链接样式

添加链接时，你可能会想text decoration: none在鼠标悬停时更改颜色。千万别这么做！色盲人士很难识别链接，而且看不出这种变化。而且，为什么不更有创意一点呢？！这里有一个更炫酷的例子（来源）：

8. 适当调整文本大小

对于有视觉需求的人来说，文本大小至关重要。别把文字弄得太小！一个很好的参考点是：正文至少应为 16px，小文本摘要至少应为 12px。不过，通常最好使用相对屏幕大小。点击此处了解更多信息。

9.不要删除那个轮廓！

使用outline: none（通常在文本输入中使用）对键盘用户不友好。他们在浏览页面时，会使用轮廓来查看他们聚焦的元素，因此无法确定当前正在与什么交互。为了更合理地移除它，请尝试使用unfocus。

10.检查你的网站

有一些很棒的资源可让您使用清单检查您的网站。

• 更多信息和清单的资源：A11yproject。

• 类似的网站：A11y.me。

• 适用于您的项目的 a11y css 样式表的 repo：a11。

11. 审核您的网站

Google Chrome 有一个开源的网站可访问性审核工具包，值得一试。您可以将其安装到自己的项目中进行测试。请参阅此处。

12. 再检查一遍！

可汗学院有一个开源的无障碍可视化工具包，tota11y，让你可以查看你的网站在辅助技术下的表现。这有多棒啊？！点击此处查看。

13.亲眼看看

如果有时间，可以尝试自己使用屏幕阅读器。在 Mac 上，使用 Cmd + 5 开启 VoiceOver 功能。使用 Tab 键和 H/B/T/L 键浏览网站，即可跳转到下一个标题、按钮、表格和列表。隐藏字幕会读出 aria 标签！感谢StackOverflow 上的这个答案。

互联网上还有更多值得学习的内容，而我只是略知皮毛而已。我正在努力做一个互联网上的好公民，也希望能够鼓励其他开发者也这样做。欢迎分享更多宝贵经验！

封面图片来源于mds。

嗨！我是 Hannah。我是一名虚拟现实开发者、高级前端开发者、VRCalm 联合创始人，致力于帮助痴呆症患者，同时也是 Tech For Good 的爱好者。🌎