Gunnar Bittersmann: Überschrift für Hauptnavigation

Beitrag lesen

problematische Seite

@@marctrix

<nav> <h2 class="visually-hidden">Hauptnavigation</h2> <ul></ul> </nav>

Genau das! Und nicht (wie Bootstrap das macht) mit einer Klasse sr-only - diese Hinweise sind nämlich sehr oft hilfreich bei abgeschaltetem CSS - nicht nur für Screenreader-Nutzer, sondern auch für Nutzer der Braille-Zeile, für Nutzer ohne Maus (visually Hidden aber Focus able) uswusf - Am Namen sr-only erkennt der Fachmann schon, dass BF hier nicht zu Ende gedacht wurde, weil (nochmal): Accessibility ist nicht Design für Blinde…

??

Was genau hast du gegen sr-only – außer der Benennung?

Ein kurzer Blick ins bootstrap.css offenbart, dass

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

dasselbe tut wie das, was beim A11Y Project visually-hidden heißt:

.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .visually-hidden a:focus, .visually-hidden input:focus, .visually-hidden button:focus { position:static; width:auto; height:auto; }

LLAP 🖖

-- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann