在前端开发中，无障碍性（Accessibility）是非常重要的一环。在“无障碍”方面设计、开发和测试，可以使不同背景和需求的用户可以更好地访问网站或应用程序。
虽然前端开发人员可以通过键盘操作、鼠标和触摸屏来访问网站或应用程序，但对于一些残障人士，这些方式可能会很困难或者不可行，如视障人士。
在这篇文章中，我们将介绍如何使用 ‘aria-describedby’ 属性来为需要对页面进行辅助的用户提供更好的访问体验。我们还将通过使用示例代码来详细解释如何使用它。
ARIA-Describedby 是什么？
ARIA-Describedby 属性可以用来指示一个元素的描述信息。使用它，我们可以将一个文本输入框、按钮或其他元素所需的描述信息与描述文本相关联。这样，当用户聚焦到该元素时，屏幕阅读器可以读取该元素的描述信息，从而向用户提供更多的信息。
ARIA-Describedby 属性的语法格式如下：
<element aria-describedby="id1 id2"></element>
其中，‘id1’ 和 ‘id2’ 是相关文本的 id 属性。这些 id 可以与一个或多个文本元素相关联。
如何使用 aria-describedby 属性？
现在我们来看看如何将 aria-describedby 属性应用到页面的实际工作中。以下是使用输入框和按钮的示例代码：
<label for="user-name">用户名</label> <input type="text" id="user-name" aria-describedby="help-message"> <span id="help-message" class="sr-only">请输入您的用户名</span> <button type="submit" aria-describedby="help-message">提交</button>
在这个例子中，我们设计了一个简单的表单，其中包含一个文本输入框（用于输入用户名）和一个提交按钮。使用 aria-describedby 属性，我们将输入框和按钮与描述信息元素 ‘help-message’ 相关联。该 ‘help-message’ 元素位于输入框下方，将在用户聚焦于输入框或按钮时提供信息。
请注意，我们使用了 css 类 ‘sr-only’ 来隐藏了 ‘help-message’ 元素。这是因为屏幕阅读器将读取描述信息，我们不希望在页面上显示文本。相反，我们使用样式来隐藏元素。该类的示例代码如下：
-- -------------------- ---- -------
-------- -
--------- ---------
------ ----
------- ----
------- -----
-------- ----
--------- -------
----- --------- ---- ---- -----
------- --
-在这个示例中，我们将 .sr-only 类应用到带有描述信息的元素中，从而将其隐藏。
总结
ARIA-Describedby 属性是实现无障碍性的一种方式。通过将输入框、按钮或其他元素与它们的描述信息相对应，可以提高用户的访问体验。
在实际使用中，开发人员应该确保描述信息准确、明确和有用，以便为残障用户提供更好的体验。此外，通过将我们的描述信息与正确的元素相关联，并使用 css 来隐藏元素，我们可以确保页面上的视觉效果不受影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d198d0b5eee0b5258d385a