网页中 li 元素作为链接容器时如何通过 CSS 增强可访问性
当列表项包含链接时，仅依赖 CSS 无法解决视觉识别与焦点状态的问题，必须通过样式规则明确链接的视觉特征并确保键盘操作可见。
识别列表链接的可访问性缺陷
在网页中，列表项通常用于组织内容，但如果列表项内部包含链接，且 CSS 规则未明确指定链接样式，用户将难以区分链接与普通文本。例如，当链接被设置为无下划线和灰色文字时，屏幕阅读器用户无法快速识别可点击区域。此外，如果未设置焦点状态样式，键盘用户在导航列表时无法知道当前选中的是哪个链接，导致操作困难。
MDN 的 CSS 可访问性测试任务指出，当现有规则集仅对链接应用了无下划线和灰色颜色，且移除了轮廓线时，链接的视觉特征被削弱。这种情况下，用户无法通过视觉判断链接的可点击性，也无法通过键盘焦点状态定位当前选中的链接。因此，必须通过新增 CSS 规则来恢复链接的视觉提示和焦点可见性。
通过 CSS 规则增强链接的视觉与焦点状态
为了修复上述问题，需要为列表中的链接添加明确的样式规则。首先，通过 `li a` 选择器为链接添加下划线和醒目的颜色，使其在视觉上区别于普通文本。例如，将链接颜色设置为红色并添加下划线，可以显著提高链接的可识别性。其次，必须为链接的 `:hover` 和 `:focus` 状态定义样式，确保鼠标悬停和键盘聚焦时链接的外观发生变化，从而提供清晰的交互反馈。
在 MDN 的测试示例中，新增的 CSS 规则包括 `li a { text-decoration: underline; color: rgb(150 0 0); }` 和 `li a:hover, li a:focus { text-decoration: none; color: red; }`。这些规则不仅恢复了链接的视觉特征，还通过颜色变化和下划线移除增强了焦点状态的可见性。通过这种方式，用户可以轻松识别链接，并在键盘导航时明确知道当前选中的链接。
验证可访问性修复效果的方法
修复后，需要通过实际操作验证链接的可访问性是否得到改善。首先，使用浏览器开发者工具检查链接的样式是否正确应用，确保下划线和颜色符合预期。其次，尝试使用键盘 Tab 键导航到列表中的链接，观察焦点状态是否清晰可见，且链接颜色是否随焦点变化。此外，可以使用屏幕阅读器测试链接的可识别性，确认用户能否快速定位并访问链接。
MDN 建议通过浏览器加载页面并手动测试链接的交互行为。例如，在键盘模式下，按下 Tab 键遍历链接，检查焦点样式是否明显；在鼠标模式下，悬停链接并观察颜色变化。如果链接在键盘和鼠标操作下均能提供清晰的视觉反馈，且屏幕阅读器能正确识别链接，则说明可访问性修复成功。
避免常见可访问性陷阱的注意事项
在为列表链接添加样式时，需避免常见的可访问性陷阱。首先，不要仅依赖颜色变化来指示链接状态，因为色盲用户可能无法区分不同颜色。其次，确保焦点样式不仅限于颜色变化，还应包括轮廓线或背景色变化，以便所有用户都能看到焦点位置。此外，避免使用 `outline: none` 移除默认焦点样式，除非明确提供了替代样式。
MDN 的测试任务强调，不能修改现有的 `a` 选择器规则，因为它们可能由 CMS 提供。因此，必须通过更具体的选择器（如 `li a`）来覆盖默认样式。同时，焦点状态样式应与悬停状态区分开，以确保键盘用户和鼠标用户都能获得一致的交互体验。通过遵循这些原则，可以有效提升列表链接的可访问性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。