Many are unfamiliar with an HTML tag is a menu. You might be familiar what an order list (ol) or an unordered list (ul). Let's take a look at what the difference between those is.
For text lists - <ol>, <ul>
Those list types may be around your code, too; they are pretty common and always used incorrectly. Why wrong?
When we take a look at the HTML specification under grouping content it shows the following definitions.
ol
The ol element represents a list of items that have been intentionally ordered, such that changing the order would change the meaning of the document.
html spec - olul
The ul element represents a list of items where the order of the items is not important — that is, changing the order would not materially change the document's meaning.
html spec - ul
So both contain only list items, and the list item only contains text, no interactive elements, and links.
For Menus - <menu>
The definition of a menu is slightly different.
menu
The menu element represents a toolbar consisting of its contents in the form of an unordered list of items (represented by li elements), each representing a command that the user can perform or activate.
html-spec - menu
<menu> and <ul> both render unordered list items. The primary difference is that an <ul> is primarily used for display items. <menu>, on the other hand, is for interactive items.
So whenever you build a list of interactive elements. Think about which HTML element to use. For me, <menu> is the correct one.
Screen reader, by default, doesn't recognise that it is a menu and only narrates it as a list of elements. To improve the accessibility further, add some aria roles to the menu.
<menu role="menu">
<li><a href="#" role="menuitem">Lorem.</a>
<li><a href="#" role="menuitem">Numquam.</a>
<li><a href="#" role="menuitem">Modi!</a>
<li><a href="#" role="menuitem">Adipisci.</a>
<li><a href="#" role="menuitem">Officiis.</a>
</menu>
And that's it; let me know what you choose to build your next menu, toolbar, and menubar.
Top comments (0)