.sr-only - Samo za bralnike

Vsebine na zaslonu so za uporabnike običajno zasnovane razumljivo in logično. Težave pa nastanejo pri uporabnikih z omejenim vidom oz. uporabnike, ki uporabljajo bralnike zaslona, namreč slednji ne razume vedno konteksta oz. namena določenih elementov na strani brez dodatnih informacij.

Seveda, če prikažemo vse elemente zopet ni dobro za ostale uporabnike in ravno tu nastopi CSS class .sr-only. Slednji element vizualno izklopi, bralnik zaslona pa ga lahko vedno prebere. Tako lahko informacije, ki so potrebne za kontekst vsebine za bralnike enostavno zapakiramo z class-om .sr-only.

Primer kode za .sr-only:

.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

.sr-only-focusable:focus

Pojavi se pa tudi težava, npr. v primeru vnosnih polj ali drugih elementov, ki imajo lahko stanje :focus. Če uporabnik uporablja tipkovnico za navigiranje po strani in ne uporablja bralnika zaslona bo skriti element imel status focus, vendar ne bo viden. Zato moramo za elemente, ki jih želimo prikazati uporabiti dodaten class .sr-only-focusable:focus, ki skriti element dejansko prikaže, če ima status focus. Primer takšne uporabe je povezava “Skip to content”. Velja samo za elemente do katerih pridemo s pomočjo tipkovnice.

Primer kode:

.sr-only-focusable:focus,
.sr-only-focusable:active {
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}