Assicurati che solo le parti pertinenti della pagina siano esposte a screen reader e altre tecnologie per la disabilità. Ad esempio, i contenuti non visibili sullo schermo devono essere nascosti alle tecnologie di assistenza.
Come eseguire il test manuale
Per verificare che i contenuti non visibili sullo schermo siano nascosti, devi eseguire un test con gli screen reader.
- Gli utenti Mac possono guardare questo video sull'utilizzo di VoiceOver.
- Per utenti di PC, guarda questo video sull'utilizzo di NVDA.
- Gli utenti di Chromebook possono provare ChromeVox, lo screen reader integrato.
Usa il tasto TAB per spostarti tra le pagine. Lo screen reader non deve annunciare i contenuti nascosti.
Soluzione
Per nascondere i contenuti non visibili sullo schermo,
rimuovi l'elemento che li contiene dall'ordine di tabulazione impostandolo su display: none o visibility: hidden.
Ad esempio:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
Consulta anche l'articolo Impostare correttamente la visibilità dei contenuti fuori schermo.
Risorse
Codice sorgente per l'audit Contenuti fuori schermo nascosti alle tecnologie per la disabilità