让屏幕阅读器按预期工作，用于拆分为HTML元素的单词

我希望将一个单词分解为显示目的，但如果屏幕阅读器要访问该单词，我希望保持可访问性。这可能吗

<span>T</span><span>itle</span>

<span>T</span><span>i</span><span>t</span><span>l</span><span>e</span>

标题
标题

我想让这两个例子读“Title”，因为这基本上就是它们的显示方式。实体不需要是跨距，如果需要，可以将块包装在另一个元素中

---

在不使用javascript的情况下，允许单独设置字母样式的同时，实现此行为的最佳方法是什么？

您还可以在包装跨距上使用

aria label

属性，以确保以您希望听到的方式阅读：

<span aria-label="Title"><span>T</span><span>itle</span></span>

标题

---

这也是一种很有用的技巧，可以确保符号和其他内容被正确阅读，但你应该仔细检查实际的阅读器，以确保它实际上是按照预期的方式说的。

我为你的示例做了一个演示：

NVDA和JAWS都把它们读作“标题”。这告诉我，你不太可能做任何事情，因为它们读得很好

---

div

既不是地标，也不是互动内容。

aria标签

不会被屏幕阅读器读取（这是正确的）。因此，这种方法无论如何都不会奏效。如果你被卡住了，我无论如何都会看着你

---

只要启动更多的屏幕阅读器并试一试（画外音、对讲、奥卡、叙述者都是很好的选择）。

这里的问题似乎在于你的屏幕阅读器或你使用它的方式

使用Chromevox，当我直接导航（使用快捷方式

Chromevox+箭头

）到元素时，我可以看到这个“错误”，但当我启动整个页面读取时（使用快捷方式

Chromevox+R

）

问题是由于用于读取文档的粒度。不幸的是，Chromevox的当前版本非常糟糕，我无法找到任何解决方案来使用定义的快捷方式（

Chromevox+-

）来更改粒度

请注意，只要您使用非块级元素，一个好的屏幕阅读器就应该正确地宣布这一点，而Chromevox的情况并非如此，例如，它以不同的方式处理这些元素：

<b>T</b>itle  <-- This is read separately (but should not)

---

Title由于
和
在语义上是中立的，我认为这根本不会影响屏幕阅读器。他们应该直接把这个词读出来。我能想到的最糟糕的情况是他们一个人读每封信——你为什么不测试一下呢？@junkfoodjunkie我能想到的最糟糕的情况是他们一个人读每封信。这正是问题所在。您是否尝试过使用其他元素来包装它们？像
或类似的？相关：@Andrew，你测试过这个吗？使用什么屏幕阅读器？如果这是ChromeVox的一个问题，您可能不必担心。我还没有遇到过使用ChromeVox的盲人用户。视力低下的用户可以使用ChromeVox作为补充，但同样可能（IME）使用合适的屏幕阅读器，这不会显示您概述的问题（请参见下面的答案）。div既不是地标，也不是交互式内容。
aria标签
不会被屏幕阅读器读取（这是正确的）。@aardrian Why“正确的”。
aria标签
不是适用于任何角色元素的属性吗？（见：w3.org/TR/wai-aria-1.1/#aria-label）我的立场正确。谢谢你的澄清，@aardrian@Adam，无论是
还是
都没有任何默认角色。不管怎样，SRs不会读取这些元素上的
aria标签
，因此无论如何都没有意义。支持胜过规范，无论好坏。@aardrian是的，这有非常糟糕的支持，但他们应该支持它，因为“基本标记的所有元素”包括
div
或
span
。这将使我们的生活更轻松；-）
<span>T</span>itle  <-- This is (correctly) read as a whole word