Überschrift für Hauptnavigation

[Gunnar Bittersmann]

@@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 🖖