L'albero dell'accessibilità

Introduzione all'albero dell'accessibilità

Alice Boxhall

Dave Gash

Meggin Kearney

Immagina di creare un'interfaccia utente solo per gli utenti di screen reader. In questo caso non è necessario creare alcuna UI visiva, ma fornire abbastanza informazioni utilizzabili dallo screen reader.

Creeresti un tipo di API che descrive la struttura della pagina, all'API DOM, ma con meno informazioni e meno nodi perché molte di queste informazioni sono utili solo per la presentazione visiva. it potrebbe avere un aspetto simile a questo.

Si tratta essenzialmente di ciò che il browser presenta effettivamente allo screen reader. La prende la struttura DOM e la modifica in un formato utile per tecnologie per la disabilità. Questo albero modificato viene chiamato Accessibilità Albero.

L'albero dell'accessibilità potrebbe essere simile a una vecchia pagina web anni '90: alcune immagini, molti link, forse un campo e un pulsante.

La scansione visiva di una pagina come questo caso offre un'esperienza simile i vantaggi che gli utenti di screen reader otterranno. L'interfaccia è presente, ma è semplice e diretta, proprio come un'interfaccia ad albero dell'accessibilità.

L'albero dell'accessibilità è ciò con cui interagisce la maggior parte delle tecnologie per la disabilità. La un flusso di dati simile a questo.

1. Un'applicazione (il browser o un'altra app) espone una versione semantica della sua UI per le tecnologie per la disabilità tramite un'API.
2. La tecnologia per la disabilità può utilizzare le informazioni lette tramite l'API per creare una presentazione alternativa dell'interfaccia utente per l'utente. Ad esempio: uno screen reader crea un'interfaccia in cui l'utente sente una voce rappresentazione dell'app.
3. Le tecnologie per la disabilità possono anche consentire all'utente di interagire con l'app in in modo diverso. Ad esempio, la maggior parte degli screen reader fornisce ganci per consentire a all'utente per simulare facilmente un clic del mouse o un tocco con un dito.
4. La tecnologia per la disabilità rimanda l'intenzione dell'utente (ad esempio, "clic") a l'app tramite l'API Accessibility. L'app ha quindi la responsabilità a interpretare l'azione in modo appropriato nel contesto dell'interfaccia utente originale.

Per i browser web, c'è un passaggio in più in ogni direzione perché il browser è di fatto una piattaforma per le app web che vengono eseguite al suo interno. Quindi il browser deve tradurre l'app web in un albero dell'accessibilità e deve assicurarsi che gli eventi appropriati vengono attivati in JavaScript in base alle azioni dell'utente che avvengono dalle tecnologie per la disabilità.

Tuttavia, questa è tutte le responsabilità del browser. Il nostro lavoro di sviluppatori web è tenere presente che sta succedendo e sviluppare pagine web che sfruttino di questo processo per creare un'esperienza accessibile per i nostri utenti.

Per farlo, ci assicuriamo di esprimere correttamente la semantica delle nostre pagine: assicurandoti che gli elementi importanti della pagina siano accessibili correttamente ruoli, stati e proprietà. Inoltre, specifichiamo i nomi accessibili descrizioni. Il browser può quindi consentire l'accesso alle tecnologie per la disabilità informazioni per creare un'esperienza personalizzata.

Semantica in HTML nativo

Un browser può trasformare l'albero DOM in un albero di accessibilità perché gran parte Il DOM ha un significato semantico implicito. Ciò significa che il DOM utilizza HTML nativo di elementi riconosciuti dai browser e che funzionano in modo prevedibile su una varietà piattaforme di terze parti. L'accessibilità per gli elementi HTML nativi come link o pulsanti è gestito automaticamente. Possiamo sfruttare l'accessibilità integrata scrivendo un codice HTML che esprime la semantica degli elementi della pagina.

Tuttavia, a volte utilizziamo elementi che hanno l'aspetto di elementi nativi, ma non lo sono. Ad esempio, questo "pulsante" non è affatto un pulsante.

Potrebbe essere creato in HTML in vari modi: un modo è mostrato di seguito.

<div class="button-ish">Give me tacos</div>

Quando non utilizziamo un vero elemento pulsante, lo screen reader non ha modo di saperlo su cosa è atterrato. Inoltre, dovremo fare il lavoro aggiuntivo di aggiungere tabindex per renderlo utilizzabile solo da tastiera perché, poiché ora è codificato, può essere usato solo con un mouse.

Puoi risolvere facilmente il problema utilizzando un elemento button normale anziché un div. L'utilizzo di un elemento nativo offre anche il vantaggio di gestire la tastiera interazioni per noi. Ricorda che non dovrai rinunciare alle tue immagini accattivanti solo perché usi un elemento nativo; puoi applicare stili agli elementi nativi farle sembrare nel modo desiderato, mantenendo la semantica e comportamento degli utenti.

In precedenza abbiamo notato che gli screen reader annunceranno il ruolo di un elemento, il nome lo stato e il valore. Usando l'elemento semantico corretto, il ruolo, lo stato e il valore ma dobbiamo anche assicurarci che il nome di un elemento rilevabili.

In generale, esistono due tipi di nomi:

• Etichette visibili, utilizzate da tutti gli utenti per associare un significato a un e
• Alternative di testo, che vengono utilizzate solo quando non è necessario un elemento visivo dell'etichetta.

Per gli elementi a livello di testo non occorre fare nulla, perché per definizione avranno dei contenuti testuali. Tuttavia, per gli elementi di input o di controllo e le contenuti come le immagini, dobbiamo assicurarci di specificare un nome. Infatti, la fornitura di alternative testuali per qualsiasi contenuto non testuale è molto primo elemento dell'elenco di controllo di WebAIM.

Un modo per farlo è seguire il consiglio che gli input del modulo hanno le etichette di testo associate". Esistono due modi per associare un'etichetta a un modulo come una casella di controllo. Entrambi i metodi fanno sì che il testo dell'etichetta venga diventare un target di clic per la casella di controllo, che è utile anche per il mouse o per gli utenti con touchscreen. Per associare un'etichetta a un elemento:

• Posiziona l'elemento di input all'interno di un elemento di etichetta

<label>
    <input type="checkbox">Receive promotional offers?
</label>

o

• Utilizza l'attributo for dell'etichetta e fai riferimento all'elemento id dell'elemento

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Quando la casella di controllo è stata etichettata correttamente, lo screen reader può segnalare che l'elemento ha il ruolo di casella di controllo, è in stato di selezione ed è denominato "Ricevi offerte promozionali?".