使用 HTML 地标角色来提高可访问性

HTML |

HTML 地标角色可提高可访问性，了解地标角色及其使用方法，2023 年 5 月 15 日

确保您的网站对所有用户（包括使用屏幕阅读器等辅助技术的用户）都无障碍访问至关重要。一种方法是使用ARIA 地标角色，帮助屏幕阅读器用户轻松浏览您的网站。使用地标角色还有其他好处，例如改善 HTML 的语义，并更轻松地设置网站的样式。在这篇博文中，我们将通过一个简单的示例，深入探讨这些地标以及如何在您的网站上使用它们。

HTML 地标角色是什么？

无障碍富互联网应用 (ARIA) 规范将地标定义为用户可能希望快速访问的页面区域。虽然没有明确说明这是专门为屏幕阅读器用户设计的，但对于这类用户来说，地标尤其有用。ARIA 规范定义了八个地标角色：

  • banner
  • navigation
  • search
  • main
  • region
  • complementary
  • form
  • contentinfo

为元素分配特定角色的一种方法是使用role元素上的属性。例如：

<div class="banner" role="banner"></div>

虽然在某些情况下你需要明确设置元素的角色，但有些 HTML 元素本身已经具有与其关联的角色。在本文的其余部分，我们将遵循ARIA 的第一条规则，如下所示：

如果您可以使用已经内置了所需语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性来使其可访问，那么请这样做。

如何使用地标角色

为了说明 HTML 标记的工作原理，我们将构建一个基本的网页，以提升屏幕阅读器用户的体验和页面的可访问性。我们不会编写任何 CSS，而是专注于编写简洁、语义清晰的 HTML。

将以下 HTML 保存到名为的文件中index.html，然后在您喜欢的浏览器中打开它。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mr. Pineapple's Pizzeria</title>
  </head>
  <body></body>
</html>

您应该会在浏览器标签页中看到一个空白页面，标题为“Mr. Pineapple's Pizzeria”。对于每个地标，我们将添加相应的 HTML 代码，并检查无障碍树以查看其变化情况。

旗帜地标

横幅地标用于标识网页的标题，通常包含网站的徽标、导航和搜索输入。当该<header>元素未用作元素或其他分区元素的子元素时<main>，它将被分配此banner角色。

让我们通过在页面上添加横幅地标来看一下它的外观。

<body>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</body>

刷新页面并打开开发者工具。访问辅助功能树的方式会因浏览器而异。您可以点击以下链接了解更多信息：

  • 火狐
  • 铬（边缘、镀铬、弧形）
  • 在 Safari 中，打开开发者工具（称为 Web 检查器）。在 “元素” 选项卡中选择一个元素。在最右侧，选择 “节点” 选项卡，然后展开 “辅助功能” 部分。

Safari 网页检查器面板，其中节点选项卡被选中。面板底部显示了扩展的辅助功能树检查器。

从截图中可以看到，<header>选中元素后，角色显示为banner。我们有一个良好的开端！

注意： Firefox 开发者工具的可访问性检查器不会显示元素的相应角色。相反，它会将所有这些元素的角色显示为“地标”。此问题已得到解决，并将在 Firefox 114 中发布。如果您使用的是Firefox 开发者版本，则此问题已得到解决。

导航地标

地navigation标用于标识一组帮助用户浏览网页或相关网页的链接。这可以包括侧边栏导航、网站主导航或页面页脚中的一组相关链接。

如前所述，页面标题中的常见元素之一是网站的主导航。让我们在页面上添加一个：

<nav aria-label="Primary">
  <ul>
    <li><a aria-current="page" href="/">Home</a></li>
    <li><a href="/menu">Our pizzas</a></li>
    <li><a href="/contact">Get in touch</a></li>
  </ul>
</nav>

这里我们使用<nav>element元素，因为它隐式地具有navigation角色。由于一个页面可能包含多个导航元素，因此唯一地标识每个地标非常重要。为此，我们使用aria-label属性，并将导航地标命名为“Primary”。

注意： 当屏幕阅读器描述上述导航地标时，它会显示“主要导航”。这就是为什么“导航”一词未包含在aria-label值中的原因。

如果您检查该<nav>元素，您会注意到两件事：该元素被标识为导航地标并显示我们使用分配的值aria-label。

在元素检查器中高亮显示导航元素。它显示可访问性检查器将该元素标识为名为“Primary”的导航地标。

搜索地标

该search角色用于将一组相关元素组合在一起，从而提供一种网站搜索方式。使用此角色的最常见方式是通过表单。

<form name="site-search" action="/search" method="get" role="search">
  <label for="query">Find your perfect pizza</label>
  <input type="search" id="query" name="query" />
</form>

这里我们遇到了第一个需要显式地为元素分配角色的情况。由于没有原生 HTML 元素具有隐式的搜索角色，因此<form>在本例中我们将该角色分配给元素。随着新 HTML 元素的引入，这种情况将会改变，我们将在本文后面讨论这个新 HTML 元素。

如果您使用开发人员工具检查表单元素，您将看到它正确地将该地标标识为搜索地标：

元素检查器中高亮显示了搜索表单。下方显示了可访问性检查器将该元素标识为搜索导航地标。

主要地标

现在，我们终于从页眉部分跳转到页面主体内容了。接下来，我们会看到一个新地标，名字很贴切main。需要注意的是，一个页面只能包含一个<main>元素。

在元素检查器中高亮显示主要元素。下方显示可访问性检查器，该检查器将该元素标识为主要导航地标。

<main>现在，在开发人员工具中选择元素将正确识别我们的主要内容。

该地区的地标

我们的主要内容可以由不同类型的内容或区域组成，而且恰巧，有一个角色可以对应这些内容或区域。这个region角色很有意思；从技术上讲，有_一个_HTML 元素的隐式角色是region，但这个元素本身就存在一些争议。

我指的元素是<section>元素，或者有些人称之为元素<div>的另一个名称。引起争议的原因是，当像下面的例子那样使用时，它没有任何语义含义：

<section>
  <h2>Our pizzas</h2>
  <ul>
    <li>Margherita with pineapple</li>
    <li>Veggie with pineapple</li>
    <li>Meaty with pineapple</li>
  </ul>
</section>

使用开发人员工具检查它还会发现它未被识别为区域导航地标：

在元素检查器中高亮显示该部分元素。在可访问性检查器中，该部分未被标识为区域导航角色。

那么，如何将其转换为区域呢？我们可以通过使用aria-labelledby属性将标题元素与部分关联来实现。这有两个目的：将部分转换为区域导航地标，并且标题为该区域提供唯一的名称。

在极少数情况下，如果元素没有标题关联<section>，也可以使用aria-label属性来实现相同的效果。让我们更新一下之前的代码来实现这一点：

<section aria-labelledby="our-pizzas-heading">
  <h2 id="our-pizzas-heading">Our pizzas</h2>
  <p>
    All our pizzas come with the best pizza topping in the world. Pineapple!
  </p>
  <ul>
    <li>Margherita with pineapple</li>
    <li>Veggie with pineapple</li>
    <li>Meaty with pineapple</li>
  </ul>
</section>

当您现在检查该<section>元素时，它将被正确识别为区域地标并显示从标题元素继承的名称：

在元素检查器中高亮显示该部分元素。在可访问性检查器中，该部分被正确识别为区域导航角色。

在此阶段，务必重申使用地标的原因。地标旨在识别用户最有可能感兴趣并希望导航到的页面关键区域。因此，在决定将页面的哪些区域突出显示为地标时，请务必谨慎。

互补地标

地complementary标旨在识别那些与主要内容互补，但又与主要内容分离后仍然有意义的内容。这可以包括相关文章、演出时间或天气信息等。在我们的页面上，我们将链接到一些很棒的披萨食谱。

这一次，我们确实有一个原生 HTML 元素可以用于我们的补充地标：

<aside aria-labelledby="pizza-recipe-heading">
  <h3 id="pizza-recipe-heading">Make your own pie!</h3>
  <p>Below is a list of our favorite pizza recipes.</p>
  <ul>
    <li><a href="/mushroom-pizza">The shroom</a></li>
    <li><a href="/smokey-joe">Smokey Joe</a></li>
    <li><a href="/fromage">Fromage</a></li>
  </ul>
</aside>

该<aside>元素隐含着互补的作用，因此非常适合我们的需求。由于一个页面上可以有多个互补区域，因此务必为每个区域指定一个唯一且描述性的名称。我们可以通过将标题元素与该属性关联，或在元素上aria-labelledby使用 来实现这一点。aria-label``<aside>

检查开发人员工具中的元素将显示它被标识为补充导航地标角色并从关联的标题元素继承其名称。

在元素检查器中高亮显示 aside 元素。在可访问性检查器中，该部分被正确识别为补充导航角色。

形式地标

乍一看，这一点似乎显而易见，如果不是因为与之前讨论的元素类似的重要细微差别，它本来就显而易见<section>。让我们在页面上添加一个新闻通讯订阅表单。

<div class="newsletter">
  <h3>Subscribe to Mr. Pineapple's newsletter</h3>
  <p>
    In our newsletter, you can expect even more wonderful pizza recipes, all
    featuring the versatile pineapple.
  </p>
  <form name="newsletter" action="/subscribe" type="post">
    <label for="email">Please provide your email address</label>
    <input type="email" id="email" name="email" />

    <button type="submit">Pineapple Me 🍍</button>
  </form>
</div>

如果您检查该<form>元素，您可能会失望地发现它没有被标识为表单标志，而是一个通用部分：

在元素检查器中高亮显示表单元素。在无障碍功能检查器中，该表单未被标识为表单导航角色。

发生了什么？和之前的元素一样<section>，您需要将标题元素与表单关联，或者使用aria-label属性。我们已经有一个描述性标题，因此我们只需要将标题与表单关联即可。

<div class="newsletter">
  <h3 id="newsletter-subscribe-form-heading">
    Subscribe to Mr. Pineapple's newsletter
  </h3>
  <p>
    In our newsletter, you can expect even more wonderful pizza recipes, all
    featuring the versatile pineapple.
  </p>
  <form
    aria-labelledby="newsletter-subscribe-form-heading"
    name="newsletter"
    action="/subscribe"
    type="post">
    <label for="email">Please provide your email address</label>
    <input type="email" id="email" name="email" />

    <button type="submit">Pineapple Me 🍍</button>
  </form>
</div>

完成这些更改后，检查表单元素将产生预期的结果：

在元素检查器中高亮显示表单元素。在无障碍检查器中，该表单被正确识别为表单导航角色。

contentinfo 里程碑

地contentinfo标用于标识网页信息，例如版权信息或隐私声明链接。最常见的用例是页面页脚。这时*，*我们又有了原生 HTML 元素的帮助。

<footer>
  <p>Copyright &copy; Mr. Pineapple's Pizzeria - 2023</p>
</footer>

与 元素一样<header>，重要的是<footer>元素不能位于<main>元素或其他分段元素的内部。如果这样，它将不具有 的隐式角色contentinfo。由于我们的<footer>元素是 元素的直接后代<body>，因此在开发者工具中检查它将获得预期的结果。

在元素检查器中高亮显示页脚元素。在可访问性检查器中，页脚被正确识别为 contentinfo 导航角色。

新的搜索 HTML 元素

region我们已经涵盖了所有地标角色，并且每个地标都有一个可用的原生 HTML 元素。当然，我们需要为和地标做一些额外的工作form，但我们从未显式地使用过该role属性。

但是等等，地标怎么办search？我们得用role表单上的属性。见鬼，你居然说中了！不过我之前说过，后面会给你一个惊喜。随着新元素的引入，需要明确指定表单角色的日子即将search结束<search>。那么，我们该如何使用它呢？让我们更新之前的搜索地标，使用新元素：

<search>
  <form name="site-search" action="/search" method="get" role="search">
    <label for="query">Find your perfect pizza</label>
    <input type="search" id="query" name="query" />
  </form>
</search>

但这是处于最前沿的生命，因此如果您<search>今天（2023 年初）检查该元素，您会发现它在可访问性树中显示为被忽略。

在元素检查器中高亮显示搜索元素。在无障碍检查器中，搜索元素显示为被忽略。

这就是我将这个role属性保留在嵌套<form>元素上的原因。一旦浏览器和屏幕阅读器开始支持该元素，表单上<search>就不再需要这个属性了。曾经有一段时间，该元素也存在同样的问题，主要是因为 Internet Explorer 不支持，因此需要显式地添加到元素中。role``<main>``role="main"

现在我们可以退一步来看看我们共同构建的辉煌的可访问性树：

显示完整的可访问性树，其中包括我们创建的所有地标导航角色。

这是一件美丽的事情，不是吗？

在 Chrome 中启用完整的辅助功能树

请注意，显示此树状图是 Chromium 浏览器中的一项实验性功能。在开发者工具中选择“辅助功能”选项卡后，您应该会看到一个条目，内容为“启用全页辅助功能树”，左侧有一个未选中的复选框。

显示开发人员工具中的辅助功能选项卡，其中可见全页辅助功能树选项。

勾选此复选框后，系统会显示一条通知，提示您重新加载 DevTools。点击按钮并重新加载 DevTools 后，您会在“元素”面板的右上角看到一个新图标。点击此图标将显示完整的辅助功能树。

显示开发人员工具中的元素选项卡，右上角有新的辅助功能树图标。

使用屏幕阅读器演示地标

综合起来，让我们看看我们的地标如何与屏幕阅读器配合使用。

概括

HTML 地标是让屏幕阅读器用户更轻松地访问网页的重要工具。通过在网页上定义地标，您可以帮助用户更轻松地导航并快速找到所需信息。请务必尽可能使用合适的 HTML 元素，并清晰地标记地标，以便用户了解它们的用途。