我正在尝试使用我能管理的最语义正确的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>
标记,但是我希望屏幕阅读器能够告诉我标题更重要。我倾向于使用描述列表,但我找不到这样使用它们的示例。
最佳答案
我最终使用了样式化的<p>
标记,但是在标题和副标题之间有一个隐藏的冒号,以便将它们之间的层次结构传达给屏幕阅读器。标题从一开始就是错误的,因为导航链接不是页面内容的一部分。