.sr-onlyè un nome di classe specificamente utilizzato per gli screen reader. Puoi usare qualsiasi nome di classe, ma .sr-onlyè abbastanza comunemente usato. Se non ti interessa sviluppare tenendo conto della conformità, è possibile rimuoverlo. Non avrà alcun effetto sull'interfaccia utente se rimossa perché il CSS per questa classe non è visibile ai browser desktop e dei dispositivi mobili.
Sembra che ci siano alcune informazioni mancanti qui sull'uso di .sr-onlyspiegare il suo scopo ed essere per gli screen reader. Innanzitutto, è molto importante tenere sempre presente gli utenti con difficoltà. La perdita di valore è lo scopo della conformità 508: https://www.section508.gov/ , ed è bello che bootstrap ne tenga conto. Tuttavia, l'uso di .sr-onlynon è tutto ciò che deve essere preso in considerazione per la conformità 508. Hai l'uso del colore, la dimensione dei caratteri, l'accessibilità tramite la navigazione, i descrittori, l'uso di aria e molto altro ancora.
Ma per quanto riguarda .sr-only: cosa fa effettivamente il CSS? Esistono diverse varianti leggermente diverse del CSS utilizzato per .sr-only. Uno dei pochi che uso è di seguito:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
Il CSS di cui sopra nasconde i contenuti nei browser desktop e mobili inclusi in questa classe, ma è visto da uno screen reader come JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Esempio di markup è il seguente:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Inoltre, se un elemento DOM ha una larghezza e un'altezza di 0, l'elemento non viene visto dal DOM. Questo è il motivo per cui utilizza il CSS sopra width: 1px; height: 1px;. Usando display: nonee impostando il tuo CSS su height: 0e width: 0, l'elemento non viene visto dal DOM ed è quindi problematico. L'uso dei CSS di cui sopra width: 1px; height: 1px;non è tutto ciò che fai per rendere il contenuto invisibile ai browser desktop e mobili (senza overflow: hidden, il tuo contenuto verrebbe comunque visualizzato sullo schermo) e visibile agli screen reader. Nascondere il contenuto dal browser desktop e mobile viene fatto aggiungendo un offset da width: 1pxe height: 1pxprecedentemente menzionato usando:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Infine, per avere un'ottima idea di ciò che uno screen reader vede e inoltra al suo utente danneggiato, disattiva lo stile di pagina per il tuo browser. Per Firefox, puoi farlo andando a:
View > Page Style > No Style
Spero che le informazioni che ho fornito qui siano di ulteriore utilità per qualcuno oltre alle altre risposte.