时间戳

首页 > 解决方案 > 屏幕阅读器不读取标题标签中的文本

wai-aria - 屏幕阅读器不读取标题标签中的文本

问题描述

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

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

标签： wai-aria

解决方案

只是为了确保我们谈论的是同一件事，有标题和标题。标题是<h1>通过<h6>元素。标题通常在描述表格时使用，是列顶部的名称、列标题或<th>标签。

您提到您的标题包含“页面标题”。页面的标题通常包含在标题中，特别是<h1>如果它是页面的主标题。所以我不清楚你真正问的是哪个术语。

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

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

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

相反，如果您真的打算让您的代码成为一个标题，因此<h1>标签也是非交互式的静态文本，那么屏幕阅读器用户在使用该tab键导航网站时将听不到文本. 但是，如果他们使用屏幕阅读器快速导航键（导航到标题） ，他们可以听到文本。H

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

推荐阅读