Html 屏幕阅读器如何处理由标记（而不是空格）分隔的文本？

出于风格原因，我有如下HTML标记：

h1{
字体系列：“Heebo”，无衬线；
字号：900；
}
h1跨度{
字号：100；
颜色：黄色；
}

Bigyellowbananas

您认为空间不足会给屏幕阅读器和盲文设备带来问题，这是正确的。标题将被解读为“Bigyellowbananas”，并在盲文设备上显示为一个单词

您可以通过在标题上使用

aria标签来解决此问题

<h1 aria-label="big yellow bananas">Big<span>yellow</span>bananas</h1>

大黄色香蕉

aria标签
覆盖屏幕阅读器和盲文设备标题内的文本。
实际上，它取决于屏幕阅读器是否将其作为单个单词阅读。
Jaws肯定会把你的文章当作一个单词来读，而画外音会读三个单词，甚至可能会在它们之间做一个夸张的停顿

理想情况下，为了安全起见，你应该在单词之间留出一个实际的空格，这样你就可以确保所有的内容都能被很好地阅读。
空格是在
之前还是在
之后并不重要。事实上，如果删除所有HTML标记，很明显可以看到应该在何处放置空格

不幸的是，我不是CSS专家，但我很确定有一种解决方案，它的代码具有正确的空格。例如，您不能为类似的内容更改代码吗

我的黄色

其中.space实际上只能是.sr，将宽度减少到1px，发送屏幕或任何其他常见的CSS技巧

在我看来，ARia label并不是一个完全可靠的解决方案。它通常用于元素交互，但在只有文本而没有交互的上下文中，它不能保证总是有效的。
一些屏幕阅读器需要一个角色，否则如果没有角色，他们会忽略aria标签。然而，在这里，
是一种不好的做法，您明确地赋予了一些隐含的角色（这可能会带来其他麻烦）。
role=“text”
或
role=“presentation”
更糟糕，它们都会使标题在从一个标题导航到另一个标题或列出页面的所有标题时被完全跳过

回到主要问题，请注意画外音并不总是正确的预期行为。考虑这一点：

这是蓝色的。

Jaws或NVDA没有问题，但我已经看到画外音在这样的代码上明确地说“句号”，例如将“蓝色”一词从句子中分离出来。
然而，在这种情况下，我不认为有一种简单的方法可以改变HTML以便在任何地方都能正确阅读。
如果你想问SEO的影响，你可以在上问。剩下的部分是关于主题的