出于可访问性原因,在文档大纲中隐藏标题

Question

当视觉设计不需要明确的标题时,我有一个关于确保良好文档结构的问题.

对主页采用以下示例HTML.

<header>
  <h1>Our Brand</h1>
  <p>Tagline</p>
</header>

<section class="company">
  <h2>Our Company</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error hic, aliquid assumenda sed optio, praesentium repellendus numquam laudantium esse molestias minima cum mollitia fugiat? Eum impedit deserunt aliquid ratione.</p>
</section>

<section class="values">
  <h2>Our Values</h2>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Officia reiciendis illum temporibus. Praesentium repellat, iste officiis?</li>
    <li>Quos facere enim officiis, recusandae inventore veritatis id.</li>
    <li>Iste deleniti doloremque dignissimos, voluptate obcaecati velit optio.</li>
    <li>Ut non enim, dolore saepe minus soluta illum?</li>
    <li>Enim iure odit soluta laboriosam quis cupiditate eveniet.</li>
  </ul>
</section>

<section class="team">
  <h2>Our Team</h2>
  <h3>Marketing</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
  <h3>Social</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
  <h3>PR</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
</section>

在这个标记中,有一个清晰的标题结构(即h1> h2> h3).

但是,让我们说已经同意"我们的团队" <h2>标题不需要显示,因为视觉设计暗示了它.但是,对于良好的文档结构(出于可访问性原因)这一点非常重要.

我们要不要...

1. <h2>使用".visuallyhidden"类向屏幕阅读器和搜索引擎显示"我们的团队" 标题？(即隐藏屏幕内容的一个)

2. <h3>将"团队"部分中的所有内容更改为<h2>s？从内容的角度来看,这感觉不对,因为他们觉得它们应该包含在他们自己的标题下.

3. 跳过"我们的团队" <h2>标题直接进入<h3>.跳过标题级别似乎也不正确.

边注,

我注意到gov.uk(通常被誉为一个很好的可访问性网站)这样做.他们正在隐藏一个<h1>"所有类别"标题.此外,他们正在隐藏<h2>"支持链接"的页脚

https://www.gov.uk/browse/benefits

隐藏标题似乎是明智的,但我看到很多人发布谷歌将如何将其视为黑帽SEO策略.

我认为它需要的不仅仅是几个隐藏的标题来引发谷歌的任何惩罚,但也许在<h1>s 上做这将是一个问题.

任何关于这个问题的想法将不胜感激!

Answer 1

我不担心这里的 SEO 处罚。多年来解决您想要解决的问题表明，效果要么没有，要么可以忽略不计。

在您的示例中，<h2>没有内容，它直接导致<h3>. 在这种情况下，我总是喜欢添加一些内容，这样就不会出现硬视觉/音频跳跃。事实上，如果我通过屏幕阅读器中的标题进行导航，那么我在该标题下找不到任何内容<h2>，因此可能已经感觉有点奇怪了。

无论如何，如果您认为您确实不需要“Teams”文本（无论是视觉上还是其他方式），那么您可以将其完全删除并将其他文本提升为<h2>.

所以从你的三个选择来看：

1. <h2>使用类向屏幕阅读器和搜索引擎显示“我们的团队”标题.visuallyhidden？（即隐藏屏幕外内容的一种）

嗯。在我看来，要么有内容支持它，要么没有。在您的示例中，没有内容支持它。如果您确实决定在视觉上隐藏文本，请不要在屏幕外进行，因为这可能会影响 RTL 翻译，而是查看剪辑的文本（有很多示例，只是最近进行了一些调整）。

2. 将“团队”部分中的所有<h3>s 更改为<h2>s？从内容的角度来看，这感觉不对，因为他们觉得应该包含在自己的标题下。

做这个吧。我原则上倾向于同意 Teams 有其自己的标题。<h2>但在我看来，要做到这一点，您需要 Teams 下的内容。如果那里没有任何内容并且您删除了 Teams <h2>，那么这是您的下一个最佳选择。

3. 跳过“我们的团队”<h2>标题并直接转到<h3>。跳过标题级别似乎也不正确。

没有。对于大多数审核员来说，这是 WCAG 的失败（我会失败）。