在前端开发过程中，无障碍性是一个重要的问题，我们需要确保用户无论任何状态下都能够正常使用我们的网站或应用程序。而工具提示是一个常见的交互方式，通常用户在悬停或点击一个元素时会弹出提示信息。
但是，在使用工具提示时，我们也需要考虑它的无障碍性。尤其是，对于视觉障碍用户，他们需要通过屏幕阅读器等辅助技术来听取提示信息。因此，我们需要使用 aria-describedby 属性来为工具提示提供无障碍性。
什么是 aria-describedby 属性？
aria-describedby 属性是 WAI-ARIA 规范（Web Accessibility Initiative – Accessible Rich Internet Applications）定义的一种辅助技术，它用来描述一个元素的额外说明、注释或描述。这些描述可能包括标签、段落、列表、图像等信息。
通过使用 aria-describedby 属性，我们可以将这些额外的说明信息关联到相应的元素上，并将其呈现给屏幕阅读器等辅助技术。
如何使用 aria-describedby 实现无障碍工具提示？
在实现无障碍工具提示时，我们需要将工具提示的内容添加到一个元素中，并将这个元素的 id 属性添加到相应元素的 aria-describedby 属性中。例如：
<button aria-describedby="tooltip">Hover me for tooltip</button> <div id="tooltip">This is a tooltip message</div>
在这个示例中，我们将一个 button 元素与一个 div 元素关联起来。当用户悬停或点击这个按钮时，屏幕阅读器会读取与其 aria-describedby 属性关联的 div 元素的内容，这就实现了无障碍工具提示。
考虑到辅助技术的其他问题
除了使用 aria-describedby 属性关联工具提示之外，我们还需要考虑到其他一些与辅助技术相关的问题：
- 让工具提示可见：通常工具提示是使用 CSS 控制
display或visibility属性的。我们需要确保工具提示在可见状态下能够被屏幕阅读器等辅助技术读取。 - 让工具提示包含足够的信息：尽可能提供足够的信息，以便用户根据提示决定下一步该做什么。
- 让工具提示易于触发：对于视觉障碍用户来说，使用鼠标悬停触发提示可能会比使用键盘更困难。因此，我们需要确保提示可以使用键盘轻松触发。
示例代码
在下面的示例代码中，我们将一个 button 元素与一个 div 元素关联起来，实现了一个无障碍工具提示。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------- ---------------
-------
-------- -
-------- -----
--------- ---------
-------- --
----------------- -----
------ -----
-------- ----
-------------- ----
-
------------ - -------- -
-------- ------
-
--------
-------
------
------- -------------------------------- -- --- ----------------
---- ------------ -------------------- -- - ------- -------------
-------
-------在这个示例代码中，我们使用了 CSS 控制工具提示的样式和显示方式。当用户悬停或点击按钮时，工具提示会由 display: none 变成 display: block，并且被屏幕阅读器等辅助技术读取。
总结
使用 aria-describedby 属性是为工具提示提供无障碍性的一种方法。通过将工具提示的内容添加到一个元素中，并将这个元素的 id 属性添加到相应元素的 aria-describedby 属性中，我们可以让屏幕阅读器等辅助技术读取这些额外的说明、注释或描述信息，从而提高用户的无障碍使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eac170f6b2d6eab358cc17