logoalt Hacker News

redmattertoday at 3:55 PM2 repliesview on HN

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.


Replies

pverheggentoday at 8:41 PM

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.

chrismorgantoday at 4:28 PM

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.