我如何让我的个人网站变得更加无障碍

如今，无障碍设计是我最热衷的事情之一，我对此深感自豪，但事情并非一直如此。我就是这样修复了我之前无法访问的旧个人网站，使其完全无障碍，并符合 WCAG 标准。

背景

我从2016年10月开始搭建我的个人网站，那时我完全不懂任何关于无障碍的知识。我甚至都没听说过网络无障碍！不出所料，由于我缺乏搭建无障碍网站的知识，viktorkoves.com 的第一个版本简直一团糟。它充斥着各种琐碎的问题，如果我当时更早一些了解的话，这些问题其实很容易就能解决。

然而，到了2018年12月，我对网站无障碍功能有了更深入的了解，我想确保我的个人网站能够展示我新学到的知识和技能。作为一名专注于Web无障碍开发的开发者，我感觉我的网站能够服务于所有人至关重要。

为了实现这一目标，我开始审核我的网站，使其完全符合 WCAG 2.1 AA 标准。（不熟悉 WCAG？别担心，我很快就会写相关文章！）

我的过程

那么，我是如何将一个多年前建的、难以访问的网站，变成一个完全可访问、并且值得自豪地向大家展示的网站的呢？我的流程可以概括为以下步骤：

1. 运行自动化测试来发现“简单”问题
2. 手动测试屏幕阅读器和键盘的使用情况
3. 修复发现的问题
4. 重复！

要开始任何可访问性修复，您必须了解要修复的问题。我使用了一些自动化工具，例如HTML_CodeSnifferalt ，来查找任何简单的可访问性故障。这包括我的图库页面图片上没有任何标签，以及我的主页从一级标题 ( <h1>) 跳到四级标题 ( )的情况<h4>。

如果您不确定应该使用什么工具来测试网站的可访问性，请查看我之前关于可访问性工具的文章。

自动化工具发现了很多问题，但它们只涵盖了网站可访问性的部分功能。之后，我继续使用键盘测试我的网站，然后用屏幕阅读器进行了测试。我发现，对于仅限于键盘操作的用户来说，我的作品集页面的主要功能完全无法访问，因为有些链接只有在鼠标悬停在作品集图片上时才会显示。我还发现，我的图库叠加系统没有明确说明按钮对屏幕阅读器的作用。

如果您好奇我在测试我的网站时发现的所有问题，您可以在我的 WCAG 2.1 AA GitHub 里程碑中查看它们。

一些失败的例子

主页链接的颜色对比

我发现的第一个故障是我的主页上的对比度问题，我将其记录在个人网站代码库的GitHub 问题 #6中。以下是 HTML_Codesniffer 的故障截图：

乍一看，这段黑底红字的对比度似乎并不低——对一些人来说，这已经足够了！然而，如果你看一下这张灰阶截图，就会发现问题所在：

对于色盲用户来说，这对颜色很难辨别，导致这段文字难以阅读！这是因为虽然颜色在色相上差别很大，但在亮度上却相差无几。

幸运的是，这个问题很容易解决。HTML_CodeSniffer 建议使用一种更亮的红色，将我的链接切换到这种颜色后，问题就解决了，也让大家更容易阅读这些链接了。

社交媒体链接没有内容

HTML_CodeSniffer 发现的另一个可访问性问题是，我的页脚中的社交媒体链接没有内容，我在个人网站代码库的GitHub 问题 #6中对此进行了标注。以下是 HTML_CodeSniffer 对该问题的截图：

仔细阅读错误文本，你可能会觉得有点困惑。锚元素“没有链接内容”是什么意思？它可是一张图片啊！

在这种情况下，这实际上表明我<div>在社交媒体图标中使用了带有背景图像的 ，这导致了非常严重的可访问性问题。这是因为虽然<img>标签有一个alt属性可以用来指定屏幕阅读器用户听到的代表图像的文本，但你无法在<div>元素上做到这一点！

这意味着，在我的个人网站上，如果屏幕阅读器用户点击到页脚，他们什么也听不到。毕竟，链接里根本就没有任何内容可以解释它是什么！

有两种方法可以解决这个问题：

1. 切换到<img>元素并使用alt标签来描述图像
2. 使用另一种方式标记链接，例如aria-label

虽然第一种方案更可取，而且能让你的 HTML 更具语义化，但我
之前用的是 SVG 格式的社交媒体图标，打算把它们移到 Spritesheet 里，如果用元素来实现会非常困难<img>。因为我知道我需要用背景图，所以最终我选择了后者。

这是之前的错误代码：

<a href="https://www.linkedin.com/in/viktorkoves">
    <div class="linkedin"></div>
</a>

以下是更正后的可访问版本：

<a href="https://www.linkedin.com/in/viktorkoves"
  aria-label="Viktor on LinkedIn">
    <div class="linkedin"></div>
</a>

这里的区别仅在于aria-label标签<a>，它现在为屏幕阅读器用户提供内容 - 确保当他们导航到我的页脚时，他们能够正确了解此链接的位置。

我错过了什么

尽管我尽了最大努力，但作为视力正常的用户，使用自动化工具和屏幕阅读器只是对用户真正需要的最佳猜测。

有人在领英上联系我，告诉我他们很难浏览我的投资组合页面，因为我没有使用页眉来划分页面，我对此非常感激。这是我在测试中完全忽略的！我太关注自动审核工具和全面的可访问性“缺陷”，以至于错过了一个重要的可用性改进点。在这种时候，我应该听取我在上一篇文章中给出的建议：

请记住，自动化审核工具是了解网站是否具备无障碍功能的起点，但它们并非万无一失。许多对无障碍性至关重要的因素，例如 Tab 键顺序和键盘交互性，对于自动化工具来说，即使能够测试，也非常困难。

我认为，重要的是要记住，无论我们多么努力地满足每个人的无障碍需求，我们都只是在尽力猜测，很可能会遗漏一些东西。这就是为什么包容性设计这样的框架如此重要——最终，我们的用户才是我们是否真正打造了一个完全无障碍网站的真正决定因素。

您想了解更多关于无障碍访问方面的主题吗？欢迎评论或发推文给我！

注：这篇文章最初发表在我的个人网站上。