[chrismorgan]

> <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>.

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>.

3. aria-label is allowed on all but a handful of roles <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...

They’re not name–value pairs, they’re name–value groups.

[redmatter]

Wow 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.

[pverheggen]

I 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.

[chrismorgan]

I 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.

[brewmarche]

Your 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

[chrismorgan]

Don’t think I’ve ever heard of scilicet. <https://books.google.com/ngrams/graph?content=viz.,sc.&year_...> definitely suggests viz. to have been massively more popular than sc.

[HappMacDonald]

Concordantly, vis a vis, ergo..

[NooneAtAll3]

i.e. == aka == in other words

e.g. == f.e., for example

[giantrobot]

"e.g." == exempli gratia == to give an example

"i.e." == id es == that is

[jcynix]

But both i.e. and e.g. might be more easily understood by non-native speakers of English (IMHO ;-)

[dekoidal]

The old HTML5 Doctor article is still my favourite https://html5doctor.com/element-index/