Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)
In un precedente articolo abbiamo parlato perché l'accessibilità è importante, in termini di business, SEO, usabilità e anche per la legge. In questo articolo spiegherò come creare temi WordPress accessibili, anche se le stesse idee si applicano a qualsiasi piattaforma.
Una panoramica sull'accessibilità e il Web Design inclusivo
Non c'è modo di coprire tutte le possibili buone pratiche in questo articolo, ma le basi restano vere per ogni sito Web. Userò un paio di risorse come la spina dorsale di questo articolo:
- La fantastica lista di controllo sul web design inclusivo di Heydon Pickering su Github.
- Le linee guida richieste per la creazione di temi pronti per l'accessibilità del gruppo di esperti dei temi per WordPress.
- Letture consigliate: creazione di temi per WordPress accessibili.
Copriremo i seguenti suggerimenti:
- Utilizzare HTML semantico
- Struttura con gli elementi di struttura HTML5
- Rendere la gerarchia delle intestazioni chiara
- Navigare la pagina utilizzando tecnologia assistiva
- Considerare la navigazione da tastiera e gli stili di focalizzazione
- Controllare il contrasto di colore
- Ricordare gli Skip Link
- Evitare collegamenti testuali ripetitivi
1. Utilizzare HTML semantico
Non posso sottolineare abbastanza l'importanza dell'HTML semantico: è il fondamento del vostro sito Web accessibile. Léonie Watson spiega perfettamente quello che significa semantica nel suo articolo capire la semantica:
"La semantica HTML è quindi importante in due modi: otteniamo una comprensione coerente della struttura dei contenuti e del comportamento nativo, e otteniamo una comprensione comune del significato e dello scopo del contenuto. La cosa migliore di tutti, è che otteniamo queste cose gratuitamente ogni volta che usiamo HTML come auspicato".
Quando scriviamo gli elementi HTML non dovremmo solo pensare a come sono progettati, o come appaiono. Dovremmo anche pensare a come funzionano...
- ... con la tastiera.
- ... quando cliccati o inseriti in schede.
- .. con l'API di accessibilità e le tecnologie assistive (AT) come
- i lettori di schermo
- i software di ingrandimento dello schermo
- i software di riconoscimento vocale
- i caschetti con puntatore stilo - ... con tutti i diversi browser e dispositivi.
Un esempio molto comune è l'utilizzo di <a>, <button>, e <div>. Useremo questi per illustrare quello che intendo.
Quando utilizzare <a>
Usate <a> (un tag di ancoraggio) quando create un collegamento a un'altra pagina, file, posta elettronica o un ancoraggio sulla stessa pagina.
- Un buon esempio:
<a href="https://developer.mozilla.org/">Mozilla</a> - Un buon esempio:
<a href="#back-to-top">Torna a inizio pagina</a>. - Un cattivo esempio:
<a href="#" class="menu-toggle-button">Menu</a>. Questo dovrebbe essere<button>.
Nota: dietro le quinte l'API dell'accessibilità fornisce informazioni per le tecnologie assistive su ogni elemento nome, ruolo e stato.
Ecco un link di esempio, costruire un Web Inclusivo: perché questioni di accessibilità sono importanti, con come lo vede un visualizzatore di accessibilità:
In pratica questo significa che i lettori di schermo e altri AT riconoscono il punto di ancoraggio e possono annunciare il ruolo e il nome dell'elemento. Ad esempio: "Link, costruire un Web Inclusivo: perché è importante l'accessibilità".
Inoltre possono navigare nella pagina usando solo i link:
Quando utilizzare <button>
Utilizzare <button> quando è necessario attivare un'azione, come l'apertura di un menu. Questo video di Rob Dodson spiega perché questa situazione richiede <button> invece di <div>.
Per riassumere, l'elemento <button> ha già incorporati tutti i vantaggi seguenti:
- Il focus della tastiera nativo.
- Ruolo nativo di
button, che aiuta gli utenti AT a capire che è un elemento interattivo. - Può essere innescato con Invio o Spazio senza aggiungere alcun JavaScript supplementare.
- Può utilizzare l'attributo
disabled, per quando il pulsante non dovrebbe essere più interattivo.
Suggerimento: In Chrome 64 c'è un riquadro Accessibilità che vi mostra la posizione di un elemento selezionato nell'albero dell'accessibilità, nonché i suoi attributi ARIA e le proprietà calcolate.
Quando utilizzare <div>
Usate <div> quando è necessario un elemento per scopi di stile. Naturalmente, prima controllate se ci sono elementi HTML nativi che lo farebbero meglio. Per esempio <article>, <nav>, <p>, <blockquote>, <figure>, <table>, o <ul>.
Leggete di più su Collegamenti, pulsanti, submit e div di Adrian Roselli.
Nella sezione successiva, daremo un sguardo agli elementi di struttura HTML5 e a cosa il markup semantico assomiglia.
2. Strutturare con gli elementi di struttura HTML5
Molti elementi di HTML5 definiscono ruoli di riferimento ARIA come impostazione predefinita. Questi identificano sezioni di una pagina e aiutano gli utenti AT a navigarli ognuno. Per questo motivo tutto il contenuto dovrebbe essere all'interno di elementi semanticamente significativi in modo che non sia perso da parte dell'utente.
Questi sono gli elementi di riferimento più comuni:
| Elemento di HTML5 | Ruolo di riferimento predefinito |
|---|---|
<header> | banner |
<nav> | navigazione |
<main> | principale |
<aside> | complementare |
<footer> | Informazioni di contenuto |
Nota: i browser meno recenti e le combinazioni AT non necessariamente riconoscono gli elementi HTML5 e li mappano per i ruoli di riferimento corretti. In questi casi è possibile aggiungere i ruoli manualmente come questo: <header role="banner">.
Per ulteriori informazioni controllate il markup di esempio sulla pagina del manuale di WordPress sui punti di riferimento ARIA e la pagina di esempi dei punti di riferimento ARIA.
3. Rendere la gerarchia delle intestazioni chiara
Avete letto un articolo molto lungo senza intestazioni? Vi è sembrato difficile da leggere? Per me sicuramente. Le intestazioni aiutano gli utenti ad analizzare e comprendere rapidamente il contenuto della pagina. Allo stesso tempo le intestazioni danno agli utenti AT un modo per navigare il contenuto e definire la struttura della pagina.
Gli approcci variano, ma la mia raccomandazione è la stessa di quella descritta nella struttura delle intestazioni nello sviluppo dei temi:
- Utilizzare un solo unico H1 per pagina. Per la maggior parte dei temi, questo sarebbe il post, la pagina, o il titolo di archivio.
- Utilizzare da H2 ad H6 per dividere le sezioni della pagina, come le aree dei widget.
- Non saltare i livelli delle intestazioni perché che può essere fonte di confusione quando si naviga il contenuto utilizzando le intestazioni. Ciò significa che dopo arriva H2 c'è H3, non H4.
Nota: gli utenti possono rompere la gerarchia dell'intestazione quando immettono i propri contenuti utilizzando H1 o saltano i livelli delle intestazioni. Gli consiglio di orientarsi alla nostra documentazione su come utilizzare le intestazioni nel contenuto.
Utilizzo questi strumenti per il controllo della struttura delle intestazioni:
- Barra degli strumenti della mappa delle intestazioni per Chrome
- Barra degli strumenti della mappa delle intestazioni per Firefox
4. Navigare la pagina utilizzando la tecnologia assistiva
Finora abbiamo menzionato diversi modi per navigare la pagina: utilizzando collegamenti, intestazioni o punti di riferimento. E lo stesso vale per altri elementi HTML semantici come elenchi, tabelle o immagini.
Gli utenti di tecnologie assistive possono anche navigare utilizzando questi elementi. Ecco un breve video che illustra l'utilizzo del lettore di schermo Voiceover, qualcosa con cui sicuramente dovreste verificare il vostro tema:
Leggete di più sull'uso di Voiceover o date un'occhiata a questo articolo simile sull'uso di NVDA.
5. Considerare la navigazione da tastiera e gli stili di focus
Regola numero uno: non rimuovere gli stili di contorno utilizzando: focus {outline: none;}!
Ci sono un sacco di utenti che dipendono dalla tastiera e non possono utilizzare un mouse. Per gli utenti di tastiera è fondamentale avere stili di fuoco visivo su tutti gli elementi interattivi: i collegamenti, i campi modulo, i pulsanti e così via. In altre parole, gli utenti devono essere in grado di visualizzare quali elementi interattivi hanno lo stato attivo corrente durante la navigazione della pagina. I controlli da tastiera più comuni per la navigazione sono Tab, Maiusc + Tab, Invio, Spazio e i tasti freccia.
Nota: gli stili di messa a fuoco predefiniti dal browser non sono sempre la soluzione più accessibile — gli stili di struttura personalizzati sono a volte meglio.
Nota inoltre: a volte gli stili di contorno non sono il migliore approccio di progettazione perché non rispettano il raggio di confine di un elemento. Una soluzione consiste nell'utilizzare invece box-shadow, ma... stili di messa a fuoco dovrebbero funzionare in tutti gli scenari, come nella modalità contrasto elevato di Windows che rimuove gli stili box-shadow.
Ecco un bel trucco che utilizza un contorno trasparente per la modalità contrasto elevato di Windows.
1 |
:focus { |
2 |
box-shadow: inset 0 0 0 1px #6c7781; |
3 |
|
4 |
/* Only visible in Windows High Contrast mode */
|
5 |
outline: 2px solid transparent; |
6 |
|
7 |
}
|
Potete leggere ulteriori informazioni su questo argomento su Gutenberg PR 5138 e Trac ticket 41286.
D'altra parte la navigazione da tastiera non è solo sugli stili di messa a fuoco. Tutte le azioni devono essere possibili anche con la tastiera.
Un esempio comune è quando un utente non può navigare nelle voci di sottomenu utilizzando il tasto tab o utilizzando i tasti freccia. Lo starter theme Underscores ha una soluzione JavaScript per questo: ogni volta che un link del menu ha il focus o è offuscato, imposta o rimuove la classe .focus dal link del menu. Vedete la funzione toggleFocus.
Un altro esempio è quando la navigazione agisce in modo analogo a una finestra di dialogo modale, come una navigazione a schermo intero. In questi casi è importante impostare correttamente lo stato attivo.
6. Controllare il contrasto dei colori
Vedo ancora molti progetti con basso contrasto. Questo può rende impossibile agli utenti daltonici, agli utenti con problemi di vista o agli utenti che utilizzano monitor di bassa qualità di leggere il contenuto.
Il contrasto tra i colori di sfondo e di primo piano dovrebbe avere un rapporto di contrasto di
- 4.5: 1 per il testo normale.
- 3:1 per il testo di grandi dimensioni (equivalente a 24px o equivalente a 19px e grassetto).
Ci sono molti strumenti per controllare il contrasto di colore, come il correttore del rapporto di contrasto.
Troverete ulteriori informazioni in articoli come questo sull'uso dei colori e del contrasto di colore come requisito per temi pronti per l'accessibilità.
7. Ricordare gli Skip Link
Un link "passa al contenuto" permette un modo di saltare oltre tutti gli elementi supplementari prima del contenuto principale e andare dritti al contenuto. Forse vi starete chiedendo perché il riferimento <main> non è sufficiente poiché gli utenti AT possono navigare sul contenuto principale utilizzando i punti di riferimento? Infatti, il target principale degli skip link sono utenti di tastiere, che probabilmente non utilizzano dispositivi AT. Quindi non hanno scorciatoie a <main> o ad altri punti di riferimento.
In ogni caso, gli utenti AT ancora usano gli skip link secondo questo sondaggio sui lettori di schermo:
"È importante notare che mentre l'utilizzo è diminuito tra utenti di lettori di schermo,gli "skip" link ancora forniscono un notevole beneficio per gli altri utenti di tastiera".
Leggete di più su come utilizzare gli skip link nel manuale.
8. Evitare collegamenti testuali ripetitivi
Cercate di evitare collegamenti testuali ripetitivi come "Leggi tutto" o "Impara di più". Per gli utenti con lettori di schermo che navigano usando i collegamenti il risultato può apparire come questo:
Il tema Twenty Seventeen ha buoni esempi di come aggiungere il titolo del post nell'estratto:
1 |
/**
|
2 |
* Replaces "[...]" (appended to automatically generated excerpts) with ... and
|
3 |
* a 'Continue reading' link.
|
4 |
*
|
5 |
* @since Twenty Seventeen 1.0
|
6 |
*
|
7 |
* @param string $link Link to single post/page.
|
8 |
* @return string 'Continue reading' link prepended with an ellipsis.
|
9 |
*/
|
10 |
|
11 |
function twentyseventeen_excerpt_more( $link ) { |
12 |
|
13 |
if ( is_admin() ) { |
14 |
return $link; |
15 |
}
|
16 |
|
17 |
$link = sprintf( |
18 |
'<p class="link-more"><a href="%1$s" class="more-link">%2$s</a></p>', |
19 |
esc_url( get_permalink( get_the_ID() ) ), |
20 |
|
21 |
/* translators: %s: Name of current post */
|
22 |
|
23 |
sprintf( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) ) |
24 |
);
|
25 |
|
26 |
return ' … ' . $link; |
27 |
|
28 |
}
|
29 |
|
30 |
add_filter( 'excerpt_more', 'twentyseventeen_excerpt_more' ); |
Per i lettori di schermo, il testo del link sarebbe poi letto come "Continua a leggere il titolo del post". Ecco un esempio simile per il contenuto:
1 |
/* translators: %s: Name of current post */
|
2 |
the_content( |
3 |
|
4 |
sprintf( |
5 |
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), |
6 |
get_the_title() |
7 |
)
|
8 |
|
9 |
);
|
10 |
La classe screen-reader-text nasconde visivamente il titolo del post, ma utenti con lettori di schermo possono ancora accedere al testo. Controllate l'ultimo esempio di codice di testo per lettore di schermo nel manuale.
Conclusione
Abbiamo solo toccato la superficie dell'accessibilità nei temi di WordPress, ma speriamo che questo ti farà iniziare. L'HTML semantico e il sapiente uso dei CSS andrà lontano.
Ricordatevi di controllare tutte le linee guida sull'accessibilità per i temi e leggete ulteriori suggerimenti nel manuale di accessibilità.
