屏幕 reader 未读取 header 标签内的文本

Screen reader not reading text within header tag

我有一个包含页面标题的 header 标签。 Windows 屏幕 reader 没有阅读该文本,我想知道是否可以通过添加一些 aria 项目来阅读该文本?

<section class="section">
    <header class="section-title" ip-l10n="county_list">List of Countries</header>
</section>

为了确保我们谈论的是同一件事,有 标题 headers。标题是 <h1><h6> 元素。 Headers 通常在描述表时使用,是列顶部的名称,即列 header<th> 标记。

您曾提到您的 header 包含 "title of the page"。页面标题通常包含在 heading 中,如果它是页面的主标题,则特别是 <h1>。所以我不清楚你真正问的是哪个术语。

我知道您的示例使用了 <header> 元素,因此我的评论仅限于该元素,但我确实想指出上述差异以确保我们都在谈论同一件事.辅助功能和 aria 标签都是关于语义的,所以最好清楚你的问题的语义。

<header> element is a container for stuff that's usually at the top of your page. By default, it creates a banner 地标。 <header> 通常包含一个 <nav>,它是站点的主要导航,在所有页面上重复出现。它还可能包含作为图像的公司徽标,并作为 link 返回主页。它还可能包含帐户信息,或者如果是零售站点,则包含购物车内容。所以 <header> 可能有互动和 non-interactive 东西。

在您的示例代码中,您的 header 中只有纯文本。这不是交互式的,因此如果屏幕 reader 用户使用 tab 键浏览站点,他们将听不到文本。如果他们在屏幕 reader.

上使用 up/down 箭头键导航 DOM,他们 听到文本

相反,如果您的代码确实是 标题 ,因此 <h1> 标记也是静态文本,因此又是不可交互的, 如果屏幕 reader 用户使用 tab 键浏览网站,他们将听不到文本。但是,如果他们使用屏幕 reader H 快速导航键(导航到 ,他们 可以 听到文本标题).

所以如果你想澄清你的问题,我可以更新我的答案。