accessibility - 根据 WCAG 将 Logo 作为网站第一标题

Question

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

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

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

1. 由于标题来自于，因此对 SEO 是否友好？ Logo 的替代文本？
2. 最好添加 aria-label="Company" 和 title="Company" 在链接内，因此标题来自那里？
3. 或者这种方法根本 Not Acceptable ，我应该使用 H1 之类的其他内容吗？

预先感谢任何人的帮助!

其他引用:

• https://www.w3.org/WAI/tutorials/images/functional/
• https://www.w3.org/WAI/GL/WCAG3/2020/how-tos/text-alternatives/
• https://www.w3.org/WAI/tutorials/images/decision-tree/

Answer 1

由于标题来自 Logo 的替代文本，因此对 SEO 友好吗？

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

放一个 aria-label="Company" 会更好吗？和title="Company"在链接内，因此标题来自那里？

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

或者这种方法根本 Not Acceptable ，我应该使用其他东西作为 H1？

该方法是可以接受的(将超链接添加到 <h1> )，但您当前的实现是 Not Acceptable 。

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

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

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

这些都不是好主意。

那么我的选择是什么？

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

但是假设您无法创建可见的 <h1>在页面上工作，下一个最好的事情是 <h1>使用 visually hidden text. 隐藏

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

此外，由于前面提到的问题，这应该是单独的，并位于文档中的逻辑位置，例如 <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://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-->