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

Question

我正在尝试使用我能管理的语义最正确的HTML来编写网站，而我的客户端需要一个导航栏，其中每个链接在可点击区域内都有标题和说明/副标题。实现这一目标的最佳方法是什么？

以下是我的代码现在的样子：

<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>标记，但我更喜欢屏幕阅读器能够告诉标题更重要。

我倾向于使用描述列表，但我找不到以这种方式使用的示例。

Answer 1

我最终使用了样式化的<p>标签，但标题和副标题之间有一个隐藏的冒号，仍然将它们之间的层次结构传达给屏幕阅读器。标题是从一开始就错误的方式，因为导航链接不是页面内容的一部分。