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

编程问答 2022-05-18

问题描述

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

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

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

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

预先感谢任何人的帮助！

其他参考：

解决方法

因为标题来自徽标的替代文字，所以对 SEO 友好吗？

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

将 aria-label="Company" 和 title="Company" 放在链接中以便标题来自那里会更好吗？

不，它会以您现在的方式更兼容。不要使用 title，它对辅助功能毫无用处，现在更多的设备是基于触摸的而不是基于指针的，因此它在那里也没有多大用处。

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

方法是可以接受的（向 <h1> 添加超链接），但您当前的实现是不可接受的。

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

您的 alt 属性描述了徽标，这对于主页链接是正确的，但对描述页面没有用。 （如果屏幕阅读器用户使用快捷方式阅读页面 <h1>，他们会听到“链接，公司主页”。这会令人困惑。）

另外一个问题是，公司徽标几乎总是用作“主页”的快捷方式，因此您最终可能会破坏其他页面上的约定（因为您不能有一个说“关于我们”的超链接" 指向主页) 或打破惯例使徽标指向当前页面。

这些都不是个好主意。

那么我有哪些选择？

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

但是，假设您无法在页面上创建可见的 <h1> 工作，那么接下来最好的事情就是使用 visually hidden text.

隐藏的 <h1>

这意味着屏幕阅读器用户仍然可以访问 <h1> 而不会改变视觉设计。这也意味着您可以按照惯例和预期行为将徽标链接留在主页上。

同样因为前面提到的问题，这应该是单独的，并在文档中的逻辑位置，例如 <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); /*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://stackoverflow.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-->

accessibilityaccessibilitygraphical-logohtml-headingwcag