代码之家 › 专栏 › 技术社区 › Bluefire

A11Y用于空锚标签

anchor accessibility css html

Bluefire · 技术社区 · 7 年前

我们的站点当前有一个组件,该组件通过使用 <a> 使用通过使用设置的“背景”图像标记

a.class-name::after {
    content: url('image.png');
}

标记本身没有内容(看起来像 <a class="class-name" other-attrs></a> )我的问题是,我们需要向这个链接添加等价的alt文本。因为定位标记不支持 alt 属性,我可以考虑两个选项:

将alt文本放入标记内,然后设置其样式,使文本不会显示。问题是,我不确定屏幕阅读器是否会发现这一点,因为它可能检测到它是不可见的。
将alt文本放入 title 标记的属性。尽管如此 标题 通常被屏幕阅读器忽略,我读到 here “唯一一个很小的例外,标题属性将被读取是如果绝对没有链接锚文本,这是罕见的”。对我们来说,这是 准确地说 但我想和更多的知识渊博的人再次确认这真的有效。

也许还有更好的第三种选择?无论如何,任何帮助都会非常感谢!

3 回复 | 直到 7 年前

slugolicious 7 年前

保持简单。只需添加一个 aria-label 属性到锚。

<a class="class-name" aria-label="text you want read by screen reader"></a>

Quentin 7 年前

如果有内容图像,请使用内容图像:

<a ...><img src="image.png" alt="..."></a>

保留背景图像背景。

Stickers 7 年前

您可以添加 <span> 标签在里面 <a> :

<a href=""><span class="sr-only sr-only-focusable">alt text</span></a>

类的CSS:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

上面的样式取自引导程序。你也可以找h5bp或者wordpress来看看它们的方法是什么,它们大体上都非常相似。

然后按常规应用其他样式。但我建议用 background 在伪元素上,因为您将无法用 content: url() 。

推荐文章

Shtole · 我需要为<button>中的装饰性<svg>隐藏aria吗?

1 年前

gallium314 · 我应该使用什么HTML语义来访问自定义计算器的输出?

2 年前

Sheppard25 · 为什么按下Tab键后onBlur会触发onKeyDown?

2 年前

user2933998 · 通过程序更改动态文本,而不必转到“设置”

2 年前

Betulino · 一行中的多个表单字段是否具有良好的可访问性?

2 年前

Takeshi Tokugawa YD · 如何获取“pa11y”中的目标行号和列范围?

3 年前

Yoginath Sumanth · 如何解决PageSpeed Insights诊断可访问性的性能问题部分打问号

3 年前

GurpusMaximus · 如何使用Java PDFBox 2.0.8库创建可访问的PDF,该库也可以使用PAC 2工具进行验证?

8 年前

David Costa · 如何以编程方式在主屏幕之间滚动?

8 年前

Ian Boyd · 如何设置与TEdit控件关联的可访问名称?

8 年前