Search code examples
htmlsemantic-markup

aria label for list title, semantically correct?


I have a list of menu items links with a title describing the menu. This menu is floated left so to reduce mark up I have made the title part of the ul so it be be floated easily.

E.g

<ul>
    <li class="heading">My Title</li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

Should I be doing anything special to separate the title? Add a wai-aria? Is there any chance search engines could get confused?

It just doesn't seem semantically correct on its own.


Solution

  • I think it would be more semantically correct to have the title separate from the list (being a list of links rather than a list of links and title). I don't know how this would affect search engines, however. But this shouldn't make styling any more difficult:

    <div>
        <h4>My Title</h4>
        <ul>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </div>
    

    If you were then wanting them displayed inline you could simply:

    div h4, div ul, div ul li { display:inline-block; }
    div ul { list-style-type:none; padding:0; }
    

    JSFiddle example.