审核我的投资组合网站的可访问性 - 第 1 部分

在创建我的作品集网站时，我投入了大量精力去遵循我从MDN 的 Web 入门指南和其他阅读材料中了解到的可访问性标准。我觉得 100 分的 Lighthouse 评分能够很好地反映我的表现。我原本想用屏幕阅读器进行测试，并进行一些跨浏览器测试，但当我找到工作后，这些都搁置了。

经过更多的阅读、在 Twitter 上关注更多的可访问性专家以及听取其他开发人员的反馈（例如本文中减少的运动 CSS ）之后，我开始怀疑我需要重新评估，但不知道从哪里开始。

幸运的是，我参加了Todd Libby 的午餐学习会。想要了解 Todd 用于正式审核的工具的完整列表，您可以观看午餐学习会或他审核虚拟咖啡网站的直播，或者收听他的虚拟咖啡播客节目。

Todd 说过：“没有哪个网站是 100% 无障碍的，尤其是在更新网站时，但我们可以努力接近这个目标。” 所以，让我们一起努力吧。我使用了 Todd 用过的 6 个工具：WAVE 浏览器扩展程序、Firefox 的无障碍开发工具选项卡、Axe DevTools 扩展程序、适用于 Chrome 开发工具的 ARC 开发工具包、IBM Equal Access 无障碍检查器以及Microsoft Accessibility Insights。

如果您只是初次接触无障碍功能，我会说 WAVE 扩展是最直观且不会让人感到不知所措的。IBM Equal Access Ability 检查器是迄今为止最全面、信息最丰富的，并提供了切实可行的修复建议。ARC Toolkit 紧随其后，但其建议帮助不大。它链接到WCAG 指南，而该指南的内容可能相当繁琐且模糊。Firefox 的无障碍开发工具选项卡给了我一个警告——可点击元素必须是可聚焦的，并且应该具有交互语义，也就是说，需要使用键盘进行测试。

使用自动化工具进行审计

研究结果

登陆页面

• 为了使用 Netlify 的无服务器联系表单和垃圾邮件机器人，我必须将空白表单放入我的索引页中，但缺少表单标签
• 没有导航地标（<nav>或其他）
• 我的按钮中缺少focusable='false'SVG
• 测试 Windows 高对比度模式是否有效的警告

主页

• 暗模式切换 - 空表单标签，带有可见标签和隐藏输入的表单元素，“for”属性不是有效<input>元素的“id”，并且<label>元素没有标识预期输入的描述性文本
• 许多 PDF 可访问性问题！
• 验证文件下载机制不会导致键盘陷阱
• 替代文本 - 1 条描述性不足，2 条冗余，1 条太长
• SVG - 我使用的 Github 和 Chrome SVG 图像/链接都具有相同的 ID，它们未设置 SVGFocusable 属性，在我的技能部分，ARC Toolkit 建议添加aria-labelledby和 ID
• 验证是否存在可由键盘聚焦的内容，允许您水平滚动（参考我的博客预览组件）
• 缺少绕过内容块的方法
• 确保“下方”在没有视觉背景的情况下仍然有意义
• 我的<aside>元素没有可访问名称的标签！
• 当输入操作将打开新窗口或更改上下文时，发出 8 条警告以通知用户

博客页面

• 85 个空链接警告 - 使用 DEV API 提取的 HTML 在标题中生成空链接。
• 7 跳过标题级别警告 - 这是我知道的一个问题，老实说，我认为这会更糟。
• 长替代文本警告
• <br>和警告<em>​<strong>

我在颜色对比度方面收到了不少误报——通常是“我无法计算，所以你应该检查一下”，因为颜色数学很难。此外，我还调查了一些警告，但最终还是忽略了它们。例如，<noscript>无法用于呈现内容，以及<noscript>添加到我网站的create-react-app仅包含完全可访问的“您需要启用 JavaScript 才能运行此应用”。也有一些乐观的警告，比如 WAVE 关于 YouTube 视频链接的警告——我也希望我能保证我链接的所有视频都有字幕。

ARC Toolkit 对我的作品集项目预览图和博客封面图片的替代文本包含“gif”、“截图”和“图片”感到不满。我几乎从来不这么做，因为这样显得多余。在这种情况下，我想强调它们是图片，所以我会保留它。

手动测试是关键

托德强调了使用键盘和屏幕阅读器工具（例如 Mac 的 Safari Voiceover、Windows 的 NVDA 或 Linux 的 Orca）手动测试网站的重要性。

基于自动化工具测试，我开始进行手动测试，重点关注以下几点：

• 键盘或屏幕阅读器是否能击中空白表格？
• 我的暗模式切换有多大问题？
• 我的博客预览组件是否允许您水平滚动？
• 确认您需要单击登陆页面按钮并且操作起来很容易。
• PDF 下载、SVG 和链接是否会构成陷阱？
• 我是否需要添加绕过内容块的方法？

我先用 Microsoft Accessibility Insights 的 FastPass 制表位功能进行了手动测试，这个功能很棒。测试结果立即证实，我的博客预览无法使用键盘水平滚动，而且我的暗黑模式切换按钮无法获得焦点。

接下来，我尝试了 Microsoft Accessibility Insights 的智能引导测试，其中包含许多测试，其中一些是自动的，但主要还是手动测试的指导说明。我的发现：

• 我拥有的链接数量在没有任何警告的情况下打开新窗口是一个问题。
• 下载文件链接不会创建键盘陷阱。
• 我需要为语义 HTML 未涵盖的内容添加Landmark 角色。
• 我需要在我的 Github 和 Chrome 链接中添加可访问的描述。
• 我很高兴发现我的技能部分 SVG 确实有可访问的名称。
• 我的完整博客文本在 350% 缩放时未能通过重排测试。
• 在横向手机上，我的博客页面切换成横向滚动！？

最后，是时候尝试使用 Safari 画外音了。

• 键盘和屏幕阅读器均未击中空白表格
• 很明显，您需要单击登录页面按钮，而且这很容易做到。
• 屏幕阅读器被困在我的博客预览组件中。
• 对于屏幕阅读器来说，博客标题链接是否可点击并不明显。
• 我认为我不需要为我的主页添加跳过链接，因为导航有加载单个组件的按钮，内容不是那么密集。

下一步是什么？

我的暗黑模式切换按钮需要认真改进——我需要让它可聚焦，并添加描述性文字。此外，我还需要测试添加属性和内容是否for会id提升<label>可访问性，以及/或者降低功能性。

我需要让博客预览组件的内容可聚焦，以便键盘用户使用它并进行水平滚动。此外，我需要让屏幕阅读器清楚地知道，点击预览标题只会打开一个博客。我正在研究如何绕过整个博客页面的内容块，并防止我的博客预览成为水平滚动的陷阱。

我将更新我所有的 SVG 文件的focusable属性、aria-labelledby属性值和唯一 ID。我需要在 Github 中添加可访问的标签，在我的作品集部分和<aside>元素中添加 Chrome 链接，并在必要时添加地标角色。

所有打开新窗口或下载文件的链接都需要提醒用户它们会打开新窗口或下载文件。对于这些文件下载，我需要开发可访问的 PDF 文件，方法是添加 HTML 简介，或者对现有的下载链接进行适当的格式化和标记。

我将从我的旧墙网站简介中删除“点击下面”这几个字，因为除非你使用移动设备，否则这几个字根本没有意义。

我的头像和 Old Wall Site 截图需要更多描述性的替代文本。

我希望当您转动手机时，我的整个博客页面不会水平滚动。我还需要将整个博客页面缩放到 400%，而不会导致重排问题。IBM 工具建议用aria-describedby属性或D-link替换长 alt-text 。我还看到有关<br>未使用标签进行段落格式化、使用更多列表元素和<q>/或<quoteblock>用于引用的标签的警告。所有这些，跳过的博客标题级别以及博客标题中的空链接都需要我深入了解我在撰写博客时的格式、DEV API 返回的 HTML 以及我在网站上的样式。我已经觉得我必须这样做了，而且刚刚了解到 DEV 增加了为图像添加标题的功能，所以这应该会有所帮助。

在审核时，我还注意到打开我的完整博客页面的按钮需要包裹在内<h1>，并且<ul>我的完整博客页面的样式需要帮助。

结论

我对这次审核的结果非常满意。只有两个组件有问题，而且我在构建它们时非常注重视觉呈现。SVG 的可访问性非常难，我在撰写这篇博客时改进了它们的可访问性，之后收到了这些警告。其他大多数问题对我来说都是新发现的，老实说，替代文本的问题表明我通过不断练习已经取得了很大的进步。博客的 HTML 和 CSS 问题对我来说并不意外——我已经在很短的期限内两次匆匆忙忙地完成了这个页面。

我很自豪，我没有遇到任何颜色对比、颜色含义或高对比度模式的错误，因为颜色是我在构建任何内容时都非常注重的。我还出色地确保了标签焦点可见，并创建了可解析、语义清晰的 HTML。最后，由于我专注于响应式设计，缩放至 400% 不会引发重排问题，除非在我的完整博客页面上。

使用屏幕阅读器几分钟真是大开眼界。以后我也会听从Todd的建议，尝试一整天不用鼠标，不过那是另一篇博文了。

阅读第 2 部分 - 快速修复
这是关于快速修复的短篇故事集 - 如果您愿意的话，可以将其称为一些开胃小菜。

阅读第 3 部分 - React 中的可访问暗模式切换
我使我的暗模式切换可访问，重构它，并重新测试我的网站。

阅读第 4 部分 - 博客预览组件，
在其中我发现了键盘陷阱到底是什么。

阅读第 5 部分 - 博客页面可访问性深度探讨
，我发现了一个安全漏洞，编写了数量惊人的正则表达式，并且这个系列成为了一篇论文。

阅读第六部分——结局