不要只为自己开发——开发人员无障碍检查清单

作为开发者，我们往往会无意识地为与我们类似的人开发网站。如果我们不主动留意，这些网站通常只适合特定类型的人：视力正常的鼠标用户、拥有良好精细运动技能并擅长使用电脑的人。

这会导致某些时候，仅使用键盘（或键盘模拟设备）浏览网页的人无法访问网站并与之互动。这可是个相当大的群体！

我们有责任确保网站适合所有用户。在某些情况下，法律会要求我们这样做，但这并不是我们关注的唯一原因。

这篇博文面向那些刚开始接触无障碍设计的人。你可能知道一些原则，比如“始终为图片提供替代文本”，但不确定该写些什么。或者你完全不知道如何判断你的网站是否具备无障碍功能。

遵循这篇博文并不能确保你的网站 100% 可访问！本文旨在提供一些信息，说明在使用自动化测试后需要手动检查哪些事项。

键盘导航

首先，暂时放下你的鼠标。别用它。试着只用键盘浏览网站。试着完成用户在网站上需要完成的每一项任务。你能做到吗？你能看到你现在在哪里吗？焦点指示器（是的，很多设计师和开发者都喜欢去掉它）是否足够醒目？

如果您无法仅用键盘使用整个网站，那么这就是一个可访问性和可用性问题。但是，这里需要注意的是，键盘交互并不一定只通过 和 来实现tab，enter就像以前一样。正如WAI-ARIA 创作实践所述，一般模式是这样的：

所有平台通用的主要键盘导航约定是，tab和shift+tab键将焦点从一个 UI 组件移动到另一个 UI 组件，而其他键（主要是箭头键）将焦点移动到包含多个可聚焦元素的组件内部。

另一件需要考虑的事情是焦点指示器。它们应该是可见的，即使浏览器默认的焦点指示器足以满足 WCAG 要求，也可能难以看清。因此，我建议增强焦点指示器的可见性。只需记住，指示器的颜色应与相邻背景具有足够的对比度。

键盘导航的操作项

仅使用键盘即可浏览您的网站。请注意导航菜单和其他自定义小部件，它们可能会因为某些元素被错误隐藏而失去焦点。

不用鼠标，所有操作都能触及和操作吗？每次都能看到焦点吗？

替代文本

另一件需要手动检查的事情是图片的替代文本。你可能会想，这难道不是自动化测试能发现的吗？嗯，是的。自动化测试工具会抓取标记，当它们发现一个img元素时，会检查该属性是否alt存在。它们不会（也无法）检查替代文本的质量。

并非所有图片都需要替代文本；但它们确实需要alt-attribute。因此，对于纯装饰性图片，您需要提供一个空的alt-attribute。这会将图片“隐藏”在屏幕阅读器中，使其完全无法被读取。

你可能会问，屏幕阅读器用户难道不应该了解页面上的所有内容吗？一个通过倾听来浏览网页的人可能希望减少信息量。

替代文本的操作项

仔细检查页面上的每一张图片。例如，您可以使用Web Developer-extension或开发者工具，检查图片的 alt 属性。

文字是描述性的吗？还是图片是装饰性的？你可以在WebAIM：替代文本中找到更多关于如何为每种类型的图片编写替代文本的信息。

页面语言

自动化测试还会捕捉页面语言（如果缺失的话）。有些项目启动器（例如create-react-app,NextJS）会自动设置 lang-attribute，但有些（我说的就是你，NextJS）却没有。

如果网站的语言是英语，那么使用自动语言（如果有的话）基本没问题。但是，如果不是，则需要更改它。原因是屏幕阅读器用于页面的语言来自该lang-attribute。因此，如果您的页面内容是芬兰语，并且有该en-attribute，屏幕阅读器会用英语口音发音每个单词。这很不美观。以下是另一种方法的示例。它几乎同样糟糕：

页面语言的操作项

在页面的属性中检查页面的语言html。您可以从开发者工具的“元素”选项卡中进行操作。语言代码是否与页面的主要语言相同？

文本大小调整

有些人会通过浏览器设置等方式增加网页的文本大小。这意味着内容会占用更多空间，并且页面的布局可能会有所不同。开发者应该测试网站在文本大小增加到至少 200% 后是否还能正常运行。

调整文本大小的操作项

在两个浏览器上打开网页，最好并排打开。在第一个浏览器中，使用浏览器内置的缩放功能进行测试。如果您使用的是 Mac，请使用CMD+ ；如果您使用的是 Windows 或 Linux，请使用+ 。将尺寸放大到最大值，即 200%。比较缩放后的网站和未缩放的网站。+CTRL+

你的网站还能用吗？文字流畅吗？增加文字大小会增加水平滚动条吗？所有信息都还在吗？

仅颜色

如果仅靠颜色来传达含义，那么很多用户就会错过这些信息。例如，假设有一个包含各种活动的列表，而它们的进度仅通过一个彩色框来传达。在这种情况下，有些用户群体就无法获取这些信息。

例如，色盲人士无法区分某些颜色组合，因此，如果信息仅通过颜色传达，则无法理解。此外，对于屏幕阅读器用户来说，颜色本身并不能说明任何问题；屏幕阅读器也无法提供任何有关网页样式的信息。

仅针对颜色的行动项目

有一件事可以帮助测试是否仅使用颜色来传达含义，那就是将网站更改为灰度。

您还能理解页面上的所有信息吗？

移动缩放

我记得以前我们习惯添加这个选项<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />来禁用网页上的捏合缩放功能。虽然没人解释过为什么，但我每次把代码复制到项目中时，它都会出现。当时我并不知道这会让在触控设备上缩放变得更加困难。

有些人需要使用缩放功能才能查看页面上的元素。此外，许多人还希望放大图片，查看它们在图片中或其他细节的显示效果。有时，如果不缩放，网站就无法使用。这需要开发人员自行解决，但事情进展缓慢，因此用户需要使用缩放功能。

移动缩放的操作项

在移动设备上打开你的网站或应用。试着用手指放大。你能做到吗？

字幕和文字记录

字幕

想象一下，如果你听不见视频里说的话，你又怎么理解视频里的内容呢？这种情况可能由多种原因造成。你可能有听力障碍，或者身处拥挤的地方，不想打开声音。

对于这些情况，字幕至关重要。字幕与副标题略有不同。它们还包含视频中重要声音的信息，并且如果说话者在视频中难以识别，字幕还可以识别说话者。字幕可以是封闭式的（可以打开），也可以是开放式的（始终显示）。

关于自动字幕，我再说一句：千万别用。语音识别算法还不够好，而且质量很差。有些人甚至称之为“自动字幕”。假设你没有听力障碍，也从未遇到过这种情况。在这种情况下，我还有另一个例子可以说明一些情况：Netflix 等服务和字幕（当字幕语言不是英语时）。我的意思是，至少对于芬兰语来说，字幕通常很烂。原因要么是使用了自动翻译，要么是没有支付足够的费用聘请专业人士进行翻译。

成绩单

文字记录是聋盲用户了解视频或音频内容（例如播客）内容的一种方式。此外，对于纯音频内容，文字记录是聋哑人士获取信息的唯一途径。

如果您有兴趣了解有关字幕、文字记录和音频描述的更多信息（我在这里不介绍），WebAIM：字幕、文字记录和音频描述是一个很好的资源。

字幕和文字记录的操作项目

仔细检查网站上的每一部分多媒体内容。字幕和文字记录是否到位（取决于媒体类型）？

总结

在这篇博文中，我介绍了开发人员可以做的七项检查，以确保他们的网站更容易访问。有些检查会比较耗时，但绝对值得！

对于自动化测试难以发现的可访问性问题的简单检查，您有什么建议吗？

资源

• WAI-ARIA 创作实践
• WebAIM：替代文本
• WebAIM：字幕、文字记录和音频描述
• prefers-reduced-motion-模拟
• Web 开发人员扩展

封面照片由Glenn Carstens-Peters在Unsplash上拍摄