Semantic navigation links with titles and subtitles

Question

I'm trying to write a site using the most semantically correct HTML I can manage, and my client wants a navigation bar where each link has a title and a description/subtitle inside the clickable area. What's the best way to achieve this?

Here's what my code looks like right now:

<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>

And for reference, here's what it looks like styled:

The accessibility guidelines I'm following specify that heading tags should be used in descending order (as in, <h3> may only appear after an <h2> tag, etc). The answers to this question seem to indicate that it's not a good idea to use headings in the navigation regardless.

I could use <p> tags for both the title and description, but I'd prefer for screen-readers to be able to tell that the title is more important.

I'm inclined to use a description list, but I can't find examples where they're used this way.

Answer 1

I ended up using styled <p> tags, but with a hidden colon between the title and the subtitle to still convey the hierarchy between them to screen-readers. Headings were the wrong way to go from the start, since the nav links aren't part of the page's content.