屏幕阅读器无法读取标题标签中的文本

Question

我有一个包含页面标题的标题标签。 Windows屏幕阅读器没有读取该文本，我想知道是否可以通过添加一些aria项目来做到这一点？

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

Answer 1

只需确保我们在谈论同一件事，就有标题和标题。标题是<h1>至<h6>元素。标头通常在描述表时使用，是列顶部的名称，即列 header 或<th>标签。

您已经提到标题包含“页面标题”。页面标题通常包含在标题中，如果它是页面的主要标题，则应包含<h1>。因此，我不清楚您真正问的是哪个术语。

我知道您的示例使用了<header>元素，因此我将注释仅限于该元素，但是我确实想指出上述差异，以确保我们都在谈论同一件事。可访问性和aria标签都是关于语义的，因此最好弄清楚问题的语义。

<header>元素是通常位于页面顶部的内容容器。默认情况下，它将创建一个banner界标。 <header>通常包含一个<nav>，这是在所有页面上重复的站点的主要导航。它还可能包含公司徽标作为图像，并用作返回首页的链接。它还可能具有帐户信息，或者如果具有零售站点，则还具有购物车内容。因此<header>可能具有交互性和非交互性的事物。

在示例代码中，标题中只有纯文本。这不是交互式的，因此如果屏幕阅读器用户使用 tab 键导航站点，则他们将不会听到文本。如果他们使用屏幕阅读器使用向上/向下箭头键浏览DOM，他们将将听到文本。

如果相反，您确实希望代码成为标题，因此是<h1>标记，它也是静态文本，不会交互，因此屏幕阅读器用户如果他们使用 tab 键浏览网站，则不会听到该文本。但是，如果他们使用屏幕阅读器 H 快速导航键（导航到标题），他们可以听到文本。

因此，如果您想澄清您的问题，我可以更新我的答案。