我正在尝试使用我能管理的最语义正确的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>

作为参考,下面是它的样式:
html - 带有标题和字幕的语义导航链接-LMLPHP
我遵循的可访问性准则指定标题标记应按降序使用(如,<h3>可能只出现在<h2>标记之后,等等)。对this question的回答似乎表明,无论如何在导航中使用标题都不是一个好主意。
我可以在标题和描述中使用<p>标记,但是我希望屏幕阅读器能够告诉我标题更重要。
我倾向于使用描述列表,但我找不到这样使用它们的示例。

最佳答案

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

10-07 19:06
查看更多