Ein Artikel von Scott Jehl, ein bisschen wie ein CSS-Trick. Haben Sie vielleicht schon eine „zugängliche Verbergungs“-Technik verwendet? Das ist, wenn Sie bewusst display: none; vermeiden, weil Sie möchten, dass das Element fokussierbar, aber visuell nicht sichtbar ist.
Aber… das kann für jeden, der die Website mit der Tastatur navigiert und gleichzeitig auf den Bildschirm schaut, umständlich sein.
Um dies zu vermeiden, versuchen wir uns daran zu erinnern, dass alle barrierefrei versteckten Inhalte sichtbar sein sollten, wenn sie den Fokus erhalten. Zum Beispiel würde dieser CSS-Code ein fokussiertes Element am oberen Rand des Viewports platzieren.
.accessible-hidden {
position: absolute;
top: 0;
left: -999px;
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.accessible-hidden:focus {
position: fixed;
top: 0;
left: 0;
background: #fff;
padding: 10px;
/* etc etc... */
}Scott verdankt Joe Watkins für die Idee.