Probably do not add ARIA list roles for Safari/VO users unless the users themselves indicate they want them.
Probably do not add aria-label to <section> elements unless you want a <section> to be a region, in which case use aria-labelledby to reference the heading (which you should have added).
The <menu> element is exposed as an unordered list; no different accessibility APIs, no different platform APIs, nothing different in the browser. You can safely ignore <menu> unless as a developer you prefer it.
Description lists are indeed announced differently across browser and screen reader pairings, but <dl> support is generally good (with Safari being the outlier), even if you may not like how it is supported.

The spec for <dl> changed. It used to be definition list when it was meant for glossaries. After the use cases expanded, it was changed to description list.

Officially they’re called description lists.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

I think definition list is just a popular misconception.

I see. Thanks for the clarification Daniel.

Sorry Glenn, I should have been more clear. <menu>s are unordered but not the same as <ul>s, if that makes sense? Screen readers announce them as menus, unlike <dl>s which are rather inconsistent among screen readers.

For FAQ I have used and as some answers to questions are too long to let them be all opened in the browser when the page is displayed

Yeah Daniel it certainly “feels” like <menu> is more semantic in some cases but I was a bit thrown by the article’s line saying “They’re even exposed to the accessibility tree as unordered lists”. I was thinking “does the browser make a distinction between these things at all then?”.

Both great examples!

In the practical sense, not much. <menu> is more semantic when using buttons (vs. links) because it’s supposed to indicate a list of interactive elements. In an ideal world, search engines would ignore them (or maybe they do already) and screen readers would announce them differently and consistently. IMO, it doesn’t hurt to use them.

Thank you for writing this article!

Just a thought…

Anything can be a list.

If we undo ul, ol and li built in styles anyway, why not use custom elements?

Pragmatically, which would would require more styling? Which would be more DRY for reusable components?

Feels like the dependency argument in micro. The moment we use a dependency is the moment we limit ourselves to it’s limits and (eventually, if not immediately) spend more time coding around it.

<unordered-list aria-label="Share article">
  <list-item>item01</list-item>
  <list-item>item02</list-item>
  <list-item>item03</list-item>
</unordered-list>

I’ve also used <dl> to mark-up tabs before. Not sure how a11y compliant it was but it felt pretty semantic.

https://atomicarchive.com/resources/documents/effects/glasstone-dolan/glossary.html
https://meyerweb.com/eric/css/