辅助功能 链接状态
为什么
不同的链接状态帮助用户与链接进行交互。已访问状态可以帮助患有短期记忆丧失的人理解哪些内容已阅读。悬停状态可以帮助患有肌肉控制能力下降的人知道何时点击。聚焦链接帮助键盘用户知道他们即将激活哪个链接。
什么
链接几乎不需要介绍。它们是网络的核心。一个链接有很多状态。以下是五个最常见的状态。在 CSS 术语中，这些是伪类
- 未访问
- 已访问
- 悬停
- 活动
- 焦点
如何
为了确保所有链接状态都可访问，我们必须记住以下三个技巧。我们将使用来自红十字国际委员会 (ICRC)首页的一个示例。
1. 下划线
链接默认情况下带有下划线。从正文文本中的链接中删除下划线在大多数情况下都是一个坏主意。我们在关于颜色本身的部分学习了这一点。这对未访问和已访问链接最为重要。
在 ICRC 的示例中，正文文本中有一个链接 - 战争规则。没有下划线。让我们从样式表中删除 text-decoration: none;
现在，该链接对色盲人士可访问了。
2. 对比度和焦点
所有状态都必须具有足够的对比度，正如我们在色彩对比中了解到的那样。此外，聚焦链接必须与非聚焦状态具有足够的对比度。
现在，链接战争规则处于聚焦状态。文本有一个橙色的轮廓，没有任何偏移。此焦点状态有两个问题。首先，与白色背景相比，橙色轮廓的对比度较低。其次，缺乏偏移使文本难以阅读。让我们使用站点颜色调色板中已有的红色，并添加一些偏移。
好多了！一个可访问的聚焦链接，适用于使用键盘导航和/或视力下降的人群。
此改进使用了 CSS 属性outline-color 和outline-offset。
3. 悬停
清晰的悬停状态对每个人都有帮助，特别是对运动障碍者。
在 ICRC 的页脚中，您可以看到一系列快速链接。它们具有非常细微的悬停状态，颜色从浅灰色变为白色。此效果可以改进。
在此示例中，我们为悬停状态添加了一个效果，粗体文本。现在，用户即将执行的操作更加清晰。
