Auszeichnung von Abkürzungen

[marctrix]

Hej Gunnar,

@@marctrix

mit der Möglichkeit die Abkürzung einzublenden (für Screenreader-Nutzer als WAI-ARIA-Attribut …)

Wie genau soll das gehen?

Hatte noch keinen konkreten Bedarf das Problem zu lösen, komplett durchzudenken und zu testen. Eine erste Idee für eine Überlegung wäre:

HTML

<abbr aria-describedby="un" tabindex="0">UN<span class="visuallyhidden" id="un"> Vereinte Nationen</span></abbr>

CSS

/* Original from H5BP.com */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

abbr:hover span.visuallyhidden,
abbr:focus span.visuallyhidden,
abbr:active span.visuallyhidden { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

Marc