Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Accessibility
Code

ARIA in pratica: Ricette di accessibilità per le applicazioni web

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility for eCommerce
Best Practices for ARIA Implementation

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Nel confuso mondo delle applicazioni web, ARIA può contribuire a migliorare l'accessibilità e la facilità d'uso per le vostre creazioni. HTML non è in grado di gestire molti tipi di relazione tra gli elementi della pagina, ma ARIA è l'ideale per quasi ogni tipo di installazione che si può elaborare. Diamo un'occhiata a cos'è ARIA, come si può applicare alla vostra applicazione web e alcune ricette veloci che è possibile utilizzare per i propri siti.

Nozioni di base di ARIA

ARIA, anche chiamato WAI-ARIA, è l'acronimo di Web Accessibility Initiative-Accessible Rich Internet Applications. Questa iniziativa, aggiornata dal W3C, intende offrire agli sviluppatori un nuovo insieme di schemi e attributi per rendere più accessibili le loro creazioni. In particolare esso mira a coprire le lacune inerenti lasciate da HTML. Se non avete familiarità con ciò che fa già, dovreste dare un'occhiata alla nostra guida su ARIA. Potreste anche essere interessati ai nostri pezzi su ARIA per la Homepage e ARIA per l'eCommerce.

Brevemente, però, ARIA ha tre caratteristiche principali su cui concentreremo:

  1. Creare relazioni al di fuori dell'associazione padre-figlio: HTML consente solo relazioni tra gli elementi padre e figlio, ma le associazioni che vogliamo definire non sempre sono nidificate all'interno di altro. ARIA ci permette di definire le relazioni dell'elemento al di fuori di questo vincolo.
  2. Definire controlli avanzati e l'interattività: HTML copre molti elementi dell'interfaccia utente di base, ma ci sono molti comandi più avanzati che sono utilizzati in tutto il web che sono difficili da definire al di fuori della loro componente visiva. ARIA aiuta in questo.
  3. Fornire accesso agli attributi dell'aggiornamento dell'area "live": l'attributo aria-live dà ai lettori di schermo e agli altri dispositivi un listener per quando il contenuto sulla pagina cambia. Questo consente la comunicazione più facile di quando il contenuto sullo schermo cambia.

ARIA e le applicazioni web

Prima, abbiamo visto l'aggiunta di ARIA agli elementi comuni delle pagine eCommerce e dell'Homepage del sito. Con le applicazioni web, tuttavia, ciascuno di essi si differenzia drasticamente dall'ultimo. I moduli e le funzioni si spostano tra ogni app e spesso anche tra le versioni della stessa app. Per questo motivo, tratteremo qui le nostre implementazioni come le ricette in un libro di cucina piuttosto che una conversione in blocco di una pagina.

Quando si tratta di applicazioni web, lo scopo di un utente è più difficile da discernere in senso generalizzato. Con l'eCommerce, non importa su quale sito siete, è probabile che i visitatori stiano cercando di acquistare un prodotto o un servizio. Le applicazioni web servono una varietà di scopi, così, invece, ci concentreremo sulla creazione di controlli utente sfumati che sono accessibili e facili da usare.

Affrontiamo alcuni di questi tipi di controllo.

Aggiornamenti di controllo in tempo reale con i pulsanti

Il primo controllo che guarderemo è un valore visualizzato aggiornato premendo semplicemente un pulsante. Questi tipi di controlli sono comunemente visti dove un elemento sta mostrando una quantità che può essere regolata dai pulsanti etichettati '+' e '-', ma può assumere molte forme, come pulsanti freccia che consentono di scorrere gli stati predefiniti.

Un'implementazione standard può lasciare alcune lacune nella comprensione per l'utente. Non è chiaro su quali elementi influiscono i pulsanti, come li influenzano, e quando cambia il valore dell'elemento.

Qui di seguito, useremo ARIA per creare una connessione tra i pulsanti e l'elemento di visualizzazione del valore utilizzando l'attributo aria-controls. Poi, faremo l'uso dei pulsanti utilizzando aria-label e HTML <label>. Infine, utilizzeremo il ruolo alert di aria e l'attributo aria-live per consentire al nostro utente di sapere quando viene aggiornato il valore.

Diamo un'occhiata al codice:

Popup ARIA e tooltip al passaggio del mouse

Quando attrezziamo un sito con ARIA, è comune utilizzare il termine "accessibilità progressiva". L'idea dietro questo termine è che prendendo un sito o un'applicazione web dalla sua forma di base a una completamente accessibile è un compito scoraggiante. Per risolvere questo problema in un modo che fa ancora un avanzamento, è possibile implementare nuove funzionalità progressivamente e in modo iterativo.

Per un tooltip con un popup correlato o modale, questo significa che possiamo spezzare il problema in due fasi, svolgendo ognuna come possiamo. In questo caso, il tooltip di cui stiamo parlando è l'immagine comune di un piccolo punto interrogativo che apre ulteriori informazioni quando si passa sopra con il mouse.

Per consentire agli utenti di sapere che l'immagine del punto interrogativo è in realtà un tooltip, lo abbiamo definito utilizzando un ruolo appropriato, come questo:

Ci sono alcuni problemi con questa implementazione, però. Gli utenti possono non essere ancora consapevoli che passando con il mouse sopra il tooltip si avvia una finestra popup con ulteriori informazioni. Ecco come possiamo aggiungerlo al nostro codice:

Tooltip di input accessibili

Invece di un tooltip basato sul passaggio del mouse, è anche comune per un'applicazione web utilizzare moduli dove ogni campo ha un proprio tooltip associato.

Senza ulteriore markup ARIA, può essere difficile capire quali tooltip si applicano a quale campo per un utente. Non avendo questa relazione in luogo può rendere inutile in alcuni casi il testo di supporto.

Per correggerlo, avremo avvolto i nostri tooltip all'interno dei propri elementi. Ognuno di questi può essere nidificato vicino al loro input correlato, hanno le loro relazioni stabilite con ARIA e quindi possono essere attivati con JavaScript (o solo CSS se siete furbi).

Ecco come che potrebbe essere:

Avvisi di stato

"Il nostro servizio è attualmente inattivo", "Il tuo account è sospeso" e gli avvisi di stato correlati sono comunemente usati nelle applicazioni web e visualizzano informazioni importanti per gli utenti. Senza ARIA, possono essere sepolti all'interno delle informazioni su una pagina e causare una serie di problemi.

Utilizzando il ruolo alert di ARIA e l'attributo aria-live, possiamo assicurarci che i nostri utenti siano informati di eventuali problemi rapidamente una volta che arrivano su una pagina.

Possiamo impostare questo tipo di stato avviso come questo:

Creare di una barra degli strumenti

Infine, diamo un'occhiata a un altro elemento di controllo comune utilizzato all'interno delle applicazioni web: la barra degli strumenti. Per i nostri scopi, scriveremo il codice di una barra degli strumenti che funziona come questa: la nostra applicazione web presenta una gran quantità di dati, orientati in una tabella. Sopra questa tabella, la nostra barra degli strumenti dispone di diversi pulsanti che consentono agli utenti di ordinare la tabella in vari modi. Questi pulsanti includono opzioni di ordinamento classico come dalla A alla Z e dalla Z alla A.

da un punto di vista relazionale, questi lasciano alcuni problemi riguardanti l'accessibilità. In primo luogo, non è chiaro che tali pulsanti influiscono sulla tabella — risolveremo questo utilizzando l'attributo aria-controls. Inoltre non è chiaro che i pulsanti sono associati gli uni con gli altri, che può essere un utile elemento di informazione per i nostri utenti. Per definire questo, useremo il ruolo toolbar. Infine, un utente non necessariamente sa quale pulsante è stato premuto per ultimo. Per correggere questo, useremo l'attributo aria-pressed.

Quando si utilizza l'attributo aria-pressed, è importante notare che dovrete aggiornare tali elementi come l'utente interagisce con essi. Questo probabilmente richiederà la modifica degli attributi attraverso JavaScript o jQuery.

Ecco quello che appare il nostro codice per toolbar:

Aggiungere ARIA alle vostre applicazioni Web

Con questa manciata di nuovi schemi di controllo e di relazioni a disposizione, siete sulla buona strada per rendere la vostra applicazione web completamente accessibile! Dopo aver aggiunto queste nuovo markup, pensate a come si potrebbero applicare questi attributi alle altre parti dell'interfaccia utente per massimizzare l'usabilità della vostra creazione.

Ci sono attributi, ruoli o altre caratteristiche di ARIA che volete conoscere? O forse avete alcune domande circa le vostre implementazioni, o delle correzioni per questo articolo? Restiamo in contatto utilizzando la sezione commenti qui sotto, o taggando kylejspeaker su Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.