dl {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto;
    }

    dt {
        grid-column-start: 1;
    }

    dd {
        grid-column-start: 2;
    }

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

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

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/#the-dd-element

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

    <tr>
    <td> first
    <td> second
    <tr>
    <td> what
    <td> ever

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
  }

And that's just for browsers, there's no shared spec for the operating system accessibility APIs the browsers' accessibility tree has to be translated into or how screen readers (and other assistive technologies) will use the OS's APIs.

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!

    :wrap(dt, dt+dd) {border: solid 1px}

We'd all be better off if the W3 dispensed with all that ideological semantic purity BS and started doing more realpolitik. Think not about whether your API is semantically pure, but about what developers want to do, what hacks they'll use to achieve their goals despite your objections, and how to enable doing those things in a way that is maximally beneficial to everyone involved.

ARIA live regions are the perfect example. What developers actually want is `document.speakText`. What developers actually have is a weird API that announces text on the page as it changes. They have to bridge from one to the other, which is difficult and hacky, even when implemented well. But hey, at least that live region approach is semantically pure HTML...