“打字机”效应的问题及其解决方法

关于

问题

解决方案

但为什么？

你呢？

关于

你想展示你的作品集网站，并想添加一些精美的图形来展现你的 JavaScript 技能。还有什么比添加一个精美的“打字机效果”来向世界展示你多面的个性更好的方法呢？

确实很棒！但有一个问题。这与可访问性有关。

问题

简而言之，使用屏幕阅读器访问您网站的盲人根本看不到您在该部分到底写了什么。

当屏幕阅读器读到该部分时，它会读出当前写的内容。例如，如果在屏幕阅读器获得焦点时显示“typewr_”，它就会只读出该内容。这会让使用屏幕阅读器的访问者感到困惑，很可能会离开您的网站。

例如，让我们在我们的网站上创建一个打字机效果，循环显示“开发人员”、“设计师”和“咖啡迷”等词语。

HTML 看起来会像这样：

<h1 id="typewriter-effect">
  <span id="text"></span>
</h1>

然后将添加一些 Javascript 代码来<span>逐个字母地填充。完整示例请参阅 CodePen。

如果我们使用 iOS 上的 VoiceOver（iPhone 上流行的屏幕阅读器功能）访问您的网站，则打字机效果部分将听起来如下：

咖啡色下划线。标题级别 1

因为在聚焦时，该部分会显示“Coffee_”。

请参阅此处以观看带音频的视频。

这和你希望用户阅读的内容相差甚远。你希望用户阅读的内容应该是“开发人员、设计师和咖啡迷”。

解决方案

ARIA属性来救援！

我们将使用 ARIA 标签做两件事：

• aria-label以便告诉屏幕阅读器实际要说什么而不是标题或中的内容<span>。
• aria-hidden="true"以便告诉屏幕阅读器完全跳过打字机效果并阅读标签。

这样，当屏幕阅读器用户转到标题部分时，他们就能准确地看到你想要的内容。因此，HTML 现在看起来如下：

<h1 id="typewriter-effect" aria-label="Developer, designer and coffee addict">
  <span id="text" aria-hidden="true"></span>
</h1>

查看此 CodePen 以获取完整示例。

观看此视频，了解屏幕阅读器现在如何阅读您的页面。这就是我们想要的！🎉🎉🎉

但为什么？

我听到你问：

• 可访问性很重要吗？
• 我是否真的需要让屏幕阅读器用户可以使用一些新颖的功能，例如打字机效果？

答案是肯定的。你有责任确保你的网站无障碍且包容，而不是事后才想到。无障碍应该成为你默认工作流程的一部分。使用语义化 HTML。alt为所有图片添加标签。当然，ARIA在必要时使用属性。要包容，要人性化。

你呢？

你的网站有“打字机效果”吗？你让它变得无障碍了吗？如果有，你做了哪些改进？告诉我！