Semantic HTML5 for sequence of menu or UI choices [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
When writing HTML5 condent describing to the reader how to navigate through a UI selection path (things like menus, tabs, and dialogs, where there are multiple choices at each step) like:
Options ▸ Configure… ▸ Keyboard Shortcuts
What kind of elements should the labels be?
What kind of elements are the separators, if any? (Or should they be inserted with CSS?)
What kind of element should the entire sequence be contained in?
Note that this is not a question about formatting, nor about interactive elements. It is purely about semantically correct markup in a static descriptive text.

Answer 1

Some things are still going to depend on the actual use cases but basically, you're using a <nav> and then a bunch of <ul><li>.
The toggles to open/close a part of the menu should be <button> with aria-expanded set to "true" or "false" for the open and close states.
The end items should either be <a> if they redirect to a different screen, or <button aria-pressed="true"> if they are just on/off toggles (with the aria-pressed changing depending on the state).
if the whole menu takes focus and/or visibility away from the rest of the app (kind of like a pop-in), you might want to wrap it inside <div role="dialog" aria-modal="true" aria-label="Menu"> <div role="document"> and add a "close" button as the first child.
Here's an example of what the full markup might look like:
<nav role="navigation" aria-label="Full menu">
<!--
the following is useful if the entire menu is behind a single button,
otherwise, you can start directly at the <ul>
-->
<button type="button" aria-expanded="true">
<span>Menu</span>
</button>
<!-- end of "single entry point" -->
<!--
the following is in case you're making a "pop-in" that obscures the rest of the page,
otherwise you can skip them
-->
<div role="dialog" aria-modal="true" aria-label="Menu">
<div role="document">
<button type="button" aria-label="Close menu">
<span>Close</span>
</button>
<!-- end of "pop-in" wrapper -->
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Options</span>
</button>
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Config</span>
</button>
<ul>
<li>
<!-- use <a> if you're redirecting to somewhere -->
keyboard
<!-- use <button> if it's just a toggle -->
<button type="button" aria-pressed="true">toggle Off</button>
</li>
<!-- other Options > Config > * -->
</ul>
</li>
<!-- other Options > * -->
</ul>
</li>
<li>
<button type="button" aria-expanded="false">
<span>Tools</span>
</button>
<ul>
<!-- all Tools > * menu items -->
</ul>
</li>
<!-- other menu categories -->
</ul>
</div>
</div>
</nav>
Tbh, depending on how you need it to look, it might be a pain to style because for it to be properly semantic, you need to have this "recursive" structure of <ul><li> and the <button aria-expanded> should be directly followed by the <ul> they are expanding.
Bonus issue: you can't use the CSS display: contents otherwise the browsers will lose the semantics.
To strictly answer your questions:
What kind of elements should the labels be?
Basically, <button type="button"> with the proper aria attributes. Sometimes <a> for the end items if they redirect the user to another page.
What kind of elements are the separators, if any? (Or should they be inserted with CSS?)
CSS is probably best, the DOM will be separation enough from a semantics point of view. If you need your separators in the markup, try and add aria-hidden="true" if they contain some "readable" elements (span, svg, img, ...).
What kind of element should the entire sequence be contained in?
It should be a <nav role="navigation"> even though the specs state that nav shouldn't have a role attribute because it's intrinsically navigation, but not all browsers implement that properly.