面包屑中的 H1 标签是否可以访问？

Question

在我的网络应用程序中，我有一个 header 栏，它既是应用程序的面包屑导航，也是当前页面的标题。

所以在 header 你会看到：

App Name > Section Name > Current Page

其中 "current page" 是页面的 H1 标签。

从可访问性（ARIA 规则）的角度来看，这是否有意义？

我的代码如下所示：

<header class="route__header">
  <nav aria-label="Breadcrumb" class="crumbs">
    <a href="" class="crumbs__link">App Name</a>
    <a href="" class="crumbs__link">Section Name</a>
    <h1 aria-current="page" class="crumbs__link crumbs__link--active">Current Page Name</h1>
  </nav>
</header>

这样做的原因是我每页有一个 H1 标签，然后内容可以有 H2 和更低的标签。

或者我应该将当前页面保留为 span 标签，并在内容中允许多个 H1 标签吗？

Answer 1

我会避免在导航中放置 <h1>，因为我认为某些屏幕阅读器可能会将其解释为导航标题而不是整个页面。我还建议您将面包屑构建为有序列表（或至少是无序列表），因为 W3C describes a breadcrumb trail as "a list of links to the parent pages of the current page in hierarchical order" and an ordered list would semantically demonstrate this hierarchy to screenreaders. The W3C also has a tutorial 似乎证实了这一观点。

用户代理尚不支持 HTML 5 文档大纲：（参见 There is No Document Outline），因此您最好将 H1 放在 header 中并使用 H2 标题和降低你的主要内容。这是一个例子：

<header class="route__header">
<h1>Current page name</h1>
  <nav aria-label="Breadcrumb" class="crumbs">
    <ol>
    <li><a href="" class="crumbs__link">App Name</a></li>
    <li><a href="" class="crumbs__link">Section Name</a></li>
    <li class="crumbs__link crumbs__link--active">Current Page Name</li></ol>
  </nav>
</header>

<article>
<h2>Article heading</h2>
<h3>Article sub-heading</h3>
</article>

Answer 2

节内的标题属于该节。 nav 元素创建了这样一个部分。这意味着 "Current Page Name" 是导航的标题，而不是页面的标题。但这当然是错误的（导航的标题，如果有的话，可能类似于 "Navigation"）。

无法判断这是否会造成实际的可访问性问题（用户可能会使用利用大纲的工具，甚至可能是自定义工具）。但即使目前不影响可访问性，您也不应该违反规范（除非您有充分的理由这样做）。

（顺便说一句，为了便于访问，您应该为面包屑项提供文本分隔符，或者使用像 ol 这样的标记。）

如果您不使用 nav，则可以通过 spec-conforming 的方式实现您想要实现的目标，例如：

<body>

  <header>
    <a href="">App Name</a> → <a href="">Section Name</a> →
    <h1>Current Page Name</h1>
  </header>

</body>

但传统的方法是不将页面标题集成到面包屑中：通过复制当前页面的标签（将其放在标题和面包屑中） )，或省略当前页面的面包屑项。

面包屑中的 H1 标签是否可以访问？

H1 tag inside breadcrumb okay for accessibility?

html

accessibility

breadcrumbs

semantic-markup

wai-aria