最近，我在Javascript库Splitting.js的帮助下发表了有关对可变字体进行动画处理的文章。 一些人问到了这种可访问性的含义，因此在本文中，我们将探讨为什么从可访问性的角度来看拆分文本字符串会带来问题，以及如何确保拆分后的文本每个人都可以访问。
Splitting.js回顾
假设您有一个单词，一个标题，一个段落或一个句子，并且想要逐个字母地更改样式。 Splitting.js的工作方式是将每个字符（包括空格字符）包装在标记中，并添加各种属性，使您可以更轻松地定位和操纵每个字符。 它还将每个单词包装在自己的范围内，因此您也可以单独定位它们。 有很多创造力！
以下Codepen演示包含一个运行中的Splitting.js示例，该示例使用CSS中的自定义属性来计算每个字母的颜色值。 在本文中，我将介绍我用来使其可访问的技术。
演示地址
为什么拆分文本成为可访问性问题？
有些盲人，有部分视力的人或由于各种原因而在网上阅读困难或有问题的人，可能会使用屏幕阅读器软件来帮助他们浏览和浏览网站。 屏幕阅读器以听觉方式向用户宣布网页的内容。 为了更好地理解使用屏幕阅读器的人的体验，我建议您观看屏幕阅读器用户如何访问Web ，这是Smashing Magazine的可访问性网络研讨会。
这就是语义HTML尤其重要的原因之一：并非每个人都以可视方式访问我们的网页，因此，将正确HTML元素用于正确的目的可以使页面导航和查找相关内容变得更加容易。
为了演示目的，我们可能希望拆分文本字符串，但是在（例如）标题内更改标记可能会影响屏幕阅读器解释文本并将其读回给用户的方式。 考虑以下标记–一个简单的标题标记：
< h1> Oh hello there h1> 现在让我们看一下拆分为span的相同标题：
< h1>
< span> O span>
< span> h span>
< span> span>
< span> H span>
< span> e span>
< span> l span>
< span> l span>
< span> o span>
< span> span>
< span> T span>
< span> h span>
< span> e span>
< span> r span>
< span> e span>
h1>每个字符都包裹在一个单独的标签中，某些屏幕阅读器不会解释每个单词，而是分别宣布每个字母。 对于使用屏幕阅读器浏览页面的人来说，这不是一个非常有用的体验！
屏幕阅读器之间的行为不一致。 最初，我在Safari上使用VoiceOver测试了此功能，按预期阅读文本没有问题。 但是，其他人则省略了分词，并将内容读为一个长字。
使用WAI-ARIA使其可访问
幸运的是，这些可访问性问题并不意味着我们不能使用像Splitting.js这样的很棒的库。 我们只需要付出更多的努力，以确保我们的文本对所有人都可用。
WAI-ARIA为我们提供了用于定义应如何向辅助技术中呈现元素的属性。 虽然它旨在帮助使网站更易于访问，但它不能替代语义HTML。 当仅语义HTML还不够时，应使用它。
咏叹调标签
对于示例标题，我们可以使用aria-label属性为屏幕阅读器提供一个可访问的文本标签：
< h1aria-label=" Oh hello there ">
< span> O span>
< span> h span>
< span> span>
< span> H span>
< span> e span>
< span> l span>
< span> l span>
< span> o span>
< span> span>
< span> T span>
< span> h span>
< span> e span>
< span> r span>
< span> e span>
h1> 仅使用aria-label会导致某些屏幕阅读器读出文本，从而读出文本标签和内容。 这远非理想–我们不希望屏幕阅读器用户在听到标签后不得不听他们为他们拼写的文字。 因此我们需要向屏幕阅读器隐藏元素的内部内容，我们可以使用aria-hidden 。
隐藏的咏叹调
aria-hidden隐藏了可访问性树中的元素，因此屏幕阅读器将忽略它。 我们无法隐藏元素本身，因为它根本不会被读取-但是我们可以隐藏它的子元素。 因此，我们在这里有一个选择：我们可以将aria-hidden添加到标题中的每个中：
< h1aria-label=" Oh hello there ">
< spanaria-hidden=" true "> O span>
< spanaria-hidden=" true "> h span>
< spanaria-hidden=" true "> span>
< spanaria-hidden=" true "> H span>
< spanaria-hidden=" true "> e span>
< spanaria-hidden=" true "> l span>
...
h1> 或者，如果这有点乏味，我们可以选择将所有子级分组到另一个跨度中，并在其中添加aria-hidden ：
< h1aria-label=" Oh hello there ">
< spanaria-hidden=" true ">
< span> O span>
< span> h span>
< span> span>
< span> H span>
< span> e span>
< span> l span>
< span> l span>
< span> o span>
< span> span>
< span> T span>
< span> h span>
< span> e span>
< span> r span>
< span> e span>
span>
h1>使用Javascript添加ARIA属性
如果我们使用Spitting.js创建这些子元素，则可以使用forEach循环为每个单词添加aria-hidden="true" 。 正如我之前提到的， Spliting将一个句子拆分成多个单词，并将每个句子包装在 ，还包装了每个字符。 Splitting()返回目标元素的数组，因此我们首先需要遍历每个元素，然后遍历split元素中的每个单词。 然后，我们可以检查该元素是否具有aria-label属性，如果有，我们添加aria-hidden ：
/* Loop through all split elements */
Splitting().forEach(s=>{
/* Loop through words */
s . words .forEach(word=>{
/* If the parent element includes `aria-label`, set `aria-hidden="true"` */
if( word . parentElement .getAttribute('aria-label')){
word .setAttribute('aria-hidden',true)
}
})
})这将导致这样HTML结构：
< h1aria-label=" Oh hello there ">
< spanaria-hidden=" true ">
< span> O span>
< span> h span>
span>
< span> span>
< spanaria-hidden=" true ">
< span> H span>
< span> e span>
< span> l span>
< span> l span>
< span> o span>
span>
< span> span>
< spanaria-hidden=" true ">
< span> T span>
< span> h span>
< span> e span>
< span> r span>
< span> e span>
span>
h1> 用户仅听到aria-label属性的内容，而不听到元素本身内部的文本。 这就解决了我们的可访问性问题，意味着我们可以安全地拆分元素的文本内容，因为它知道所有人都可以访问。
如果Splitting.js可以默认执行此操作，那将是很好的选择，尽管对于不同类型的文本有很多不同的考虑因素。 目前， Github存在一个开放的问题，用于添加辅助功能。
感谢安迪·贝尔 （ Andy Bell）在发布原始帖子后在我的Twitter提要中签署了此可访问性解决方案！
翻译自: https://css-irl.info/how-to-accessibly-split-text/