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.
It shouldn’t be so controversial to say that if 99% of usage routes around your API, it’s probably the API’s fault.
:wrap(dt, dt+dd) {border: solid 1px}TIL I’ve been naming it wrong for a decade.
https://info.cern.ch/hypertext/WWW/TheProject.html
https://info.cern.ch/ (A landing page of sorts to give context and orientation about the actual first website.)
I.e. can we do
<dl>
<dt>Actions</dt>
<dd><dl>...</dl></dd>
</dl>https://html.spec.whatwg.org/#the-dd-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
[1] https://validator.w3.org/nu/?showsource=yes&showoutline=yes&...
<tr>
<td> first
<td> second
<tr>
<td> what
<td> ever
<table><tr><th>Term 1<td>Definition 1
<tr><th>Term 2<td>Definition 2
</table>
<dl><dt>Term 1<dd>Definition 1
<dt>Term 2<dd>Definition 2
</dl>And... it also uses the wrapper div for styling
I don't really like the div either (I use the design system all day, and maintain a set of components), but it makes documentation much easier.
I put dl lists in a grid with no divs needed. As MDN says, div is the last resort, invariably there is something better, and nowadays that is grid styling.
New to me is multiple dd's.
For legacy layouts littered with divs and classes, display: contents helps get rid of the div wrappers, promoting whatever is wrapped.
Even with disclosure elements there are ways to avoid div wrappers using the pseudo element for everything enclosed by the details element apart from the summary element.
For example in XHTML you can use custom elements as table rows or cells (provided you give them the correct role and CSS display property). This is because XHTML does not modify the tree during parsing, unlike HTML which will hoist out custom element children of the table to the table's parent.
https://html.spec.whatwg.org/multipage/grouping-content.html...
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
EDIT everyone replied at once lol. I'm surprised too about div.
Also, screen reader support: https://a11ysupport.io/tech/html/dl_element
<my-element> != <div>
[1] https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
[2] https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElem...
Somehow, people got convinced that <div> elements are evil and should never be used no matter what. Yes, you should use a more semantic element when it makes sense, but try to remember what that phrase actually means.
However, "semantic elements" became popular shortly after the push for the "semantic web" which was entirely based around making the web easier to process for machines. Many of the original sources talk about how it's easier to digest for humans too, but that's just a happy byproduct.
https://www.w3.org/DesignIssues/Semantic.html
https://www.lassila.org/publications/2001/SciAm.pdf
https://informationr.net/ir/7-4/paper134.html
https://jonchristopher.us/blog/a-semantic-breakdown-of-resta...
https://shapeshed.com/the-importance-of-semantic-markup/
> Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.
You shouldn't try to fix this kind of thing by mangling the HTML, since (1) users tend to be used to their screen reader's quirks, and (2) in situations like these, making it juuuust right in one screen reader is likely to make it incomprehensible in another. But it is important to be aware of these quirks, so you don't accidentally design an interface that relies on less-quirky behaviour.
I dunno, I guess I’m a caveman. If it looks right and works (including accessibility) then I figure I’m pursuing something that doesn’t matter a lot.
I need to learn more about web accessibility, but if you completely ignore it (and other sane practices) HTML looks really simple.
I think the design of HTML is just too much. There’s so many tags that don’t do much. It’s like w3c decided that any common thing people use in websites needs a tag. The end result is more and more tags…
Can anyone convince me otherwise? It screams design red-flags to me.
PS: I love the web and think it’s the best platform and future platform we have at the moment. It’s just quirky and loves not breaking old websites!
Wait what? <DL> has been in HTML since.. the first draft in 1993!
I like DL's but they can be challenging to style. This article is using a lot of fixed pixel widths which would break on really small screens or larger data.
Some of the extracted CSS chunks
#statblock{
box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
font-family:Lato,'Trebuchet MS',sans-serif;
font-size:85%;
min-width:50ch;
max-width:70ch;
margin-inline:auto;
background-color:#fffaf0;
padding-inline:2rem;
padding-block:1rem
}
dl.statblock-bio{
color:maroon;
line-height:1.5;
border-top:5px solid maroon;
border-bottom:5px solid maroon;
margin-block:0.75em;
padding-block:0.75em
}
dl.ability-scores{
min-width:40ch;
display:flex;
justify-content:space-around;
color:maroon
}
dl.ability-scores>div{
text-align:center;
line-height:1.5
}
dl.ability-scores dt{
font-weight:700
}Why is it preferred over <table> for laying out columns via a the character attributes at the bottom of TFA?