Questo è il terzo post di una piccola serie che stiamo scrivendo sull'accessibilità dei moduli. Se ti sei perso il 3° post, dai un'occhiata Gestire il focus dell'utente con :focus-visible. In questo post esamineremo l'utilizzo di uno screen reader durante la navigazione in un modulo e anche alcune best practice.
Cos'è un lettore di schermo?
Potresti aver sentito il termine "screen reader" mentre ti spostavi sul web. In questo momento potresti anche utilizzare uno screen reader per eseguire test manuali di accessibilità sulle esperienze che stai creando. Uno screen reader è un tipo di AT o tecnologia assistiva.
Uno screen reader converte il testo digitale in parlato sintetizzato o output Braille, comunemente visto con un lettore Braille.
In questo esempio utilizzerò Mac VO. Mac VO (VoiceOver) è integrato in tutti i dispositivi Mac; Sistemi iOS, iPadOS e macOS. A seconda del tipo di dispositivo su cui esegui macOS, l'apertura di VO potrebbe differire. Il Macbook Pro su cui è in esecuzione VO su cui sto scrivendo non ha la touch bar, quindi utilizzerò i tasti di scelta rapida in base all'hardware.
Avvio della voce vocale su macOS
Se stai utilizzando un Macbook Pro aggiornato, la tastiera del tuo computer sarà simile all'immagine qui sotto.
Inizierai tenendo premuto il tasto cmd tasto e quindi premendo il Touch ID tre volte velocemente.
Se utilizzi un MBP (MacBook Pro) con TouchBar, utilizzerai la scorciatoia cmd+fn+f5 per attivare VO. Se utilizzi una tastiera tradizionale con il tuo desktop o laptop, i tasti dovrebbero essere gli stessi o dovrai attivare VO nelle impostazioni di Accessibilità. Una volta attivato VO, verrai accolto con questa finestra di dialogo insieme a un vocalizzato introduzione a VO.
Se fai clic sul pulsante "Usa VoiceOver" sei sulla buona strada per utilizzare VO per testare i tuoi siti Web e le tue app. Una cosa da tenere a mente è che il VO è ottimizzato per l'uso con Safari. Detto questo, quando esegui il test dello screen reader assicurati che Safari sia il browser che stai utilizzando. Questo vale anche per iPhone e iPad.
Esistono due modi principali per utilizzare la voce vocale dall'inizio. Il modo in cui lo utilizzo personalmente è navigando in un sito Web e utilizzando una combinazione di tab, control, option, shift e i tasti freccia, posso navigare nell'esperienza in modo efficiente solo con questi tasti.
Un altro modo comune per navigare nell'esperienza è utilizzare il file Rotore VoiceOver. Il Rotor è una funzionalità progettata per navigare direttamente nel punto in cui desideri essere nell'esperienza. Usando il Rotore, elimini la necessità di attraversare l'intero sito, consideralo come un "Scegli la tua avventura".
Tasti modificatori
I tasti modificatori rappresentano il modo in cui utilizzi le diverse funzionalità in VO. Il tasto modificatore predefinito o VO is control + option ma puoi cambiarlo in BLOC MAIUSC o scegliere entrambe le opzioni da utilizzare in modo intercambiabile.
Utilizzo del rotore
Per utilizzare il Rotore devi utilizzare una combinazione dei tuoi tasti modificatori e della lettera "U". Per me, la mia chiave di modifica è caps lock. Io premo caps lock + U e il rotore gira per me. Una volta visualizzato il rotore, posso navigare verso qualsiasi parte dell'esperienza che desidero utilizzando le frecce sinistra e destra.
Navigazione per livello di intestazione
Un altro modo efficace per navigare nell'esperienza è a livello di intestazione. Se usi la combinazione dei tasti modificatori + cmd + H è possibile attraversare la struttura del documento in base ai livelli di intestazione. È anche possibile tornare indietro nel documento premendo shift nella sequenza in questo modo, tasti modificatori + shift + cmd + H.
Storia e migliori pratiche
I moduli sono uno degli elementi nativi più potenti che abbiamo in HTML. Che tu stia cercando qualcosa su una pagina, inviando un modulo per acquistare qualcosa o inviando un sondaggio. Le forme sono una pietra angolare del web e sono state un catalizzatore che ha introdotto l'interattività nelle nostre esperienze.
La storia del modulo web risale al settembre 1995 quando fu introdotto nel file Specifiche HTML 2.0. Alcuni dicono che i bei vecchi tempi del web, almeno io lo dico. Stephanie Stimac ha scritto un fantastico articolo su Smashing Magazine intitolato, "Standardizzazione della selezione e oltre: il passato, il presente e il futuro dei controlli dei moduli HTML nativi".
Di seguito sono riportate 5 best practice da seguire quando si crea un modulo accessibile per il Web.
- Assicurati di utilizzare un elemento del modulo. I moduli sono accessibili per impostazione predefinita e devono essere sempre utilizzati al posto dei div.
<form>
<!-- Form controls are nested here. -->
</form>
- Assicurati di usare il
foredidattributi sulabel'S einputE' così che sono collegati. In questo modo, se fai clic/tocchi l'etichetta, lo stato attivo si sposterà sull'input e potrai iniziare a digitare.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Se un campo è obbligatorio affinché il modulo possa essere completato, utilizzare l'attributo obbligatorio e l'attributo aria-required. Ciò impedirà l'invio del modulo. L'attributo aria-required indica esplicitamente alla tecnologia assistiva che il campo è obbligatorio.
<input type="text" id="name" name="name" required aria-required/>- Usa il,
:focus,:focus-withined:focus-visiblePseudoclassi CSS per gestire e personalizzare il modo in cui un utente riceve il focus.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttonviene utilizzato per invocare un'azione, come l'invio di un modulo. Usalo! Non creare pulsanti utilizzandodiv'S. UNdivper definizione è un divisore. Non ha proprietà di accessibilità intrinseche.
Dimo
Se vuoi controllare il codice, vai al Repository GitHub della demo di VoiceOver. Se vuoi provare la demo qui sopra con il tuo screen reader preferito, dai un'occhiata Navigazione in un modulo Web con VoiceOver.
Software per la lettura dello schermo
Di seguito è riportato un elenco dei vari tipi di software per la lettura dello schermo che è possibile utilizzare sul proprio sistema operativo. Se un Mac non è la tua macchina preferita, sono disponibili opzioni per Windows e Linux, nonché per i dispositivi Android.
NVDA
NVDA è un lettore di schermo di NV Access. Attualmente è supportato solo su PC con Microsoft Windows 7 SP1 e versioni successive. Per ulteriori accessi, consulta il Pagina di download della versione 2024.1 di NVDA sul sito Web di NV Access!
JAWS
"Abbiamo bisogno di uno screen reader migliore"
- Anonimo
Se hai capito il riferimento sopra, sei in buona compagnia. Secondo il sito web di JAWS, ecco di cosa si tratta in poche parole:
“JAWS, Job Access With Speech, è lo screen reader più popolare al mondo, sviluppato per gli utenti di computer la cui perdita della vista impedisce loro di vedere il contenuto dello schermo o di navigare con il mouse. JAWS fornisce output vocale e Braille per le applicazioni informatiche più popolari sul tuo PC. Potrai navigare in Internet, scrivere un documento, leggere un'e-mail e creare presentazioni dal tuo ufficio, desktop remoto o da casa.
Dai un'occhiata tu stesso a JAWS e se quella soluzione soddisfa le tue esigenze, provaci sicuramente!
Narratore
L'Assistente vocale è una soluzione di lettura dello schermo integrata fornita con Windows 11. Se scegli di utilizzarlo come lettore di schermo preferito, il collegamento seguente fornisce la documentazione di supporto sul suo utilizzo.
Orca
Orca è uno screen reader che può essere utilizzato su diverse distribuzioni Linux che eseguono GNOME.
“Orca è uno screen reader gratuito, open source, flessibile ed estensibile che fornisce accesso al desktop grafico tramite voce e braille aggiornabile.
Orca funziona con applicazioni e toolkit che supportano l'Assistive Technology Service Provider Interface (AT-SPI), che è la principale infrastruttura di tecnologia assistiva per Linux e Solaris. Le applicazioni e i toolkit che supportano AT-SPI includono il toolkit GNOME Gtk+, il toolkit Swing della piattaforma Java, LibreOffice, Gecko e WebKitGtk. È in corso la ricerca del supporto AT-SPI per il toolkit Qt di KDE."
TalkBack
Google TalkBack è lo screen reader utilizzato sui dispositivi Android. Per ulteriori informazioni sull'accensione e l'utilizzo, consulta questo articolo sul sito di supporto per l'accessibilità Android.
Supporto Browser
Se stai cercando un effettivo supporto del browser per gli elementi HTML e gli attributi ARIA (Accessible Rich Internet Application), suggerisco caniuse.com per HTML ed Supporto dell'accessibilità per ARIA per ottenere l'ultimo 4-1-1 sul supporto del browser. Ricorda, se il browser non supporta la tecnologia, è probabile che non lo faccia nemmeno lo screen reader.
DigitalA11Y possono aiutare a riassumere le informazioni del browser e dello screen reader con il loro articolo, Lettori di schermo e browser! Qual è la migliore combinazione per i test di accessibilità?
Link
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
- PlatoData.Network Generativo verticale Ai. Potenzia te stesso. Accedi qui.
- PlatoAiStream. Intelligenza Web3. Conoscenza amplificata. Accedi qui.
- PlatoneESG. Carbonio, Tecnologia pulita, Energia, Ambiente, Solare, Gestione dei rifiuti. Accedi qui.
- Platone Salute. Intelligence sulle biotecnologie e sulle sperimentazioni cliniche. Accedi qui.
- Fonte: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
