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）。

但是，我们已经同意我们的团队＆＃39; <h2>标题不需要显示，因为它是由视觉设计暗示的。但是，对于良好的文档结构（出于可访问性原因）这一点很重要。

我们......

展示我们的团队＆＃39; <h2>使用＆＃39; .visuallyhidden＆＃39;前往屏幕阅读器和搜索引擎。类？（即将内容隐藏在屏幕外的那个）
更改＆＃39;团队中的所有<h3>＆＃39;部分是<h2>？从内容的角度来看，这感觉不对，因为他们觉得它们应该包含在他们自己的标题下。
跳过我们的团队＆＃39; <h2>标题并直接转到<h3>。跳过标题级别似乎也不对。

旁注，

我注意到gov.uk（通常被誉为一个很好的辅助功能网站）这样做。他们隐藏了<h1>的所有类别＆＃39;标题。此外，他们在页脚中隐藏<h2>以支持链接＆＃39;

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

隐藏标题似乎是明智的，但我看到很多人都在谈论Google将如何将其视为黑帽SEO策略。

我认为除了几个隐藏的标题会引发谷歌的任何惩罚，但是可能在<h1>上做这件事会有问题。

对此问题的任何想法都将不胜感激！

Answer 1

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

在您的示例中，<h2>没有内容，它直接指向<h3>。在那种情况下，我总是想添加一些内容，因此它不是一个硬视觉/音频跳跃。实际上，如果我通过屏幕阅读器中的标题导航，那么我在<h2>下没有内容，所以它可能已经感觉有点奇怪了。

无论如何，如果你认为你真的不需要“团队”文本（视觉上或其他方面），那么你可以完全删除它并将其他文本提升到<h2>。

所以从你的三个选项中可以看出：

使用<h2>课程向屏幕阅读器和搜索引擎展示“我们的团队”.visuallyhidden标题？（即将内容隐藏在屏幕外的那个）

咩。在我看来，要么有内容支持它，要么没有。在您的示例中，没有内容可以支持它。如果你做决定在视觉上隐藏文字，不要在屏幕外做，因为它可以插入RTL翻译，而是看clipped text代替（有很多例子，那只是碰巧最近有一点调整。）

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

执行此操作。我倾向于原则上同意Teams保证自己的标题。但在我看来，要做到这一点，你需要团队<h2>下的内容。如果没有任何内容会移到那里并且您移除了小组<h2>，那么这是您的下一个最佳选择。

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

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

Answer 2

就纲要而言，

标题<h2>Our Team</h2>在您的上下文中执行两项有用的操作：

明确了“营销”，“社交”和“公关”所指的内容（否则不清楚这些部分是否包含团队成员列表）
它将三个部分分组在一个大纲条目下（否则它们会像“我们的价值观”等一样处于同一级别，这是没有意义的）

视觉隐藏标题可以完成这两项工作。我会这样做，但只有当它真的不可能显示标题时（通常总是更好），当然。

完成第二项工作（对条目进行分组）但不是第一项（提供有用标签）的替代方法是明确使用section元素（which is, by the way, recommended to do anyway）：

<section class="team">
  <h2>Our Team</h2>

  <section>
    <h3>Marketing</h3>
  </section>

  <section>
    <h3>Social</h3>
  </section>

  <section>
    <h3>PR</h3>
  </section>

</section>

现在你可以在不改变轮廓的情况下省略h2（当然除了标签），所以这三个部分仍然是分组的，表明它们属于一起。

（当然这只适用于实现大纲算法的用户代理。）

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

2 个答案: