无障碍打造：如何预防文本重写时的小错误

前言

在前端开发中，我们经常需要更改页面上的文本内容，包括但不限于修改按钮文字、调整提示信息等。然而，文本内容的修改可能会导致对于使用屏幕阅读器等辅助功能的用户产生不良影响，因此我们需要预防文本重写时的小错误，保障网站的无障碍访问。

本文将介绍文本重写时可能产生的问题和解决方法，并提供示例代码，帮助读者更好地理解。

可能产生的问题

问题一：文本重写后无法被屏幕阅读器识别

如果我们在页面上通过 JavaScript 修改了文本内容，但没有告知屏幕阅读器发生了变化，那么屏幕阅读器无法感知修改的变化，用户也就无法听到最新的内容。

// 示例 1
document.getElementById('text').innerHTML = '修改后的内容';

问题二：重复的文本内容

如果我们多次修改同一个文本内容，那么对于屏幕阅读器等辅助功能用户来说，会听到多次相同的内容，造成困扰。

// 示例 2
document.getElementById('text').innerHTML = '修改后的内容';
// ...
document.getElementById('text').innerHTML = '修改后的内容';

问题三：隐藏的文本内容

如果我们在页面上使用了 display: none 等方式隐藏文本内容，那么对于屏幕阅读器等辅助功能用户来说，隐藏的内容将无法被听到，可能会遗漏重要的信息。

/* 示例 3 */
.hide {
  display: none;
}

解决方法

解决方法一：使用 ARIA 标准辅助文本

我们可以使用 ARIA 标准提供的辅助文本来告知屏幕阅读器文本内容的发生变化，利用 aria-live="polite" 的属性值，经过一定的时间后自动将更新后的文本内容展示。

<!-- 示例 4 -->
<div id="text" aria-live="polite">
  修改前的内容
</div>

// 示例 4
document.getElementById('text').innerHTML = '修改后的内容';

解决方法二：使用 MutationObserver 监听变化

利用 MutationObserver 的方式，我们可以在文本内容变化时，自动告知屏幕阅读器发生了变化，达到无障碍访问的目的。

<!-- 示例 5 -->
<div id="text">
  修改前的内容
</div>

-- -------------------- ---- -------
-- -- -
--- ------ - --------------------------------
--- -------- - --- --------------------------- -
  ---------------------------------- ---------
  -------------------------------- ----------
  ----------------------
---
--- ------ - -
  -------------- -----
  -------- ----
--
------------------------ --------
---------------- - ---------
展开代码

解决方法三：使用 hidden 属性

我们可以使用 hidden 属性来替代 display: none 隐藏文本内容，这样用户使用屏幕阅读器时，就可以听到所有内容。

/* 示例 6 */
.hide {
  visibility: hidden;
  height: 0;
  width: 0;
  border: 0;
  position: absolute;
}

<!-- 示例 6 -->
<div class="hide">
  内容
</div>

结语

通过本文的介绍，我们了解了文本重写时可能产生的问题和解决方法，更好地保障了网站的无障碍访问，为所有用户提供更好的体验。

当然，这些方法不仅仅可以用于文本内容的重写，在其他需要修改或隐藏文本时同样适用。在实际开发中，我们需要充分考虑无障碍访问问题，以保障所有用户的权利和利益。

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