在无障碍开发中，声音控制是一个核心功能。但是，开发人员经常遇到一些声音控制的 bug，这些 bug 可以影响到残障人士的使用体验，因此必须尽快解决。本文将介绍一些常见的声音控制 bug 及其解决方法，以帮助开发人员更好地进行无障碍开发。
常见问题
声音控制不适用于移动设备
某些声音控制的 API 仅适用于桌面端浏览器，无法在移动设备上使用。例如，WebAudio API 的某些方法可能在移动设备上不可用或效果不佳。
解决方案：使用适用于移动设备的声音控制 API，如 iOS WebAudio 和 Web MIDI API。此外，您应该尽可能使用标准的 HTML5 媒体控制API，以确保最大的兼容性。
声音控制的交互方式不明确
一些使用屏幕阅读器的盲人用户可能不知道如何与网站上的音频控制进行交互。这可能会导致他们无法从音频的正确部分听取内容。
解决方案：确保您的网站上的音频控制具有明确的交互方式，并提供无障碍性指南。使用 ARIA 标记来表示播放/暂停，音量调节等控件的作用，并确保您的标记正确。
没有提供无障碍性的提示音
如果您在网站上播放声音，您需要提供无障碍性的提示音，以使盲人用户知道何时播放了声音。
解决方案：在您的网站上播放声音时，提供无障碍性提示音。您可以考虑使用 aria-live 属性对此进行标记。
语音识别输入时的声音控制表现不一致
语音识别输入可能会导致声音控制表现不一致，这可能会影响到盲人用户的使用体验。
解决方案：在语音识别输入时，提供明确的界面来指示用户何时可以停止输入。您还可以使用 ARIA 标记来表示输入状态和控制。
建议
在进行无障碍开发时，请始终考虑到不同能力用户的需求。在实现声音控制时，请遵循以下建议：
- 确保您的声音控制具有明确的交互方式，并提供无障碍性的指南。
- 提供无障碍性的提示音，以指示声音何时播放。
- 使用适用于移动设备的声音控制 API，并避免使用在移动设备上不兼容或效果不佳的 API。
- 使用 ARIA 标记来表示播放/暂停，音量调节等控件的作用。
- 确保声音控制在语音识别输入时表现一致。
示例代码
以下是基于 HTML5 媒体控制 API 的示例代码，用于实现一个具有无障碍性的音频播放器：
<audio controls> <source src="sample.mp3" type="audio/mpeg"> <source src="sample.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
可以使用 aria-label 属性来标记控件如下：
<div role="group" aria-label="音频控制">
<button aria-label="播放" onclick="document.getElementsByTagName('audio')[0].play()">播放</button>
<button aria-label="暂停" onclick="document.getElementsByTagName('audio')[0].pause()">暂停</button>
<input type="range" aria-label="音量" min="0" max="1" step="0.1" value="1" onchange="document.getElementsByTagName('audio')[0].volume=this.value;">
</div>使用 ARIA 标记来表示状态：
<div role="alert" aria-live="polite">正在播放</div> <div role="alert" aria-live="polite">已暂停</div> <div role="alert" aria-live="polite">音量为 50%</div>
实现无障碍性的提示音：
<audio controls> <source src="sample.mp3" type="audio/mpeg"> <source src="sample.ogg" type="audio/ogg"> <source src="ding.mp3" type="audio/mpeg" oncanplay="this.play()"> <source src="ding.ogg" type="audio/ogg" oncanplay="this.play()"> Your browser does not support the audio element. </audio>
总结
无障碍开发中的声音控制是一个核心功能，开发人员必须要考虑到不同能力用户的需求。本文介绍了一些常见的声音控制 bug 及其解决方法，并提出了一些实现无障碍性的声音控制的建议，希望对无障碍开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f714fbf6b2d6eab3fa1d78