请考虑以下标记：
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">
<h2>Home</h2>
</a>
</li>
<li>
<a href="/other">
<h2>Other</h2>
</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Page Title</h1>
</main>
</body>
</html>这个标记很“好”，但是，如果我理解正确的话，它既不可访问，语义也不正确/不推荐。问题是h2出现在h1之前，这会产生一个令人困惑的文档大纲：
1. Untitled BODY
1. Home
2. Other
2. Page Title然而，显而易见的意图是：
1. Page Title
1. Home
2. Other实现这一点的最简单的方法是将整个nav“移动”到h1之后的某个地方，或者在main内部或者在它之后。但这不是我希望我的页面看起来的样子，我显然希望我的导航在我的主页内容之上。当然，我可以使用CSS以某种方式将nav在视觉上向上移动，但这似乎也不正确。
我的问题是：对于这种“两难”的情况，最常见但又容易实现的解决方案是什么？（或任何其他标题层次），因为那就是，据我所知，推荐的“语义”方式。这种方式，导航链接也会显示在文档大纲中。是否有某种方法可以告诉屏幕阅读器或浏览器某些标题应该“swap”的位置，也许是通过一些aria-属性？是否有我遗漏的替代方法？
我想到了一个解决方案，但我“感觉”不对：
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<h1>
Page Title
</h1>
<nav>
<h2>
Page Navigation
</h2>
<ul>
<li>
<a href="/">
<h3>Home</h3>
</a>
</li>
<li>
<a href="/other">
<h3>Other</h3>
</a>
</li>
</ul>
</nav>
</header>
<main>
<h2>Main Content Title</h2>
</main>
</body>
</html>这感觉有点冗长，但至少产生了正确的文档大纲。这真的是解决我的问题的唯一方法吗？
2条答案
按热度按时间kpbpu0081#
标记这类内容的正确方法（在语义和可访问性方面）如下-
导航项不应该被标记为标题。链接列表是所有必要的。请参见Mozilla文档中关于导航元素的示例。
如果要为辅助技术的导航添加隐藏标签，可以将
aria-label属性添加到<nav>元素，如W3C辅助功能指南工作组的示例中所述。此外，此方法避免了无序添加标题。最后，确保在
<main>元素 * 中包含文档标题（<h1>）*，如本例中的Mozilla文档中的main元素所示。2ledvvac2#
https://www.accessibility-developer-guide.com/examples/headings/visually-hidden-headings/正在回答我在这里遇到的大部分问题。
事实证明，只要将您不想显示的标题移到屏幕之外，就可以让屏幕阅读器阅读这些标题。这样，也可以获得正确的文档大纲，而不会在视觉上显得冗长。
从现在开始，我可能会使用以下解决方案：
visually-hidden类将描述为：