Search code examples
htmlaccessibilitywai-aria

How is interactive content inside `dt` elements exposed to the accessibility tree?

Putting a link inside a dt element is valid HTML. The first website even does so.

<dl>
<dt><a>My Link</a></dt>
<dd>Info about link</dd>
</dl>

However, I know there can be accessibility problems if you put interactive content inside a summary element because many browsers expose this element as something like a button.

I think at least in earlier standards dt could be exposed as a term role which should not have interactive content like a link inside.

Should I put interactive content inside dt elements?

Solution

  • I misunderstood the warnings in ARIAI 1.1 .

    You can put interactive content inside dt or dd elements. These elements themselves are exposed as term or definition roles in the browser accessibility tree.

    The problem is with setting interactive content itself to term or definition roles.

    So basically <span role="definition"><a>My Link</a></span> is ok if a little silly. But <a role="definition">My Link</a> is wrong bad.