作为一种好的做法，我总是引入一个具有可视隐藏标题的<header>(或<nav>或<footer>((https://css-tricks.com/inclusively-hidden/)，例如：
<header>
<h1 class="inclusively-hidden">Header area</h1>
...
</header>
<main>
<h1>Some interesting content</h1>
...
</main>
<footer>
<h1 class="inclusively-hidden">Footer area</h1>
...
</footer>
我这样做是为了让屏幕阅读器用户更容易识别那些内容，这些内容来自于像<header>或<footer>这样的元素还不存在的时代：
<div id="header">
<h1 class="inclusively-hidden">Header area</h1>
...
</div>
<div id="main">
<h1>Some interesting content</h1>
...
</div>
<div id="footer">
<h1 class="inclusively-hidden">Footer area</h1>
...
</div>
如今，尽管我们确实有它们，但我的问题来了：根据WCAG 2.1 AA，如果我删除视觉隐藏的标题，我的代码仍然有效吗？然而，在内容中，标题仍然是有意义和必要的。
<header>
...
</header>
<main>
<h1>Some interesting content</h1>
...
</main>
<footer>
...
</footer>
我的论点是：由于我只使用了一个<header>和<footer>元素，屏幕阅读器可以清楚地识别它们。例如，我不会把另一个<header>放在<main>或类似的地方，因为这会破坏元素的清晰度/唯一性：
<header>
...
</header>
<main>
<header><!-- Wouldn't add this here! -->
<h1>Some interesting content</h1>
</header>
...
</main>
<footer>
...
</footer>
我知道，对于屏幕阅读器用户来说，额外的标签将极大地提高可用性，无论是通过使用视觉隐藏的标题，还是使用aria-label，或者其他什么。我喜欢整个页面上完整的标题大纲的原因是，我能够看到标题大纲中反映的文档的所有区域，因此我能够快速扫描它(即使用NVDA中的Insert + F7来显示标题大纲的树状视图(，并在区域之间导航(使用H、Shift + H、1、Shift + 1等(
但从严格的技术角度来看，我认为在这种情况下，视觉标题已经不再必要了。你同意吗？
是的，您可以删除<h1>标题。
分段元素，如<header>或<footer>，不需要使用标题元素(例如<h1>(，并且包括标题元素并不是我观察到的标准做法。
您可以在截面图元上使用aria-label或aria-labelled-by来设置可访问的名称，但通常没有必要，除非您有多个相同类型的截面图元(例如多个<footer>图元(。
就多重<h1>论点而言，我不认为WCAG中有任何东西禁止这种做法，只要标题以说明内容结构的逻辑层次结构的方式正确嵌套即可。
根据WCAG，您可以删除标题。
然而，根据WebAim屏幕阅读器调查，按航向导航仍然被广泛使用，而按地标导航则没有那么多使用。因此，无论您是否使用页眉或页脚区域，我仍然会保持当前的标题，以便屏幕阅读器用户可以使用这两种方法高效导航。