SVG accessibili: modelli perfetti per gli utenti di screen reader
Pubblicato: 2022-03-10Sebbene gli Scalable Vector Graphics (SVG) siano stati introdotti per la prima volta alla fine degli anni '90, hanno visto un'enorme rinascita di popolarità nell'ultimo decennio grazie alla loro estrema flessibilità, alta fedeltà e relativa leggerezza in un mondo in cui la larghezza di banda e le prestazioni contano più che mai . I progressi in JavaScript e l'introduzione di media query CSS come @prefers-color-scheme e @prefers-reduced-motion hanno esteso la funzionalità degli SVG ben oltre il loro caso d'uso iniziale di semplice visualizzazione di immagini vettoriali su un sito web.
Con l'avanzare della tecnologia SVG, anche la nostra comprensione di come progettiamo e sviluppiamo SVG deve progredire. Parte di tale avanzamento include la considerazione dell'impatto di tali progetti e codice sugli esseri umani reali, ovvero i nostri utenti finali.
Questo articolo delinea dodici distinti modelli SVG trovati "in natura" e ciascuna descrizione alternativa annunciata quando vi si accede da diverse combinazioni di sistemi operativi, browser e lettori di schermo.
Naturalmente, i seguenti esempi non intendono essere un elenco esaustivo di tutti i possibili modelli utilizzati nella sfera digitale, ma evidenziano alcuni dei modelli SVG più popolari o onnipresenti che potresti incontrare. Continua a leggere per scoprire quali pattern SVG dovresti evitare e quali sono i più inclusivi!
Descrizioni alternative di base che utilizzano il <img>
Il primo gruppo di quattro modelli utilizza il tag <img> che si collega a un file SVG. Questa è una buona scelta per immagini di base e semplici sul tuo sito Web, app o altri prodotti digitali. Sebbene lo svantaggio dell'utilizzo di questo modello sia che non è possibile controllare facilmente molti elementi visivi o animazioni come un SVG in linea, questo modello dovrebbe rendere le immagini nel complesso più leggere e veloci e consentire una manutenzione più semplice sugli SVG che utilizzi in più posizioni.
Schema n. 1: <img> + alt="[words]"
<img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Schema n. 2: <img> + role="img" + alt="[words]"
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Schema n. 3: <img> + role="img" + aria-label="[words]"
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Schema n. 4: <img> + role="img" + aria-labelledby="[ID]"
<p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Descrizioni alternative di base che utilizzano il <svg>
Il secondo gruppo di quattro modelli utilizza il tag <svg> con un file SVG inline. Sebbene l'aggiunta del codice SVG direttamente nel markup possa potenzialmente rendere la pagina un po' più lenta da caricare, tale minore inefficienza sarà compensata da un maggiore controllo sugli elementi visivi o sulle animazioni delle immagini. Aggiungendo direttamente il tuo SVG all'HTML, hai anche più opzioni quando si tratta di fornire informazioni sull'immagine agli utenti del tuo screen reader.
Schema n. 5: <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Schema n. 6: <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> Schema n. 7: <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Schema n. 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> Descrizioni alternative estese utilizzando il <svg>
L'ultimo gruppo di quattro modelli utilizza il tag <svg> con un file SVG inline, proprio come il secondo gruppo. Tuttavia, in questo caso, stiamo estendendo le semplici descrizioni alternative con informazioni aggiuntive a causa della complessità dell'immagine.
Questa sarebbe una buona scelta di modelli per immagini più complicate che richiedono maggiori spiegazioni. Tuttavia, è importante tenere a mente che ci sono alcune persone con disabilità, come i disturbi cognitivi, che potrebbero trarre vantaggio dall'avere queste informazioni aggiuntive sull'immagine prontamente disponibili sullo schermo invece che sepolte nel codice SVG.
A seconda del tipo e della quantità di informazioni che devi aggiungere al tuo SVG, potresti considerare di adottare un approccio completamente diverso.
Schema n. 9: <svg> + role="img" + <title> + <text>
<svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg> Schema n. 10: <svg> + role="img" + <title> + <desc>
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Pattern #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Pattern #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Vedi il CodePen completo [Confronto di modelli SVG accessibili (versione Fox)](https://codepen.io/smashingmag/pen/dyvvbKj) di Carie Fisher.
Vincitori e perdenti del modello SVG
Eseguendo vari screen reader su diverse combinazioni di sistemi operativi e browser, vediamo emergere modelli definiti nella tabella dei risultati finali. Ci sono alcuni chiari vincitori e vinti di pattern SVG , oltre ad alcuni pattern da qualche parte nel mezzo che potresti implementare fintanto che ne sei a conoscenza e che puoi accettare i loro limiti. Osservando la tabella dei risultati, possiamo concludere quanto segue:
Descrizioni alternative di base che utilizzano il <img> (gruppo 1)
Il migliore in mostra
- Schema 2 :
<img> + role="img"+alt="[words]" - Schema 3 :
<img>+role="img"+aria-label="[words]"
Fai attenzione
- Schema 4 :
<img>+role="img"+aria-labelledby="[ID]"
Non consigliato
- Schema 1 :
<img>+alt="[words]"
Descrizioni alternative di base utilizzando il <svg> (gruppo 2)
Il migliore in mostra
- Schema 5 :
<svg>+role="img"+<title> - Pattern 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
Fai attenzione
- Pattern 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
Non consigliato
- Schema 6 :
<svg>+role="img"+<text>
Descrizioni alternative estese utilizzando il <svg> (gruppo 3)
Il migliore in mostra
- Pattern 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
Nota : sebbene questo modello non sia perfetto poiché ripeteva descrizioni alternative, non ha ignorato nessuno degli elementi del test, a differenza dei modelli "usa cautela".
Fai attenzione
- Schema 9 :
<svg>+role="img"+<title>+<text> - Schema 10 :
<svg>+role="img"+<title>+<desc> - Pattern 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
Non consigliato
- Nessuno dei modelli in questo gruppo ha completamente fallito i test.
Risultati dei test
Guarda la penna [Risultati dei test](https://codepen.io/smashingmag/pen/YzZQBwG) di Carie Fisher.
Avvolgendo
È importante notare che parte dell'interpretazione dei risultati dei test dei pattern SVG consiste nel comprendere che i creatori di ogni screen reader hanno uno o più browser consigliati che supportano completamente. Questo non significa che non dovresti o non potresti usare uno screen reader su un browser diverso, significa solo che se lo fai, i risultati potrebbero non essere accurati come se avessi usato quello/i consigliato/i.
Il test del modello per questo articolo includeva alcune combinazioni di browser e lettori di schermo che potrebbero rientrare nella categoria "marginale", ma ci sono anche note su quali combinazioni di sistemi operativi, browser e lettori di schermo sono consigliate per i tuoi test. I risultati di questi test dovrebbero aiutarti a prendere la migliore decisione possibile sul modello SVG, in base alle tue esigenze e vincoli del modello.
Un promemoria che prima di definire uno schema, assicurati di conoscere le basi su come e quando creare immagini accessibili e di aver compreso appieno le informazioni alternative richieste necessarie per i diversi tipi di immagine.
Se hai bisogno di ulteriore aiuto per decidere quale modello utilizzare per il tuo ambiente, consulta l'articolo Buono, migliore, migliore: districare il complesso mondo dei modelli accessibili per aiutarti a navigare nelle acque difficili dei modelli accessibili. Armati di tutte queste informazioni e solo un piccolo sforzo, i tuoi SVG sono sulla buona strada per essere più inclusivi per tutti.
Nota del redattore : puoi apprendere le migliori pratiche sull'accessibilità con Carie nel suo prossimo seminario online sui modelli di front-end accessibili, con linee guida, strumenti di test, tecnologia assistiva e modelli di progettazione inclusivi. In linea e dal vivo.