更正仅包含背景图像的链接的 a11y 声明

Question

我正在尝试为仅使用跨度内的背景图像构建的链接找到改善 a11y 的最佳方法（老式的大型图标 spritesheets 方法）。 它们是大型网站的一部分，现在更改整个图标系统并不是一个现实的场景。

我们基本上拥有的是这两个不同的链接；

第一个是问题：

<a href="#" aria-label="Functionality Description">
  <span class="icon-functionality"></span>
</a>

另一个链接样式中有文本，所以应该没问题。

<a href="#" aria-label="Functionality Description">
   <span class="icon-text">Functionality</span>
   <span class="icon-functionality"></span>
</a>

试图找出在第一种情况下我们应该做什么，我找到了一个我不确定的解决方案； 为包含背景的span赋予role="img"和一个空的alt属性。

这样，锚点中就有了一个图像，并且通过使用空的alt属性，屏幕阅读器会理解它是一个装饰图片。 在这种情况下，阅读器具有与锚关联的aria-label以“理解”功能。

<a href="#" aria-label="Functionality Description">
  <span class="icon-functionality" role="img" alt></span>
</a>

虽然我知道这并不理想，并且从长远来看，我们可能想要更改整个图标系统，但这是否足以提供一个像样的 a11y？ 你怎么看？

欢迎所有建议。 提前致谢！

编辑以添加给定的 Siteimprove 错误的屏幕截图：

Answer 1

简短的回答

使用aria-label跨站点的当前实现没有任何问题。 如果未读取aria-label ，则您改进的示例实际上对可访问性更差。

更长的答案

背景图像不会被屏幕阅读器宣布，并被假定为纯装饰性的。

所以以下（你的第一个例子）是完全可以接受的：

<a href="#" aria-label="Functionality Description">
  <span class="icon-functionality"></span>
</a>

aria-label将提供屏幕阅读器所需的所有信息。

在您的第二个示例中， aria-label无论如何都会覆盖内容，因此icon-text与屏幕阅读器无关。

在你的第三个例子中，你有同样的东西， aria-label覆盖了内容。

话虽如此，如果您没有具有 null alt属性的aria-label是不正确的，它应该是一个要隐藏的空alt属性。 （所以alt=""不是alt ，否则屏幕阅读器将尝试查找图像的名称（这可能会导致背景图像出现意外行为）。

您现在还使用role="img"将背景图像引入了可访问性树（因为它之前会被忽略），因此实际上为您自己做了更多的工作。

最佳选择

如果您能够实现，更好的选择是视觉隐藏文本，因为它具有更好的兼容性（令人惊讶的是， aria-label并非在所有场景中都 100% 支持）并且视觉隐藏文本在纯文本浏览器中工作。

如果您能够做到这一点，那么由于兼容性，这是更好的做事方式，但是您的aria-label方法在 99% 的情况下都很好，所以如果这很难实现，请不要太担心。

在下面的示例中，我包含了一个内联 SVG 用于演示目的，而不是您的背景图像，但关键部分是带有visually-hidden class 的附加<span> 。

 a{ width: 25%; display: block; }.visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }

 <a href="#"> <span class="icon-functionality"> <:----ignore this SVG it is for demonstration purposes only--> <svg aria-hidden="true" focusable="false" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81,201z"> </path> </svg></span> <.----This is the key part, use this instead of `aria-label` if you can.--> <span class="visually-hidden">Functionality Description</span> </a>

额外的想法

只是一个快速的，但我希望href="#"仅用于演示目的。

如果您在网站上发现任何使用href="#"的锚点，这是一种反模式，也是一种不好的可访问性做法。

相反，如果它们执行操作，它们应该是按钮，否则如果它们用于导航，它们应该是有效的 URL。

我只是在您的aria-label写着“功能描述”时提出这种担忧，这让我认为您正在使用锚点作为按钮。

如果您需要更多关于为什么这对可访问性很重要的信息，我可以将您链接到有关此问题的几个答案。