面包屑中的 H1 标签可以访问吗？答案

【问题标题】：H1 tag inside breadcrumb okay for accessibility?面包屑中的 H1 标签可以访问吗？
【发布时间】：2018-02-23 21:05:59
【问题描述】：

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

所以在标题中你会看到：

应用名称 > 部分名称 > 当前页面

其中“当前页面”是页面的 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 标签？

【问题讨论】：

标签： html accessibility breadcrumbs semantic-markup wai-aria

【解决方案1】：

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

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

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

如果您不使用nav，则可以以符合规范的方式实现您想要实现的目标，例如：

<body>

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

</body>

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

【讨论】：

【解决方案2】：

我会避免在导航中放置<h1>，因为我认为某些屏幕阅读器可能会将其解释为导航的标题，而不是整个页面。我还建议您将面包屑构造为有序列表（或至少是无序列表），将W3C describes a breadcrumb trail 构造为“以分层顺序指向当前页面的父页面的链接列表”和有序列表会在语义上向屏幕阅读器展示这种层次结构。 W3C 也有一个tutorial 似乎证实了这一观点。

用户代理尚不支持 HTML 5 文档大纲：（请参阅There is No Document Outline），因此您最好将 H1 放在标题中，并在主要内容中使用 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>

【讨论】：

为什么你回答的 HTML5 草案的最后一个链接已经过时了将近七年？
感谢您的关注。我现在更新了链接，但我认为 2011 年草案中的原则仍然适用。作为替代方案，您有什么建议？
2011 年草案的原则并不真正适用。我强烈建议您阅读"There Is No Document Outline Algorithm"，它解释了为什么 H1 对每个部分标题的承诺从未兑现。
感谢阿洛西。我已经相应地更新了我的答案。