在页面顶部的网站主导航菜单中，第一个元素是链接到“/”的“主页”链接。在视觉上，我需要将其渲染为徽标图像，没有文字，但对于盲人和视障人士，我希望屏幕阅读器（如VoiceOver）阅读链接标题。
直到最近，这曾经起作用（应该是微不足道的）：
<a href="/" title="Home"> </a><!-- VoiceOver ignores the link :( -->
并且CSS将使用特定大小和背景图像来设置样式。
然而，令我惊讶的是，现在iOS上的VoiceOver只是忽略了链接，就好像它不存在一样，显然“因为”它没有内容文本（除了空格）。我已经确认，如果我在其中放入文本，它就可以了。但我不希望看到和不需要屏幕阅读器的人看到该文本。
所以我甚至试过这个：
<a style="font-size:0" href="/" title="Home">Home</a><!-- VoiceOver still ignores the link :( -->
VoiceOver仍然忽略链接!!显然有人有一个绝妙的想法，即如果某些东西是零大小的，因此对非盲人来说是不可见的，那么它应该被认为是不存在的。顺便说一下，通过添加不可见的链接，打破了常用于增强盲人可访问性的所有技巧。
即使这样也无法解决问题：
<a style="font-size:0" href="/" title="Home" aria-label="Home">Home</a><!-- VoiceOver still ignores the link :( -->
所以如何让VoiceOver阅读我不希望以图形方式显示的链接标签？
答案 0 :(得分：3)
不要通过将其设置为使用CSS的空元素的背景来实现图像。最好的选择是使用传统的<img>标记，如下所示：
<a href="/">
<img src="logo.png" width="40" height="40" alt="homepage">
</a>
这将为您提供一个图像，该图像使用alt属性作为40px长和40px宽的链接加倍，使其可访问。话虽这么说，因为我不能完全理解你的情况，这可能不是一个选择。如果您的链接必须显示为带背景图片的空元素，请继续阅读。
W3C有一个名为WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）的技术规范，它为我们提供了一些有用的工具来增加不易访问的网页的可访问性。使用aria- *属性，您可以轻松地使这样的事情按预期工作。
在这里，您有几个选择：
aria-describedby aria-describedby属性允许您按ID指定应该用于描述元素的元素。在你的情况下，你可以像这样使用它：
<a href="/" aria-describedby="description"> </a>
<span id="description" class="sr-only">Home page.</span>
aria-hidden 另一个选项是在屏幕阅读器读取页面时将所有元素隐藏起来。这可能与以下内容类似：
<a href="/" title="Home">
<img src="logo.png" width="40" height="40" aria-hidden="true">
<span class="sr-only">Home page.</span>
</a>
在这些示例中，使用.sr-only类隐藏用于描述元素的文本。显然，除非您将内容设置为隐藏在除屏幕阅读器之外的所有设备上的方式，否则这样做不会做任何事情（除非您使用Bootstrap，因为.sr-only是Bootstrap的一个组件）。要设置样式，您可以执行this Stack Overflow post中提到的以下内容。
.sr-only {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
维基百科：WAI-ARIA
W3C：Using ARIA
答案 1 :(得分：1)
史蒂夫·福克纳（Steve Faulkner）有一篇关于title属性的帖子，可能在这里以及许多其他情况下都很有用。 史蒂夫的帖子enter link description here