javascript - TalkBack 屏幕阅读问题

Question

我试图掌握如何在头脑中使用屏幕阅读器进行编码，但我遇到了很多问题。第一个示例是我尝试显示的单个 HTML 元素:

<h2><span>This is an element.</span></h2>

Android 上的 Talkback 会将其读作“这是一个元素 header 2”，但我想知道如何制作它以便仅将其读作“这是一个元素”。

另一个问题是具有大量嵌套子元素的元素；例如，我测试了这个:

<div aria-live="assertive" aria-atomic="true" tabindex="0">
    <div>
        <div>
            <p>This is text for the div.</p>
        </div>
    </div>
    <div>
        <p> This is additional text. </p>
    </div>
</div>

我希望屏幕阅读器说“这是 div 的文本。这是附加文本。”，但它只说“这是 div 的文本”。我的印象是 aria-atomic 会让该区域的所有内容都被读取，那么我可能做错了什么？我试图将第二句话设为标题，但这也没有用(在这种情况下，我如何才能使 div 和 title 属性的内容都被读取？)。

最后，虽然这个问题仍然存在，但我奇怪地能够同时阅读标题文本和内容文本:

<a title="for the title">this is additional text</a>

...但仅当我单独关注该元素时。如果我尝试使它成为带有其他文本的 div 的子元素，la:

<div>This is a title and <a title="for the title">this is additional text</a></div>

当我想要“这是一个标题，这是标题的附加文本”时，它会读出“这是一个标题，这是附加文本”。它基本上跳过了 title 属性。

这很令人困惑；我已经阅读了 aria 属性以及某些屏幕阅读器和 Talkback 的具体工作方式，但我没有运气。任何帮助将不胜感激。

Answer 1

如果您像在您的案例中那样将跨度放在标题标签下，屏幕阅读器将读取标题级别。如果您不想阅读标题，则不要将 span 放在标题标签内。