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

Accessibilità del sito: Guida introduttiva ad ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation

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

Final product image
What You'll Be Creating

Utilizzando solo l'HTML standard, le applicazioni web moderne possono bloccare gli utenti con esigenze di accessibilità.

HTML è il linguaggio di markup predominante online, utilizzato da quasi l'83% dei siti Web esistenti. Mentre ci sono stati alcuni cambiamenti nei 25 anni dalla sua creazione, le iterazioni anche più recenti, quali HTML5 e AMP, lasciano molto a desiderare—soprattutto quando si tratta di accessibilità. Ecco dove entra in gioco ARIA. In questo tutorial, ho intenzione di parlare di ciò che è ARIA, perché è utile per il vostro sito e un paio di modi che può essere aggiunto al vostro sito.

Che cosa è ARIA?

ARIA, noto anche come WAI-ARIA, è l'acronimo di Accessible Rich Internet Applications del The Web Accessibility Initiative. Il documento delle specifiche complete può essere trovato qui. Notate che il documento completo delle specifiche è piuttosto denso, quindi potrebbe essere una buona idea iniziare a leggere questo post e dare un'occhiata ad alcune delle altre risorse che ho inserito qui sotto.

Lo scopo principale di ARIA è di permettere la struttura semantica avanzata all'interno di HTML come una controparte alla natura di sintassi pesante dell'HTML. In altre parole, HTML indica al browser dove vanno le cose, e ARIA racconta come interagiscono.

Chi è responsabile di ARIA?

ARIA è un progetto ospitato dal W3C (World Wide Web Consortium). Il progetto aderisce agli stessi standard per l'aggiornamento e la modifica come loro altre iniziative. Forniscono anche un repository su GitHub di diversi test che potete eseguire per assicurarvi che la pagina si esegua correttamente.

Che cosa c'è di sbagliato nel codice del mio sito?

La maggior parte dei siti che hanno un disegno strutturato, ben congegnato fatto abbastanza bene quando si tratta di tecnologie adattative (cioè i lettori di schermo). Tuttavia, avere un utente che sia in grado di capire come utilizzare il vostro sito e renderglielo facile da usare sono cose diverse. Gli utenti ipovedenti costituiscono quasi il 2% della popolazione, e per loro, la differenza può significare risparmiare una notevole quantità di tempo e lavoro da detective quando si tenta di eseguire delle attività di base online. Può essere la differenza tra offrire ai visitatori un'esperienza spettacolare e fornire loro un labirinto da navigare.

Oltre i tradizionali mezzi di accessibilità, ARIA sta trovando la sua strada nelle tecnologie che forniscono nuovi approcci alle interazioni standard. Un numero crescente di sistemi vocali, navigazione aggregata (come i computer nell'auto, per esempio) e altre innovazioni stanno mettendo a frutto ARIA, approfittando delle sue capacità semantiche aumentate.

Ok, ma cosa fa?

Nel complesso, ARIA collega gli elementi insieme in modo semanticamente significativo. Fornisce all'utente un significato aggiuntivo per quanto riguarda l'interazione. Ecco alcuni esempi reali di come potrebbe essere utilizzato:

  1. Associazione di elementi non annidati: con del semplice HTML, il browser dell'utente può vedere solo le relazioni basate su relazioni padre/figlio. In alcune situazioni, tuttavia, può essere utile una serie di pulsanti paralleli al contenuto nella gerarchia dell'HTML. Con ARIA, possiamo definire che tipo di controllo ha ciascun pulsante, e quale elemento controlla da qualche parte nel documento.
  2. Dichiarare gli elementi interattivi: mentre HTML fornisce una manciata di elementi per l'interattività, ARIA ne definisce diverse dozzine, consentendo descrizioni più granulari di ciò che può fare ogni elemento della pagina. Inoltre, questi possono essere assegnati ai tag HTML che non sarebbero normalmente utilizzati a tale scopo, ma potrebbero avere senso nel vostro caso specifico. Per esempio, è possibile utilizzare il tag <li> per una serie di caselle di controllo che preferite non sia composta da elementi del modulo.
  3. Area notifiche aggiornate live: un'altra caratteristica che fornisce ARIA è la definizione di un'area di contenuto "live". Quando un'area di contenuto viene definita in questo modo, ARIA avviserà l'utente ogni volta che il contenuto all'interno di tale elemento viene modificato. Questo può essere utile quando si vuol essere sicuri che gli utenti ipovedenti sappiano che qualcosa è cambiato nella vostra pagina.

Aggiungere ARIA alle pagine web

Abbiamo parlato di cosa ARIA può fare, quindi ora diamo un'occhiata ad alcuni degli esempi più comuni. Inizieremo ogni sezione con una breve dichiarazione dell'obiettivo che stiamo cercando di portare a termine, seguita da un esempio di codice di come realizzarlo.

Creare etichette alternative con ARIA

Quando si tratta di etichette alternative, la maggior parte degli sviluppatori hanno familiarità con l'attributo alt comunemente utilizzato nel tag <img>. Questo tag serve per uno scopo importante: descrivere l'immagine collegata per una maggiore accessibilità (o come una tattica comune di SEO, a seconda della prospettiva).

ARIA fornisce un attributo simile chiamato aria-label che può essere collegato a qualsiasi elemento HTML, migliorando l'accessibilità non solo per le immagini, ma le sezioni del sito, i controlli del form e altro ancora. Ecco un esempio di come appare:

Definizione degli elementi dell'interfaccia specifica di ARIA

HTML fornisce già un numero di elementi per la creazione di pagine web, ma il loro obiettivo principale è in genere di definire un'area genericamente e presentare all'utente la struttura del sito. ARIA fornisce qualche dozzina di ulteriori elementi che mettono a fuoco in modo più forte l'utilizzo di un elemento, ad esempio un timer, un tooltip o una barra di avanzamento.

Un esempio di utilizzo qui è un tootip che potreste trovare in un form. Ci sono un certo numero di modi per crearne uno, che vanno da un link che fa scattare alcuni JavaScript a un elemento che crea un modale al passaggio del mouse. Il pezzo mancante qui è che malgrado come potrebbe funzionare per gli utenti vedenti, gli utenti ipovedenti non potrebbero mai sapere che esiste la descrizione comandi.

È possibile definire un tooltip utilizzando ARIA in questo modo:

Definizioni di ARIA disponibili

Per espandere questi elementi dell'interfaccia utente, ecco un breve elenco di alcune delle più interessanti "ruoli" che possono essere definiti. La lista completa è disponibile nel documento di riferimento specifico.

  • search
  • banner
  • presentation
  • toolbar
  • status
  • menuitem
  • log
  • dialog
  • link

Stabilire le relazioni all'esterno della struttura padre/figlio

Ora espandiamo un punto di cui abbiamo parlato prima: la struttura forzata dell'HTML. Mentre la relazione padre/figlio è buona per decidere come le cose dovrebbero essere ordinate, è insufficiente quando sono necessarie connessioni più significative. Un esempio di questo è gli elementi fratelli adiacenti. Alcune librerie hanno aggiunto la possibilità per i fratelli adiacenti o altre forme di relazioni dell'elemento di essere attraversato, ma questo accade solitamente in JavaScript o in un'altra lingua al di fuori del markup.

ARIA ci dà la possibilità di definire queste relazioni giusto nel markup, rendendo più facile raggruppare le voci di menu, creare una navigazione non standard e allegare controlli alle aree dell'elemento che sarebbero difficili da fare normalmente.

Diamo un'occhiata a come potremmo utilizzarlo per collegare alcuni controlli a un'area di contenuto:

Questo frammento dice che l'immagine nextbutton.jpg è un pulsante, che è un controllo per il div tutorial sotto.

Creazione di elementi "live" con ARIA

L'ultima caratteristica di ARIA che tratteremo qui è l'attributo aria-live. Mentre la maggior parte delle altre caratteristiche di ARIA qui gestiscono le connessioni semantiche, quest'ultimo si occupa direttamente dell'idea di dare agli utenti la notifica delle modifiche al contenuto o all'elemento.

Per molti ipovedenti, potrebbe non essere immediatamente chiaro che la loro interazione con il vostro sito ha causato un cambiamento altrove sulla pagina. Questo può essere particolarmente vero per i cambiamenti sottili, come piccole scritte del testo che possono cambiare ma rimangono relativamente della stessa lunghezza. Utilizzando questo attributo, ogni volta che viene modificato il contenuto all'interno dell'elemento definito, il vostro utente riceverà una notifica.

Possiamo aggiungere questo attributo a un elemento come questo:

Rendere il Web un posto migliore per tutti gli utenti

Con un po' più del 2% della popolazione degli Stati Uniti portatrice di una qualche forma di ipovisione, migliorare l'accessibilità del vostro sito ne può aumentare drammaticamente la popolarità. Per quelli con siti che raggiungono più paesi, tale numero diventa ancora più grande. Sulla cima dell'accessibilità, ARIA fornisce anche un modo per le interfacce non correlati al browser di utilizzare il vostro sito, con un numero di dispositivi basati su voce offrendo già un contributo.

Implementare ARIA aiuta gli utenti e può aiutare il vostro traffico, quindi datevi da fare!

Ho perso qualche dettaglio, o avete ulteriori domande? Lasciate un commento qui sotto!

Se volete tuffarvi nella documentazione completa di ARIA o provare lo strumento ufficiale di test, date un'occhiata ai link qui sotto:

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.