nicht angemeldet
@@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 Namensr-onlyerkennt 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
