带有标题和副标题的语义导航链接

Question

我正在尝试使用我能管理的语义最正确的 HTML 编写网站，我的客户想要一个导航栏，其中每个 link 都有一个标题和一个 description/subtitle 在可点击区域内。实现此目标的最佳方法是什么？

这是我的代码现在的样子：

<nav role="navigation">
    <a href="dashboard.html">
        <!-- There's an icon here but don't worry about that -->
        <h4>My Dashboard</h4>
        <p>Get an overview of your cases.</p>
    </a>
    <a href="new.html">
        <h4>Submit Case</h4>
        <p>Get help from the Service Center.</p>
    </a>
</nav>

作为参考，以下是它的样式：

我遵循的可访问性指南指定标题标签应按降序使用（例如，<h3> 可能仅出现在 <h2> 标签之后，等等）。 this question 的答案似乎表明无论如何在导航中使用标题都不是一个好主意。

我可以为标题和描述使用 <p> 标签，但我更希望 screen-readers 能够表明标题更重要。

我倾向于使用描述列表，但我找不到这样使用它们的示例。

Answer 1

我最终使用了带样式的 <p> 标签，但在标题和副标题之间隐藏了一个冒号，以将它们之间的层次结构传达给 screen-readers。标题从一开始就是错误的方式，因为导航链接不是页面内容的一部分。

带有标题和副标题的语义导航链接

Semantic navigation links with titles and subtitles

html

semantic-markup