Uno sguardo sugli standard Web ARIA e sull'accessibilità alle app HTML
Un web veramente aperto e inclusivo ha bisogno di tecnologie che consentano agli utenti disabili di affidarsi alle tecnologie assistive per godere di contenuti web dinamici e di moderne app web. Gli standard web di accessibilità del W3C mirano a popolare il web con ARIA (Accessible Rich Internet Applications) che gli utenti con disabilità possono utilizzare in modo efficiente.
ARIA è uno dei numerosi standard e linee guida sull'accessibilità pubblicati dalla Web Accessibility Intitiative (WAI). Fornisce un markup aggiuntivo che può essere facilmente inserito nei documenti HTML. WAI-ARIA è una soluzione cross-platform e cross-device che si rivolge alla piattaforma Web aperta, quindi non solo pensare ai siti Web, ma anche ai giochi, all'intrattenimento digitale, all'assistenza sanitaria, ai dispositivi mobili e ad altri tipi di app.
In questo post daremo un'occhiata a come è possibile aggiungere accessibilità ai tuoi documenti HTML con l'aiuto degli standard WAI-ARIA.
Il framework ARIA
La sintassi dell'HTML non sempre consente agli sviluppatori di descrivere correttamente gli elementi, identificare i loro ruoli e specificare le relazioni tra loro. Anche se questo è raramente un problema per i visitatori che sono in pieno possesso dei loro sensi, può impedire agli utenti della tecnologia assistiva di capire cosa sta accadendo sullo schermo ed esplorare le loro opzioni.
Questo è il punto in cui ARIA viene in nostro aiuto, poiché consente di definire lo scopo di diversi elementi con l'aiuto di ruoli fondamentali, e descrivi la loro natura con attributi prefissi aria. Gli attributi con prefisso aria hanno due tipi: proprietà che descrivono caratteristiche che hanno meno probabilità di cambiare durante il ciclo di vita della pagina e stati che forniscono informazioni su cose che possono cambiare frequentemente a causa dell'interazione dell'utente.
Ruoli punto di riferimento
Ruoli di riferimento sono le forme più conosciute del modello dei ruoli di ARIA (altri sono i ruoli astratti, i ruoli dei widget e i ruoli della struttura del documento). I ruoli principali consentono agli sviluppatori di identificare grandi dimensioni regioni percepibili sulla pagina web che gli utenti della tecnologia assistiva potrebbero voler accedere rapidamente.
Esistono 8 tipi di ruoli dei punti di riferimento ARIA e devono essere aggiunti come attributi ai tag HTML correlati.
role =”bandiera”
Il ruolo banner è destinato principalmente a contenuti correlati a tutto il sito, non solo a singole pagine. Di solito viene aggiunto come attributo all'intestazione principale del sito per il logo e altre importanti informazioni a livello di sito. È importante poter utilizzare il ruolo del banner solo una volta all'interno di qualsiasi documento o app HTML.
role =”principale”
Il ruolo principale del punto di riferimento è legato al contenuto principale del documento. Non può essere utilizzato più di una volta su una pagina HTML. Di solito segue il Il ruolo di navigazione deve essere utilizzato per indicare un'area che contiene elementi di navigazione come link ed elenchi su un sito. Il ruolo di punto di riferimento complementare descrive contenuti aggiuntivi correlati al contenuto principale del sito. Deve essere collocato al livello simile nella gerarchia DOM come Il ruolo contentinfo informa gli interpreti dell'utente della presenza di una regione in cui è possibile trovare diversi tipi di metadati, come informazioni sul copyright, dichiarazioni legali e sulla privacy. Viene in genere utilizzato per il piè di pagina di un sito. Il ruolo del limite del modulo indica un modulo in attesa di input dell'utente. Per i moduli di ricerca che dovresti usare Il ruolo di ricerca è piuttosto auto-esplicativo, ha lo scopo di aiutare le tecnologie assistive a identificare la funzionalità di ricerca di un sito web. È possibile utilizzare il ruolo del punto di riferimento dell'applicazione per un'area che si desidera dichiarare come un'app Web anziché come un documento Web. Non è consigliabile includerlo nei siti web tradizionali, poiché suggerisce alle tecnologie assistive di passare dalla normale modalità di navigazione alla modalità di navigazione delle applicazioni. Dovresti usare questo ruolo fondamentale solo con grande cura. Mentre i ruoli ti consentono di definire il significato dei tag HTML, gli stati e le proprietà forniscono all'utente ulteriori informazioni su come interagire con essi. Entrambi gli stati e le proprietà sono contrassegnati con attributi prefissi aria con la sintassi aria-*. Gli attributi ARIA più noti sono probabilmente la proprietà aria-richiesta e lo stato di aria condizionata. Aria richiesta è un proprietà perché è una funzionalità permanente di un elemento di input (ad esempio, l'utente deve riempirlo), mentre l'aria controllata è a stato perché una casella di controllo può cambiare frequentemente il suo valore a causa dell'interazione dell'utente. Gli stati e le proprietà talvolta prendono valori token (un insieme limitato di valori predefiniti), ad esempio la proprietà aria-live può avere 3 valori diversi: via, gentile, assertivo. La sintassi in questo esempio ha il seguente aspetto: In altri casi i valori degli attributi con prefisso aria sono rappresentati da stringhe, numeri, interi, Riferimenti ID o vero falso valori. Utilizza gli attributi di relazione per indicare le relazioni tra diversi elementi sul tuo sito, che non possono essere altrimenti determinati dalla struttura del documento. Ad esempio il Dopo aver impostato un ruolo di riferimento ARIA per un'area percepibile nella pagina HTML, può aiutare molto le tecnologie assistive se si modificano gli stati e le proprietà con prefisso ARIA degli elementi figlio in base agli eventi che si verificano sullo schermo. Questo può essere cruciale quando gli utenti devono interagire con il sito, ad esempio compilando un modulo o eseguendo una query di ricerca. La regola generale del design dell'accessibilità è che lo stato attuale dell'interfaccia utente deve essere sempre percepibile dalle tecnologie assistive. Ad esempio se l'utente sceglie un'opzione in un modulo, deve apparire anche selezionato per le tecnologie assistive. Questo può essere facilmente ottenuto utilizzando lo stato di aria selezionata con la seguente sintassi: Le linee guida per le pratiche di authoring WAI-ARIA del W3C possono darti molte altre grandi idee su come armonizzare correttamente le interfacce visive e accessibili del tuo sito. L'utilizzo dei ruoli e degli attributi ARIA a volte può essere ridondante. Quando usi tag semantici di HTML5 come Ad esempio non è necessario usare il modulo ruolo fondamentale per definire il Quindi se hai già aggiunto il nascosto Attributo HTML a un input di modulo, non è necessario aggiungere il Aria-nascosto stato, come il browser lo include per impostazione predefinita.. Quest'ultimo è stato aggiunto alle specifiche W3C con lo scopo di mappare il principale Ruolo di riferimento ARIA per un elemento HTML semantico. role =”navigazione”
role =”complementare”
role = "main". Post correlati, articoli popolari, ultimi commenti sono esempi tipici di contenuti complementari autonomi.role =”ContentInfo”
role =”modulo”
role = "search" anziché.role =”ricerca”
role =”applicazione”
Stati e Proprietà
La sintassi degli attributi prefissati di Aria
Come utilizzare gli stati e le proprietà ARIA
1. Costruire relazioni tra gli elementi con attributi di relazione
Aria-labelledby proprietà identifica l'elemento che etichetta l'elemento corrente.Aria-labelledby - tra molte altre cose - può legare le intestazioni alle regioni di riferimento ARIA nel modo seguente:Questa è una rubrica
Contenuto principale… 2. Sincronizzare stati e proprietà con il ciclo di vita dell'elemento
3. Abbina le interfacce visive e accessibili
.Non abusare di ARIA
o , i browser Web moderni aggiungono la semantica ARIA appropriata per impostazione predefinita. In questo caso non ha senso impostare separatamente i ruoli dei punti di riferimento ARIA. elemento. Invece del la sintassi è perfettamente sufficiente per usare solo . È anche superfluo utilizzare gli attributi nativi di HTML insieme all'attributo ARIA appropriato.
