引言

理论知识的学习最终需要落实到实践中。MDN 的 CSS 和 JavaScript 无障碍最佳实践文章配套了三项技能测试，分别考察对链接样式、文本可读性以及键盘可访问性的理解与应用能力。本文将逐一分析这三个测试任务的背景、问题所在、解决方案以及背后的原理，帮助读者巩固前序所学知识，并建立起从理论到实践的完整认知链条。

任务一：链接的可识别性与焦点状态

问题分析

第一项任务呈现了一个链接列表。从视觉上看，这些链接完全不像链接：下划线被移除，颜色与普通文本几乎没有区别，焦点轮廓也被强制移除。用户无法判断哪些文字是可点击的链接，键盘用户也无法通过 Tab 键导航时获知当前聚焦到哪个元素。

任务给出的 CSS 代码模拟了一个常见场景：现有的样式规则来自 CMS 或第三方库，开发者无权修改这些基础规则，只能在此基础上叠加新的样式来修复无障碍问题。

现有的样式如下：

a {
  text-decoration: none;
  color: #666666;
  outline: none;
}

这组样式移除了链接的下划线，将颜色设置为与普通文本无异的灰色，并彻底删除了焦点轮廓。从无障碍角度审视，这三个属性设置都存在严重问题。

解决方案

开发者需要在不修改已有规则的前提下，新增 CSS 规则来覆盖或补充这些样式，使链接恢复可识别性和键盘可操作性。

关键修复措施如下：

a {
  text-decoration: underline;
  color: #0000ee;
}

a:hover,
a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

a:focus {
  outline: 2px solid #000000;
}

首先是下划线的恢复。下划线是 Web 生态中链接最核心的视觉标识符，用户通过下划线快速扫描页面中的可点击内容。将 text-decoration 设置为 underline 后，链接恢复了这一基本识别特征。

其次是颜色的调整。深蓝色是浏览器默认链接颜色的典型代表，用户对蓝色文字加下划线的组合有着高度一致的认知预期。将颜色从灰色改为蓝色，链接在视觉上立即与其他文本区分开来。

在交互反馈方面，悬停和聚焦状态下移除下划线并添加浅灰色背景，既保持了视觉变化，又不会过于突兀。最重要的是，聚焦状态必须添加清晰的轮廓线。使用 outline: 2px solid #000000 替代被移除的默认轮廓，确保键盘用户在 Tab 导航时能够清晰识别当前聚焦的链接项。

测试完成后的效果

经过上述修复，链接列表呈现出了标准的链接外观：蓝色加下划线的文字，悬停时下划线消失并出现背景色变化，键盘聚焦时有明显的黑色轮廓边框。所有用户，无论使用鼠标还是键盘，都能准确识别链接并了解当前的操作状态。

任务二：颜色对比度与字体大小适配

问题分析

第二项任务提供了一个包含标题和段落的内容页面，但存在两个显著的无障碍缺陷：颜色对比度不足和字体大小使用了不合适的单位。

页面背景色被设置为红色，而所有文本的颜色均为 #999999（浅灰色）。红色背景与浅灰色文本之间的对比度极低，对于低视力用户或色觉障碍用户来说，阅读这样的内容几乎是不可能的。此外，文本尺寸使用了 vw（视口宽度）单位，这导致字体大小随浏览器窗口宽度变化，当窗口过窄时文字可能小到无法辨认，且用户无法通过浏览器缩放功能有效调整文字大小。

现有 CSS 代码如下：

main {
  padding: 20px;
  background-color: red;
}

h1,
h2,
p {
  color: #999999;
}

h1 {
  font-size: 2vw;
}

h2 {
  font-size: 1.5vw;
}

p {
  font-size: 1.2vw;
}

解决方案

修复颜色问题的关键在于确保文本颜色与背景颜色之间有足够的对比度。根据 WCAG 2.1 的 AA 级别标准，常规文本的对比度至少应达到 4.5:1，大号文本至少应达到 3:1。使用 WebAIM 颜色对比度检查器等工具可以快速验证配色方案是否达标。

最简单的修复方式是将文本颜色改为白色，红色背景与白色文字之间的对比度远高于 4.5:1 的标准，能够满足绝大多数用户的阅读需求。

h1,
h2,
p {
  color: #ffffff;
}

字体大小的问题需要从两个方面解决。首先，vw 单位使得文字大小完全依赖于视口宽度，用户无法通过浏览器的缩放功能来控制文字大小，这与 WCAG 的成功标准 1.4.4 关于文本可缩放的要求相悖。其次，即便在标准视口下，1.2vw 也显得过小，难以舒适阅读。

修复方案是使用相对单位 rem 替代 vw。rem 基于根元素的字体大小，用户可以通过浏览器设置调整根字号，所有使用 rem 单位的文字会随之等比例缩放，完全符合无障碍要求。

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
}

测试与验证方法

完成修改后，开发者应当使用以下方法验证修复效果：

颜色对比度方面，使用在线对比度检查工具输入背景色和前景色，确认对比度比值达到 AA 或 AAA 级别。也可以使用浏览器开发者工具中的无障碍审计面板进行检测。

字体大小方面，尝试在浏览器中使用 Ctrl+加号 或 Ctrl+减号 进行页面缩放，观察文字是否能够等比例放大或缩小，且不会因为缩放而导致布局严重错乱。

任务三：JavaScript 键盘可访问性改造

问题分析

第三项任务涉及一个动物名称列表，点击列表项会在下方的描述区域显示该动物的详细信息。功能本身非常简单直观，但存在一个关键的无障碍缺陷：交互完全依赖于鼠标的 mouseup 事件，键盘用户无法通过 Tab 键聚焦列表项，也无法通过回车键或空格键触发选择行为。

现有的 JavaScript 代码如下：

const listItems = document.querySelectorAll("li");
const descHeading = document.querySelector(".animal-description h2");
const descPara = document.querySelector(".animal-description p");

listItems.forEach((item) => {
  item.addEventListener("mouseup", handleSelection);
});

function handleSelection(e) {
  const heading = e.target.textContent;
  const description = e.target.getAttribute("data-description");
  descHeading.textContent = heading;
  descPara.textContent = description;
}

这段代码完成了功能逻辑，但事件绑定的对象是 li 元素而非可聚焦元素，且仅监听了 mouseup 事件。

解决方案

改造的思路是让键盘用户也能够聚焦并激活列表项。有两种主要方案：将列表项本身变为可聚焦元素，或者将列表项中的内容包裹在可聚焦的交互元素中。

方案一是在每个 li 元素上添加 tabindex="0" 属性，使其成为 Tab 键导航序列的一部分。同时需要添加键盘事件监听，当用户在聚焦的列表项上按下回车键或空格键时触发相应的选择逻辑。

HTML 结构修改：

<ul>
  <li tabindex="0" data-description="...">Ibex</li>
  <li tabindex="0" data-description="...">Dugong</li>
  <li tabindex="0" data-description="...">Quokka</li>
</ul>

JavaScript 部分需要新增键盘事件处理，同时保留鼠标事件以确保兼容性：

listItems.forEach((item) => {
  item.addEventListener("mouseup", handleSelection);
  item.addEventListener("keydown", function(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleSelection.call(this, e);
    }
  });
});

方案二更为语义化，即使用 a 或 button 元素代替 li 作为可点击的交互元素。这种方式无需添加 tabindex，因为这些元素默认即可聚焦，并且默认支持键盘激活。但在样式方面需要额外工作将这些交互元素呈现为列表样式。

最终的解决思路是：无论选择哪种实现方式，核心目标都是确保所有用户都能够通过键盘完成与鼠标相同的交互操作，包括聚焦和激活两个关键环节。

无障碍键盘交互的原则

本任务体现了 JavaScript 无障碍的核心原则之一：设备无关的事件处理。任何通过鼠标完成的交互，都应该有等效的键盘操作途径。

对于鼠标的 click 或 mouseup 事件，键盘的等效事件通常是聚焦状态下按下回车键或空格键。对于 hover 或 mouseover 事件，键盘的等效事件是 focus 和 blur。开发者在设计交互时必须成对考虑这些事件组合，确保不同输入方式的用户都能获得完整的操作体验。

总结

本日的三项技能测试从不同维度考察了对 CSS 和 JavaScript 无障碍最佳实践的理解程度。

第一项任务揭示了链接样式的基本要求：链接必须通过颜色、下划线或两者结合的方式与普通文本区分，焦点状态必须有清晰的视觉轮廓。这些看似基础的样式规则，对于依赖视觉识别和键盘导航的用户而言至关重要。

第二项任务强调了颜色对比度和可缩放文字的重要性。WCAG 标准为对比度和文字缩放提供了明确的量化指标，开发者应当善用检测工具主动验证，而不仅仅依赖视觉判断。

第三项任务展示了键盘可访问性的具体实现路径。鼠标事件必须配备键盘事件，非交互元素需要通过 tabindex 纳入焦点序列，或者直接使用具备语义的交互元素。

综合来看，这三项测试覆盖了 CSS 和 JavaScript 无障碍实践中最为基础且关键的问题域。掌握这些技能并应用到日常开发中，是构建真正包容性 Web 应用的基本要求。