Menu
Many (most?) sites aiming for accessibility and standards compliance use unordered lists for their navigation. Does this make the site more accessible or does it just provide useful elements for styling?
I don't mind them, and I have been using unordered lists in this way. It's just that, when I remove the styling from a page to try to gauge it's accessibility, it strikes me that it could just as well could be plain links. Where does this come from?
513
Keyboards, screen readers, and screen magnifiers are commonly used forms of assistive technology. Keyboard users can jump from item to item in a list. A screen reader can identify a list and tell someone how many items they will find in it.
An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.
Only use role="list" and role="listitem" if you have to — for example if you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript. Note: The ARIA list / listitem roles don't distinguish between ordered and unordered lists.
There are three types of lists in HTML: Unordered list or Bulleted list (ul) Ordered list or Numbered list (ol) Description list or Definition list (dl)
The best markup for your site's navigation would the HTML tag(s) that best represent what your navigation is. This is where rubber meets the road for HTML semantics.
Is your navigation a list that doesn't have any logical ordering? If so then <UL> would be a good choice. Is your navigation more of a wizard that requires steps or is it perhaps in alphabetical or numerical sequence? If so then <OL> might be a better choice.
Rendering your navigation as plain links as you mention does not provide any semantic meaning; it would suggest that your navigation is a sentence to be read. By providing your links in a list, you supply a hint as to how we are to interpret this series of hypertext-linked words.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
