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.
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; }