根据 WCAG，徽标作为站点第一个标题

Question

我公司的主页没有 H1，考虑到内容顺序，最好的解决方案是将徽标封装在标题中，虽然不理想，但 should be acceptable。这是我目前的代码：

<h1>
    <a href="https://whosebug.com">
        <img src="https://whosebug.com/logo.jpg" alt="Company homepage">
    </a>
</h1>

但是我对这种方法有一些疑问：

它是否对 SEO 友好，因为标题来自徽标的替代文字？
放一个 aria-label="Company" 和 title="Company" 在 link 中所以标题来自那里？
或者这种方法根本不可接受，我应该使用 H1?

在此先感谢任何人的帮助！

其他参考资料：

Answer 1

由于标题来自徽标的替代文本，是否对 SEO 友好？

应该没问题。然而，正如您将看到的，有一种更好的方法来构建它，这对于 SEO 来说会更好。

在link里面放一个aria-label="Company"和title="Company"会不会更好，这样标题就从那里来了？

不，它会更兼容你现在的方式。不要使用 title 它对可访问性毫无用处，现在更多的设备是基于触摸而不是基于指针的，所以它在那里也没有多大用处。

或者这种方法根本不可接受，我应该使用其他东西作为 H1？

方法是可以接受的（将 hyperlink 添加到 <h1>）但是您当前的实现是不可接受的。

<h1> 应该描述您当前所在的页面，以便最终用户知道他们在正确的位置。

您的 alt 属性描述了徽标，这对主页是正确的 link 但对描述页面没有用。（如果屏幕 reader 用户使用快捷方式阅读页面 <h1>，他们会听到“Link，公司主页”。这会造成混淆。）

另一个问题是公司徽标几乎总是用作“主页”的快捷方式，因此您要么最终打破其他页面上的约定（因为您不能拥有 hyperlink 说“关于我们”会跳转到主页）或打破惯例让徽标指向当前页面。

这两个都不是好主意。

那么我有什么选择？

显然，正如您所说，页面上的视觉标题是最好的。这不仅适用于辅助技术的用户，而且对每个人都有用，可以帮助他们在网站上定位。 如果你能完成这项工作，建议就是这样做。这比下一个选项有效 10 倍。

但是假设您无法在页面上显示可见的 <h1>，下一个最好的办法是使用 visually hidden text.

隐藏的 <h1>

这意味着屏幕 reader 用户仍然可以访问 <h1> 而无需更改视觉设计。这也意味着您可以将徽标 link 保留在主页上，这符合惯例和预期行为。

此外，由于前面提到的问题，这应该是单独的，并且在文档中的逻辑位置，例如 <main> 元素的开头。

例子

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<header>
    <a href="https://whosebug.com">
        <img src="https://placehold.it/400x100" alt="Company homepage">
    </a>
    <nav>
        <!----navigation-->
    </nav>
</header>
<main>
<h1 class="visually-hidden">
    Current Page Name
</h1>
<p>Content that makes sense etc.</p>
<!--everything else-->

根据 WCAG，徽标作为站点第一个标题

Logo as site first heading according to WCAG

accessibility

wcag

graphical-logo

html-heading

那么我有什么选择？

例子