无障碍设备应用开发中常见的踩坑问题-JavaScript中文网-JavaScript教程资源分享门户

无障碍应用是指可以让视觉、听觉、语言或肢体不同程度受损的用户同样方便地使用的应用。因此，无障碍开发已成为现代 Web 开发中的重要领域，同时也成为在大多数国家的法律义务。

然而，很多前端开发者还没有意识到这一点，并且由于无障碍应用开发的复杂性而常常犯错误。这篇文章将介绍一些在无障碍设备应用开发中常见的踩坑问题，并提供一些学习和指导意义。

1. 使用有意义的文本

屏幕阅读器是一种用于阅读网页内容的软件，将文本转换成语音。因此，对于使用屏幕阅读器的用户来说，在网站上使用了一个带有无意义字符的文本而不是有意义的文本是很烦恼的。以下是一些经常被认为是有意义的文本的例子：

<a href="#">
    <span class="sr-only"> 返回顶部</span>
    <i class="icon-arrow-up"></i>
</a>

在这个例子中，屏幕阅读器用户听到的只是"返回顶部"，而不是 "span" 或 "i" 标签。这个例子使用了字幕的“sr-only”类来确保只有屏幕阅读器用户可以听到它。

有很多色弱或者盲人是无法分辨颜色的，因此依赖颜色来传达信息可能会排除这一部分的用户。下面的例子演示了如何使用颜色来传递信息，这通常是面向肥皂剧或日报站点：

<p style="color:#ff0000">新闻标题</p>

在这个例子中，"color" 样式在没有颜色信息的情况下是无法传达信息的。为了解决这个问题，我们可以使用更有意义的 HTML 标签或者其他的可访问技术：

<h1>
    <span style="display:none;">新闻</span>标题
</h1>

在这个例子中，"title" 标签和 "span" 标签都能够在没有颜色信息的情况下传达。 "display" 样式通过隐藏 "span" 标签来确保只有屏幕阅读器用户可以访问它。

有些无障碍设备可能会在网站上出现的未知控件等等，同时也可能存在具有技术门槛的控件。为了帮助用户了解它的作用并正确使用它，需要提供指导性的文本。

<label for="amount">数量：</label>
<input type="number" id="amount" min="1" max="10" required>

在这个例子中，"label" 标签旁边的文本告诉用户那个输入框的作用是让用户输入数量。屏幕阅读器通常会读出这个标签和输入框作为一个整体，同时让用户更好的理解。

有自动播放的视频和音频可能会干扰用户当前的活动，例如在他们正在听音乐或者正在读文章时。如果要使用这些功能，需要提供一个开关或者授权请求。

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    你的浏览器不支持 audio 元素。
</audio>

在这个例子中，"audio" 标签包含 "controls" 属性，指示控件需要开始播放。用户可以使用它们来掌控音频的播放。

本文介绍了无障碍设备应用开发中常见的踩坑问题，并提供了一些学习和指导意义。在实际开发中应该遵循 “内容优先” 的原则，以确保所有用户都能够获得同样的体验。借助各类可访问技术和做到正确的标记和语义，在开发中有效地实现无障碍性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/670e45e75f551281026055e3