Share
Nel mondo confuso delle applicazioni Web, ARIA può contribuire a migliorare l'accessibilità e la facilità d'uso delle tue creazioni. HTML non è in grado di gestire molti tipi di relazione tra gli elementi della pagina, ma ARIA è l'ideale per quasi tutti i tipi di impostazioni che si possono ottenere. Diamo un'occhiata a cosa è ARIA, come può essere applicato alla tua app Web e alcune ricette rapide che puoi utilizzare per i tuoi siti.
ARIA, chiamato anche WAI-ARIA, è l'acronimo di Web Accessibility Initiative-Accessible Rich Internet Applications. Questa iniziativa, aggiornata dal W3C, mira a fornire agli sviluppatori un nuovo set di schemi e attributi per rendere le loro creazioni più accessibili. In particolare mira a coprire le lacune inerenti lasciate da HTML. Se non hai familiarità con ciò che fa già, dovresti dare un'occhiata al nostro primer su ARIA. Potresti anche essere interessato ai nostri articoli su ARIA per la home page e ARIA per eCommerce.
In breve, però, ARIA ha tre caratteristiche principali su cui ci concentreremo:
Accentsconagua
Aria-live attributo fornisce agli screen reader e ad altri dispositivi un listener per quando il contenuto della pagina cambia. Ciò consente una comunicazione più semplice di quando il contenuto sullo schermo cambia.Prima, abbiamo cercato di aggiungere ARIA agli elementi comuni delle pagine di e-commerce e delle home page dei siti. Con le app Web, tuttavia, ognuna differisce drasticamente dall'ultima. I moduli e le funzioni cambiano tra ogni app e spesso anche tra le versioni della stessa app. Per questo motivo, tratteremo le nostre implementazioni qui come le ricette in un libro di cucina piuttosto che una conversione all'ingrosso di una pagina.
Quando si tratta di app web, l'intento di un utente è più difficile da discernere in senso generale. Con eCommerce, indipendentemente dal sito in cui ti trovi, è probabile che i visitatori stiano cercando di acquistare un prodotto o un servizio. Le app Web hanno una varietà di scopi, quindi, ci concentreremo sulla creazione di controlli più sfumati che siano accessibili e di facile utilizzo.
Entriamo in alcuni di questi tipi di controllo.
Il primo controllo che vedremo è un valore visualizzato aggiornato da una pressione di un pulsante. Questi tipi di controlli sono comunemente visti dove un elemento sta visualizzando una quantità che può essere regolata con i pulsanti etichettati '+' e '-', ma può assumere molte forme, come i pulsanti freccia che consentono di scorrere gli stati predefiniti.
Un'implementazione standard può lasciare delle lacune nella comprensione per l'utente. Non è chiaro quali elementi influenzano i pulsanti, come li influenzano e quando il valore dell'elemento cambia.
Di seguito, useremo ARIA per creare una connessione tra i pulsanti e l'elemento di visualizzazione del valore usando il Aria-controlli attributo. Quindi, renderemo chiaro l'uso dei pulsanti usando Aria-label e HTML . Infine, utilizzeremo l'aria mettere in guardia ruolo e il Aria-live attributo per far sapere al nostro utente quando il valore viene aggiornato.
Diamo un'occhiata a come appare questo codice:
Quando si adotta un sito con ARIA, è comune utilizzare "accessibilità progressiva". L'idea alla base di questo termine è che l'acquisizione di un sito o di un'app Web dalla sua forma base a completamente accessibile è un compito scoraggiante. Per far fronte a questo in un modo che continua a muoversi, è possibile implementare le nuove funzionalità progressivamente e in modo iterativo.
Per una descrizione dei comandi con un popup o modale correlato, ciò significa che possiamo suddividere il problema in due passaggi, arrotolandoli ciascuno come possibile. In questo caso, il tooltip di cui stiamo parlando è l'immagine comune di un piccolo punto interrogativo che apre ulteriori informazioni quando si libra sopra.
Per far sapere agli utenti che l'immagine del punto interrogativo è in realtà un suggerimento, l'abbiamo definita usando un ruolo appropriato, come questo:
Ci sono alcuni problemi con questa implementazione, però. Gli utenti potrebbero ancora non essere consapevoli del fatto che il passaggio del mouse sopra la descrizione comandi avvia un popup con ulteriori informazioni. Ecco come possiamo aggiungerlo al nostro codice:
Invece di un suggerimento basato su hover, è anche comune per un'app Web utilizzare i moduli in cui ogni input ha il proprio tooltip associato.
Senza ulteriore markup ARIA, può essere difficile dire quali sono i tooltip applicabili a quale input per un utente. Non avere questa relazione in atto può rendere il tuo testo di aiuto inutile in alcuni casi.
Per correggere questo, avvolgeremo i nostri tooltip all'interno dei propri elementi. Ognuno di questi può essere annidato vicino al loro input correlato, avere le loro relazioni stabilite con ARIA, e quindi può essere attivato con JavaScript (o semplicemente CSS se sei furbo).
Ecco come potrebbe apparire:
"Il nostro servizio è attualmente inattivo", "Il tuo account è sospeso" e gli avvisi relativi allo stato sono comunemente usati tra le app Web e mostrano informazioni importanti per gli utenti. Senza ARIA, possono essere sepolti all'interno delle informazioni su una pagina e causare una serie di problemi.
Utilizzando l'ARIA mettere in guardia ruolo e il Aria-live attributo, possiamo assicurarci che i nostri utenti siano a conoscenza di eventuali problemi rapidamente una volta arrivati su una pagina.
Possiamo impostare questo tipo di avviso di stato in questo modo:
Il sistema è offline!
Infine, diamo un'occhiata a un altro elemento di controllo comune utilizzato nelle app Web: la barra degli strumenti. Per i nostri scopi, stiamo marciando una barra degli strumenti che funziona in questo modo: la nostra app Web mostra una grande quantità di dati, orientati in una tabella. Sopra questa tabella, la nostra barra degli strumenti ha diversi pulsanti che consentono agli utenti di ordinare la tabella in vari modi. Questi pulsanti includono opzioni di ordinamento classiche come Dalla A alla Z e Dalla Z alla A.
Relativamente, questi lasciano alcuni problemi relativi all'accessibilità. Innanzitutto, non è chiaro se quei pulsanti influenzano il tavolo: lo risolveremo usando il Aria-controlli attributo. Inoltre, non è chiaro che i pulsanti siano associati tra loro, il che potrebbe essere un'informazione utile per i nostri utenti. Per definire questo, useremo il barra degli strumenti ruolo. Infine, un utente non sa necessariamente quale pulsante è stato premuto per ultimo. Per correggere questo, useremo il Aria-pressato attributo.
Quando si usa il Aria-pressato attributo, è importante notare che dovrai aggiornare questi elementi mentre l'utente interagisce con loro. Questo probabilmente richiederà la modifica degli attributi tramite JavaScript o jQuery.
Ecco come appare il nostro codice della barra degli strumenti:
Con questa manciata di nuovi schemi di controllo e relazioni, sei sulla buona strada per rendere la tua app web completamente accessibile! Dopo aver aggiunto questi nuovi markup, pensa a come potresti applicare questi attributi ad altre parti dell'interfaccia utente per massimizzare l'usabilità della tua creazione.
Ci sono attributi, ruoli o altre funzionalità di ARIA che vorresti sapere? O forse hai qualche domanda sulle tue implementazioni o correzioni per questo articolo? Entra in contatto usando la sezione commenti qui sotto o taggando kylejspeaker su Twitter!
