3 ms·
> <dl aria-label="Ability Scores"> This is incorrect: 1. <dl> has no corresponding (viz. implicit) role, but can be given the role group, list, none or prese
by chrismorgan 5mo ago
> <dl aria-label="Ability Scores">
This is incorrect:
1. <dl> has no corresponding (viz. implicit) role, but can be given the role group, list, none or presentation <https://w3c.github.io/html-aria/#el-dl https://w3c.github.io/html-aria/#el-dl>.
2. You’re only allowed to define aria-label on elements that have a compatible role, implicit or explicit <https://w3c.github.io/html-aria/#docconformance-naming https://w3c.github.io/html-aria/#docconformance-naming>.
3. aria-label is allowed on all but a handful of roles <https://www.w3.org/TR/wai-aria-1.2/#aria-label https://www.w3.org/TR/wai-aria-1.2/#aria-label>, which in this case knocks out presentation and none, leaving group and list.
4. group doesn’t feel right, list feels acceptable.
In summary: either ditch the aria-label, or add role="list" (meaning also role="listitem" on children).
—⁂—
One thing the article misses is that you can have multiple <dt> in a row too, not just <dd>. The spec has a good example: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element:the-dl-element-5 https://html.spec.whatwg.org/multipage/grouping-content.html...
They’re not name–value pairs, they’re name–value groups.
- redmatter 5mo agoWow I have never noticed that, thanks for the heads up! Out of curiosity, would you put `role="listitem"` on `<div>` elements that wrap the `<dt>` && `<dd>` elements? It looks like `role="listitem"` is allowed on the `<dt>` element, but that doesn't feel like it would be accurate in the case where multiple `<dt>` elements are grouped together, and I'm not sure if that would mess with how the element is interpreted natively as as term.
- chrismorgan 5mo agoI know the fundamentals of this sort of thing, but I haven’t done much practical with it, so I don’t feel that I can comment on this point.
- pverheggen 5mo agoI pulled up some of those spec's examples in Chrome and viewed the accessibility tree, and weirdly it assigns <dt> an implicit role of `term`, even though the spec says that <dt> should be `listitem` and <dfn> should be `term`. I didn't check FF or Safari but I would not be surprised if they did something different. Given the spotty screen reader support for dt/dd to begin with, I'd steer clear of using multiple `<dt>` s if a11y is top priority, and just modify your content to have one dt per dd. Your single dt text could be "X or Y", repeat the definition twice, etc. If you're familiar with Jakob's Law, it applies to a11y too, so stick with what users might have seen on other sites.
- huflungdung 5mo ago[dead]
- brewmarche 5mo agoYour comment put me on a side quest to research the differences between i.e., e.g., viz. and sc. and I have to admit that I’m still not 100% sure
- HappMacDonald 5mo agoConcordantly, vis a vis, ergo..
- chrismorgan 5mo agoDon’t think I’ve ever heard of scilicet. <https://books.google.com/ngrams/graph?content=viz.,sc.&year_start=1800&year_end=2022 https://books.google.com/ngrams/graph?content=viz.,sc.&year_...> definitely suggests viz. to have been massively more popular than sc.
- NooneAtAll3 5mo agoi.e. == aka == in other words e.g. == f.e., for example
- jcynix 5mo agoBut both i.e. and e.g. might be more easily understood by non-native speakers of English (IMHO ;-)
- giantrobot 5mo ago"e.g." == exempli gratia == to give an example "i.e." == id es == that is
- dekoidal 5mo agoThe old HTML5 Doctor article is still my favourite https://html5doctor.com/element-index/ https://html5doctor.com/element-index/