Share
Nel precedente articolo di questa serie abbiamo esaminato il primo principio dell'accessibilità: garantire che il contenuto sia disponibile in un formato che possa essere facilmente percepito dall'utente. Se un utente utilizza tecnologie assistive, un modo per renderlo possibile è rendere più facile per tali tecnologie analizzare e comprendere il tuo sito e il suo contenuto. In questo articolo ci concentreremo su un modo particolare per farlo: ARIA.
WAI-ARIA (Web Accessibility Initiative-Access Rich Internet Applications accessibile), o ARIA, è un protocollo W3C che migliora l'interazione del tuo sito con le tecnologie assistive. Lo fa in diversi modi:
I browser legacy non presentano alcun problema qui: ARIA è supportato dalla maggior parte dei browser e screen reader moderni e per il resto non ci sono problemi di compatibilità.
In questa serie ci concentreremo sul primo dei punti elenco sopra, dichiarando un elemento ruolo come parte della struttura della pagina.
Se la struttura di una pagina può essere determinata a livello di codice e ogni 'area' della pagina web essere identificata (ad esempio la navigazione del sito, il contenuto principale, la barra laterale, ecc.), Allora le tecnologie assistive possono fare un lavoro migliore di presentare quella struttura a l'utente. Ad esempio, i link "salta ai contenuti" (che tratteremo nel prossimo articolo) potrebbero diventare obsoleti se uno screen reader conosceva dove era il contenuto principale. HTML, tuttavia, non consente di identificare lo scopo di una regione sulla pagina. È qui che entrano in gioco i ruoli ARIA.
Un ruolo ARIA è semplicemente un valore di attributo che identifica il scopo dell'elemento. L'esempio più diretto sarebbe un modulo di ricerca:
Il ruolo "ricerca" identifica questo come modulo per la ricerca del contenuto del sito e uno screen reader in grado di riconoscere che sa dove portare l'utente se desidera cercare contenuti. Alcuni screen reader, ad esempio, forniscono un tasto di scelta rapida per passare al modulo di ricerca. Allo stesso modo, la consapevolezza della struttura della pagina consente alle tecnologie assistive di generare un "albero" significativo della pagina. Lo screen reader JAWS, ad esempio, utilizza la chiave del punto e virgola per saltare tra questi ruoli, consentendo all'utente di saltare rapidamente tra le regioni del sito (intestazione, navigazione, contenuto principale, ecc.).
Questo tipo di attributo è chiamato Document Landmark Roles, e tra i valori disponibili ci sono:
Contenuto relativo al sito web, ad esempio il nome del sito web e / o il logo della società. Nella maggior parte dei temi questa informazione è in header.php, ed etichetta un elemento che racchiude il titolo, la descrizione e il logo del sito con questo ruolo:
">
Questo ruolo identifica la parte della pagina che contiene i collegamenti di navigazione per il documento o il sito web. Un tema può avere più posizioni di navigazione e ognuna può essere racchiusa in un elemento con il ruolo di navigazione:
Secondo le specifiche HTML5, role = "navigazione" dovrebbe essere implicito nell'uso di , e quindi non richiesto. Tuttavia, non c'è nulla di male nell'essere espliciti.
Il contenuto principale della pagina. Questo dovere compaiono solo una volta su una pagina. Ogni tema può variare, ma i file di modello pertinenti includeranno in genere:
Il tuo "ciclo principale", ad esempio, potrebbe assomigliare a qualcosa:
// Il contenuto del loop
e i tuoi modelli di pagina potrebbero avere un aspetto simile:
>
Questo identifica i moduli di ricerca sul tuo sito e può essere utilizzato più di una volta. La maggior parte dei temi non "codifica" un modulo di ricerca nel loro tema, ma si basa invece su regioni widgetizzate in cui l'utente può aggiungere il widget di ricerca. In questo caso (e supponendo che tu stia utilizzando il WP 3.6 o successivo), non devi fare nulla: il modulo di ricerca predefinito di WordPress aggiunge già il ruolo di ricerca in modo appropriato. Inoltre gestisce le etichette del modulo e il pulsante di invio in modo accessibile.
Se esegui l'hardcode di un modulo di ricerca nel tuo tema, assicurati di utilizzarlo get_search_form () (Vedi codice). Infine, se si richiede al tema di modificare il modulo di ricerca predefinito, è possibile creare un file modello chiamato searchform.php-ma assicurati di aggiungere il ruolo di ricerca. Il modello di modulo di ricerca predefinito è:
Questo identifica un pezzo di contenuto autonomo che ha senso da solo. Un buon esempio di questo sarebbe i post del blog che appaiono sulla tua pagina 'post'. Allo stesso modo ogni commento potrebbe essere considerato un "articolo". Può anche essere annidato: per esempio un commento (articolo) può essere inserito nel post del blog (articolo).
role = "article"> // Post title / excerpt ...
Identifica una regione che è stata descritta come "contenuto di supporto per il contenuto principale". In un contesto WordPress, questo può essere interpretato come qualsiasi barra laterale. Il tuo sidebar.php modello, quindi, può assomigliare a qualcosa:
Questo in genere viene utilizzato per identificare il piè di pagina. Ufficialmente è descritto come:
Un'ampia regione percepibile che contiene informazioni sul documento principale.
Ad esempio, potrebbe includere note a piè di pagina, copyright, link alle dichiarazioni sulla privacy, ecc. Tuttavia, viene generalmente utilizzato per etichettare il piè di pagina della pagina, indipendentemente dal suo contenuto. Firefox, Safari e Chrome assegnano automaticamente il ruolo contentinfo a tags:
...
Sebbene sia in aumento, il supporto per HTML5 da parte degli screen reader varia. D'altra parte, il supporto per i punti di riferimento ARIA è in genere molto meglio. Quindi, anche se sempre più browser stanno mappando automaticamente tag HTML5 semantici al loro ruolo appropriato, è comunque una buona idea dichiarare esplicitamente il ruolo. Tuttavia, bisogna fare attenzione a non modificare il "ruolo" nativo di un elemento semantico. Ad esempio, dovresti evitare di fare qualcosa come:
Cliccami!
Di seguito è riportato un elenco di alcuni elementi HTML5, insieme ai loro ruoli impliciti ARIA.
| Elemento HTML5 | Ruolo fondamentale di ARIA | Altre note |
|---|---|---|
| role = "banner" | Dovrebbe esserci una sola istanza di banner |
| role = "navigazione" | |
| role = "main" | Dovrebbe esserci solo una istanza di main |
| role = "articolo" | |
| role = "complementare" | |
| role = "ContentInfo" | Dovrebbe esserci solo un'istanza di contentinfo |
| role = "button" |
Quando usi HTML5, dovresti usare uno script come HTML5 Shiv v3.6, usato nei temi Twenty *, per fornire supporto per i browser legacy.
Dichiarare i ruoli ARIA è un modo incredibilmente semplice per aiutare gli utenti delle tecnologie assistive a interpretare il layout del tuo sito e trovare il contenuto che stanno cercando. Nella parte successiva di questa serie guarderemo al principio di garantire che il tuo tema sia operabile. In parole povere, questo afferma che gli utenti dovrebbero essere in grado di navigare facilmente e in sicurezza attraverso il tuo sito.
Accentsconagua