在现代 Web 开发中，我们经常使用音频元素来播放声音或音乐。然而，对于视觉障碍用户或听觉障碍用户，使用音频元素可能会变得复杂，因为他们无法通过视觉或听觉方式与网站进行交互。
为了解决这一问题，我们可以使用一些最佳实践和技术，以确保我们的音频内容可访问性和可用性。
无障碍 HTML5 Audio 元素
无障碍 HTML5 Audio 元素需要遵循以下几个指导原则：
提供可视化的替代品，以允许视觉障碍用户获取与声音相关的信息。这可以通过提供文本说明或视频说明来实现。
提供文本 /字幕来允许听力障碍用户获取相同的信息。这可以通过添加外部字幕文件或使用 WebVTT 标准实现。
提供无序的播放、暂停、停止和其他音频控件，并确保这些控件可通过键盘使用。这使得视觉障碍用户和键盘用户能够更容易地控制音频播放。
通过遵循这些指南，我们可以在不牺牲体验质量和性能的情况下，在我们的 Web 应用程序中实现更好的可访问性和可用性。
以下是一个基本的 HTML5 Audio 元素，实现了上述指南：
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <track kind="captions" src="captions.vtt" srclang="en" label="English Captions"> <track kind="captions" src="captions.fr.vtt" srclang="fr" label="French Captions"> Your browser does not support the audio element. </audio>
在上述代码中，我们添加了一个控件属性，以提供播放、暂停、跳过和停止这些基本的音频控件。
我们使用了源标记来提供多个可用于不同浏览器的音频文件格式。此外，我们还添加了音频文件的字幕。为了实现字幕，我们使用了 WebVTT 标准，其中 kind 属性设为 captions。我们还为多个语言提供了语言替代品，以确保全球用户都能够理解音频内容。
无障碍音频控件
我们也可以为音频控件添加一些无障碍性功能，使其可访问性更佳。以下是一些有用的提示：
使用
aria-label或aria-labelledby属性为控件添加有意义的标签，以便屏幕阅读器用户可以理解控件用途。使用
tabindex属性来确保音频控件可以通过键盘导航，并确保它们的顺序可以被理解。添加
title属性以提供工具提示，以便用户了解控件用途。为控件添加键盘快捷键以提高可用性。
以下是一个示例控件，使用上述所有技术来实现：
-- -------------------- ---- -------
------ ----------- --------------- ---------------- ------ -------------
------- ---------------------- ------ ---------------------- -----------------
---- -------------- -----------
---------
------- ---------------- ------ -------------------- ----------
---- -------------- -----------
---------
--------
--------
-------- ------------ -
--- ----- - ----------------------------------
-- -------------- -
-------------
- ---- -
--------------
-
-
-------- ---------- -
--- ----- - ----------------------------------
--------------
----------------- - --
-
---------在上述代码中，我们使用了 aria-label 属性为整个音频控件添加了有意义的标签。我们还在音频元素上使用了 tabindex 属性，以确保它们可以通过键盘导航。
我们还添加了 title 属性，以提供工具提示，并使用了键盘快捷键 Spacebar 和 S 来控制播放和停止操作。
总结
通过遵循最佳实践和技术，我们可以在 HTML5 Audio 元素中实现无障碍性和可用性，以确保我们的 Web 应用程序对所有用户都是开放和友好的。
我们可以通过提供可视化的替代品、外部字幕和键盘可用的音频控件来提高可访问性。我们也可以为控件添加有意义的标签、键盘快捷键和工具提示来提高可用性。
在实现音频功能时，请始终考虑可访问性和可用性，以确保您的应用程序对所有用户都是可访问的，无论他们的身体能力如何。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701669968c7c53b0e3af34