对于可访问性，网站是否可以在站点徽标上使用 H1，在文本标题上使用 H1？

问题描述

通常情况下，您只需要每页一个 H1 供屏幕阅读器使用。但是我看到了一种趋势，即标题中的站点徽标周围有一个 H1，页面上的单独主标题也有一个 H1。这是可以接受的还是有更好的方法来处理这个问题？

解决方法

WCAG 合规性

从 WCAG 和合规性的角度来看，这是可以接受的，你可以在一个页面上有多个 h1，它仍然在 HTML5 规范中。

标题约定

但是，惯例和最佳做法建议页面上只有一个可见的 <h1>，并且 <h1> 应准确描述当前页面。

造成这种情况的主要原因是辅助技术，即屏幕阅读器。

使用屏幕阅读器的人可能会使用快捷方式按部分、链接或标题进行导航。显然，在这种情况下，标题是我们关注的重点。

他们使用 1-6 键来循环浏览标题。当登陆页面时，他们可能做的第一件事是按“1”进入页面的主标题。

如果按“1”而不是读出站点徽标，则可能会造成混淆，他们可能会认为站点结构有误，而是使用“2”键开始循环 <h2>。这可能需要他们一段时间才能意识到页面结构并不典型。

屏幕阅读器用户可能只需要一分钟左右的时间就会意识到您网站的奇怪结构，因此它不会使其无法访问，但就用户体验而言，它并不是很好。

公司徽标公约作为 <header> 的一部分

徽标的惯例是将其包装在超链接中并将其指向主页。预期行为是可访问性的关键。

最简单的形式是：

<header>
    <!-- logo wrapped in anchor pointing to home page -->
    <a href="homepage">
        <!-- notice the alt text is the purpose of the link so the link has descriptive link text. -->
        <img src="yourlogo.jpg" alt="{company name} homepage" />
    </a>
    <nav>
        <!-- ul with all nav items -->
    </nav>
</header>

因此，无论是谁发起了这种趋势，都需要阻止它，从 SEO 的角度来看，这甚至没有意义，所以我不确定如果这确实是一种趋势，为什么有人开始这样做！