Danielle Romo behandelt das HTML-Muster, das Sie benötigen, wenn Sie ein wortreiches <label> mit schicker Formatierung für ein <input type="radio"> haben.
Der Trick? Das ol' <span class="hidden-visually">, das das Label enthält, das vorgelesen werden soll, und ein <span aria-hidden="true"> mit dem rein visuellen Inhalt.
Ich finde es interessant, wie oft Leute auf dieses Muster stoßen. Hast du Ethans "The World-Wide Work" gesehen? Das Drop-Cap-Muster, über das er hier spricht, basiert im Wesentlichen auf demselben Muster.
<span aria-hidden="true">
Markup for the visual experience only,
where you can (somewhat safely) use markup
that would be crap for screen readers.
</span>
<span class="visually-hidden">
Markup for the read experience only, that
you keep very clean on purpose.
</span>Diese Klasse ist so.
Yup. Meistens ist der beste Ansatz für a11y, bei nicht-trivialen visuellen Designs, die Verwendung von zwei separaten Elementen. Und es ist irgendwie seltsam, dass
.visually-hiddenim Wesentlichen ein Hack ist und von Entwicklern entdeckt werden muss. Mir scheint, dass es ein HTML-Primitive-Attribut geben sollte, um dies zu handhaben, ähnlich wiearia-hidden, aber in umgekehrter Reihenfolge (vielleicht sogararia-visually-hiddengenannt). Kennt jemand einen guten Grund, warum dies nicht im Standard enthalten ist?Es gibt so etwas wie
Aber es ist kein Superfavorit
https://meowni.ca/hidden.is.a.lie.html