Implementare il supporto per il screen reader

Completato

Esistono tre approcci generali per implementare l'accessibilità.

• Controlli semantici (intrinseci)
• Controlli personalizzati
• Controlli alternativi

Esaminiamo ognuno di questi approcci.

Controlli semantici (intrinseci)

Per prima cosa, usa i controlli semantici e lascia che la fondazione gestisca la maggior parte del lavoro per te. I controlli intrinseci sono elementi HTML predefiniti, ad esempio pulsanti, collegamenti e campi modulo che includono funzionalità di accessibilità intrinseche. Ad esempio, l'uso di un <tag pulsante> invece di un div< con stile> garantisce che il pulsante sia accessibile per impostazione predefinita, con il nome proveniente dal contenuto del tag e il ruolo "button". Ecco alcune considerazioni per i controlli intrinseci comuni:

Testo statico (<span>)

Assicurarsi che il testo statico sia significativo e fornisca contesto. In questo esempio di testo statico in HTML, il nome è il contenuto del tag e il ruolo è testo.

<span>Office privacy settings give you control over your experience and data.</span>

Name   Office privacy settings give you control over your experience and data.
Role     text

Immagine (<img>)

Per un'immagine, usare il <tag img> . Nell'esempio il nome deriva dall'attributo alt e il ruolo è immagine. Usare l'attributo alt per fornire un'alternativa di testo per le immagini.

<img src="SmartArt2.png" alt="Alternating Hexagons">

Name   Alternating Hexagons
Role     image

Pulsante (<pulsante>)

Per un pulsante, usare il <button> tag o type=button. Questo è molto meglio che utilizzare una divisione e aggiungere stile e gestori di eventi per farlo sembrare e comportare come un pulsante. Usare un pulsante per taggarlo e applicare lo stile desiderato usando CSS. Assicurarsi che i pulsanti abbiano testo descrittivo per comunicare il loro scopo. Nell'esempio, il nome deriva dal contenuto del tag e il ruolo è il pulsante.

<button>End Session</button> 

Name   End Session
Role     button

Collegamento (<a>)

Per creare un collegamento, utilizzare il tag <a> anziché un <span> con stile e gestori di eventi. Nell'esempio, il nome del collegamento proviene dal contenuto all'interno del tag e il suo ruolo è di collegamento. I collegamenti hanno anche un valore, ovvero l'URL specificato nell'attributo href . Usare il testo descrittivo del collegamento per indicare la destinazione del collegamento. In genere, non è consigliabile usare l'URL come nome o testo visualizzato del collegamento perché gli URL possono essere lunghi e potrebbero non indicare chiaramente lo scopo del collegamento. Evitare di usare collegamenti vuoti; se un collegamento non contiene contenuto, è preferibile usare un pulsante.

<a href=”https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25”>Learn more about accessibility in PowerPoint</a>

Name   Learn more about accessibility in PowerPoint
Role     Link
Value   https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25

In Assistente vocale di Windows alcune informazioni aggiuntive su un elemento non vengono lette nemmeno al livello di dettaglio più elevato. Sono inclusi l'URL di un collegamento ipertestuale, che fa parte di queste informazioni aggiuntive. Per impostazione predefinita, questa impostazione è disattivata, quindi l'URL non viene letto. Tuttavia, dopo aver attivato l'impostazione, l'URL verrà letto. Questa impostazione controlla anche la lettura delle descrizioni e del testo della Guida.

Casella di controllo (<input type="checkbox">)

Per le caselle di controllo, usare <input type="checkbox"> e usare un tag di etichetta per l'etichetta. Nell'esempio il nome deriva dal contenuto del tag di etichetta e il ruolo deriva dall'attributo di tipo . Ogni tipo di input ha un proprio ruolo, ad esempio radio, testo e così via. La casella di controllo ha anche un valore. Proviene dall'attributo controllato.

<label for=”checkboxId”>Always Use Subtitles</label>
<input type=”checkbox” id=”checkboxId” checked>


Name   Always Use Subtitles
Role     checkbox
Value   ToggleState_On

Controlli personalizzati

Se i controlli semantici/intrinseci non soddisfano le proprie esigenze, potrebbe essere necessario implementare controlli personalizzati. Molti sviluppatori Web hanno appreso che possono aggiungere gestori di stili ed eventi a un <div> per renderlo simile e agire nel modo desiderato, creando controlli personalizzati in questo modo. Tuttavia, è necessario un lavoro aggiuntivo per rendere accessibili questi controlli personalizzati. Devono essere operabili sia con la tastiera che con il mouse e le informazioni semantiche devono essere esposte per rappresentarle correttamente nell'albero di accessibilità.

Gli utenti dell'utilità per la lettura dello schermo usano il tipo di controllo per determinare come interagire con un controllo specifico. I controlli personalizzati devono essere usati solo come ultima risorsa e, se il tipo di controllo non è mappabile ai controlli noti esistenti, devono essere forniti un testo esplicativo o altre informazioni per guidare gli utenti nell'interazione con il controllo tramite la tastiera.

Nel 2014, il W3C ha pubblicato lo standard ARIA (Accessible Rich Internet Applications), che consente agli sviluppatori Web di fornire la semantica necessaria per i controlli personalizzati accessibili. Ad esempio, se si dispone di un elemento grafico SVG che si vuole usare come pulsante di attivazione/disattivazione, è possibile aggiungere un attributo aria-label per specificare un nome e un role="button" per definirne il ruolo nell'albero di accessibilità. Inoltre, è possibile utilizzare l'attributo aria-pressed per specificare lo stato di attivazione dell'interruttore.

<svg role=”button” aria-label=”Bullets” aria-pressed=”true”
	tabindex=”0” xmlns=”http://www.w3.org/2000/svg” width=”32”
	height=”32” viewBox=”0,0,2048,2048”>
		<!-- paths -->
	</svg>

Name    Bullets
Role      button
Value    ToggleState_On

Risorse

• ARIA e automazione dell'interfaccia utente in Microsoft Edge
• Panoramica WAI-ARIA
• Guida alle procedure di creazione ARIA

Controlli alternativi

In rari casi, potrebbe essere necessario creare una rappresentazione alternativa, ma dovrebbe essere un'ultima risorsa. Ciò comporta la creazione di elementi separati per il rendering nella pagina rispetto a ciò che è esposto nell'albero di accessibilità per i lettori di schermo. Ad esempio, è possibile usare** aria-hidden="true"** per nascondere un elemento dall'albero di accessibilità pur visualizzandolo nella pagina.

<!- - visible on page, but not to screen reader  - - >
<div aria-hidden=”true”>
</div>

<!- - visible to screen reader, but not on page  - - >
,div class=”srOnly” role=”menu” aria-label=”More options”>
</div>

Cerca sempre di creare un'esperienza armonica tra il contenuto sottoposto a rendering e l'esperienza di lettura dello schermo, in quanto alcuni utenti dell'utilità per la lettura dello schermo hanno qualche vista e lo usano insieme all'utilità per la lettura dello schermo o cercano assistenza da colleghi avvistati occasionalmente.

Per rendere un elemento non visibile nella pagina, ma ancora incluso nell'albero di accessibilità, è possibile usare tecniche CSS come posizionare l'elemento fuori schermo o ritagliarlo. Tuttavia, usando display: none o visibility: hidden non funzionerà, poiché i browser escludono questi elementi dall'albero di accessibilità. È importante specificare correttamente il nome, il ruolo e il valore degli elementi per assicurarsi che siano accessibili.

Nome

Il nome può essere definito usando attributi come aria-labelby, aria-label, il contenuto di un <tag di etichetta> o l'attributo alt se si tratta di un <tipo di input img> o input type="image". È anche possibile usare il contenuto del tag, l'attributo title , l'attributo aria-describedby o l'attributo aria-description . Le ultime tre sono opzioni di fallback se non vengono specificate altre opzioni. In questo modo viene assegnato l'ordine di priorità per il calcolo del nome.

• Un nome valido per un elemento deve idealmente usare l'etichetta visibile. Ad esempio, un controllo spin per impostare l'altezza di una riga in una tabella deve usare "altezza riga tabella" anziché semplicemente "altezza" per fornire più contesto.
• Assicurarsi sempre di includere l'etichetta visibile nel nome per assicurare la coerenza tra lo schermo e il lettore di schermo.
• Evitare di includere il tipo di controllo (ad esempio "spin control") nel nome, poiché questo viene già indicato nel ruolo.
• Assicurarsi che i nomi siano sempre brevi per mantenere l'efficienza per utenti dell'utilità per la lettura dello schermo ed esporre l'intervallo di valori consentiti in altre proprietà.
• Per le immagini, evitare di usare dettagli irrilevanti nel testo alternativo. Fornire invece descrizioni contestualmente pertinenti, ad esempio "Persona che presenta a un podio con didascalie sullo schermo".
• Se un'immagine non è importante per comprendere il contenuto, usare alt="" per escluderlo dall'albero di accessibilità, ma non omettere completamente l'attributo alt.

Ruolo

Il ruolo di un elemento è determinato dall'attributo del ruolo , se specificato. È determinato dall'attributo type se non è specificato e si usa un'etichetta <input>. Per altri tipi di tag (<img>, <a>, <pulsante> e così via), è determinato dal tipo di tag.

Valore

Il valore si riferisce a proprietà come aria-checked, aria-pressed, aria-expanded, aria-selected e aria-disabled, a seconda del tipo di controllo. Per <i tag di input> , viene usato l'attributo selezionato o disabilitato e per i collegamenti che usano <un> tag viene usato l'attributo href .

La corretta definizione di queste proprietà garantisce che le tecnologie di assistive technology possano interpretare e interagire accuratamente con gli elementi.

Risorsa

CSS in azione: Contenuto invisibile solo per gli utenti dell'utilità per la lettura dello schermo

Specifica lingua

Per garantire che le nostre app siano accessibili agli utenti in tutto il mondo, le localizziamo in più lingue. Ciò include la localizzazione di tutti i nomi esposti al lettore di schermo, che devono essere recuperati dalle risorse localizzate. Le utilità per la lettura dello schermo possono leggere testo in varie lingue, ma l'app deve specificare la lingua di ogni elemento usando l'attributo lang . Impostare la lingua per l'intera pagina usando l'attributo lang del tag HTML. Specificare quindi la lingua per i singoli elementi in cui la lingua è diversa dall'elemento padre. In questo modo, i screen reader pronunciano correttamente il testo. Poiché il linguaggio viene ereditato dall'elemento padre, è sufficiente eseguire questa operazione solo nei tag in cui si usa una lingua diversa rispetto all'elemento padre. Quindi, se l'intera esperienza utente si trova nella stessa lingua, è necessario specificarla una sola volta nel tag HTML.

<p lang="en-us">This is English text</p>
<p lang="fr-fr">C'est Français texte</p>
<p lang="zh-cn">&#36825;&#26159;&#20013;&#25991;&#30430;</p>

Specify the lang attribute on the <html> tag
Specify the lang attribute on any tag that uses a different language than its parent
Narrator reads the text in each language properly
If lang attribute is specified
And Text-to-Speech is installed for that language

Due (2) elementi devono essere applicati per consentire all'Assistente vocale di leggere il testo nella lingua corretta: l'attributo lang e l'utente deve installare la sintesi vocale per tali lingue. In genere, lo avrebbero fatto per le lingue con cui funzionano, ma quando si testano questi scenari, assicurarsi di installare prima la sintesi vocale per tali lingue. Specificare correttamente il linguaggio consente alle utilità per la lettura dello schermo di fornire una navigazione accurata ed efficiente per gli utenti.