在设计无障碍网站时，我们需要考虑到视觉障碍者和语言障碍者对网站内容的无障碍访问问题。为了满足这一需求，有一些 HTML 属性被引入，可以通过它们来为屏幕阅读器提供更好的语义。
其中， aria-label 是一种为元素提供自定义文本描述的属性。一些使用它的常见例子包括：自定义按钮、空元素或没有文本标签的元素等。
例如，下面是一个使用 aria-label 的按钮示例。
<button aria-label="打开搜索对话框"> <i class="fa fa-search"></i> </button>
看起来，使用 aria-label 确实可以为无障碍用户提供更好的体验。但是，事实上，这种方法是会存在一些问题的。
例如，如果我们想要使用 innerHTML 动态修改按钮里面的 i 元素，何时覆盖 aria-label ？答案是，innerHTML 将覆盖 aria-label。
为了解决这个问题，我们需要使用 aria-labelledby 属性。
aria-labelledby 属性可以让我们为元素提供一个或多个 ID，这些 ID 对应的元素将提供给屏幕阅读器。因此，当引用（id）的元素的文本不存在时，此属性将为屏幕阅读器提供更具体的描述。
例如，下面是我们使用 aria-labelledby 来解决上述问题的按钮示例。
<button aria-labelledby="search-btn-desc"> <i class="fa fa-search"></i> </button> <div id="search-btn-desc" class="sr-only">打开搜索对话框</div>
在这个示例中，我们把 aria-label 替换为了 aria-labelledby，并把带有具体描述的 div 元素的 ID "search-btn-desc" 添加到属性值中。因此，该按钮所描述的功能仍将被屏幕阅读器捕捉到，即使它包含一个内部的 i 元素，这个元素可以被 innerHTML 动态修改。
我们在 div 元素上添加了一个 "sr-only" 类，该类将元素的文本内容移动到屏幕外。这可以确保该文本仅供屏幕阅读器使用。如果您使用 Bootstrap，可以使用 .sr-only 类。
// javascriptcn.com 代码示例
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}总结：
- aria-labelledby 属性可通过元素的 ID 提供更精确的语义描述
- 对于使用 innerHTML 动态修改元素的情况，优先使用 aria-labelledby 属性
- 对于提供无需完整描述的简单附加文本，优先使用 aria-label
使用无障碍网站的最终目标是提供更好的体验和访问性。通过遵循上述最佳实践，并尽可能多地测试您的应用程序，您可以确保您的应用程序可访问性最高。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6531e2f97d4982a6eb3e5c27