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

Le migliori prassi per l'implementazione di ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility Recipes for Web Apps

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

Oggi, per celebrare la Giornata Internazionale delle Persone con Disabilità, stiamo evidenziando qui su Envato Tuts+ l'accessibilità.

ARIA è una caratteristica importante che gli sviluppatori web possono utilizzare per aiutare a rendere più accessibili i loro siti. In articoli precedenti, abbiamo parlato di come sia possibile implementare ARIA, sia se lo state facendo su un sito di ecommerce o in posti più di nicchia.

Finora, il focus di questa serie è stato come implementare ARIA — per esempio, come aggiungere un ruolo a un elemento o come programmare moduli più accessibili. Con questo articolo, il focus sta per spostarsi un po' verso altri aspetti dell'accessibilità online, come il perché e il quando dovremmo usare ARIA. Tratteremo anche alcune delle domande più comuni poste sui post precedenti nel corso della serie.

Va bene, cominciamo!

Che cos'è ARIA?

Alla sua base, ARIA è un'estensione dei linguaggi di sviluppo web attuali (principalmente HTML) che consente una migliore accessibilità agli utenti finali.

Ma che cosa significa esattamente?

Estendere HTML con ARIA

L'HTML ha alcune carenze, quando si tratta di come vengono definiti gli elementi e come gli elementi possono essere correlati tra loro.

In molti casi, gli elementi HTML (come il tag <div>) sono troppo ampiamente definiti per essere utili a qualcuno che sta navigando su di un sito con un lettore di schermo, o un elemento può avere troppi possibili significati per essere interpretato (per es. un'immagine potrebbe anche essere usata come un pulsante). ARIA aggiunge ulteriori attributi agli elementi HTML per consentire le definizioni che possono essere sovrapposte al linguaggio markup già esistente, aggiungendo chiarezza a seconda delle necessità.

Il secondo vantaggio importante è la relazione tra gli elementi. Con HTML, ogni elemento esiste come figlio e/o un genitore di un altro elemento. Ma questa struttura non acquisisce tutte le relazioni semantiche. Questo può portare a scenari come un controller e l'elemento che controlla che non siano chiaramente associati se vengono inseriti in contenitori div separati. Questo diventa sempre più importante in strutture di siti complesse o quando si modifica il DOM utilizzando JavaScript.

Oltre a questi due vantaggi, ci sono una miriade di altri che tendono ad avere meno attenzione, ma forniscono comunque funzionalità eccellenti.

ARIA per l'accessibilità avanzata

Anche se gran parte del web sta spingendo verso un UX più facile da usare, ARIA riveste un ruolo importante per gli altri potrebbero non essere in grado di semplificare la loro struttura. Ci sono casi dove un sito Web potrebbe richiedere controlli della struttura ad albero, come quelli comunemente usati dal filesystem. Fornendo un'ulteriore struttura, ARIA rende questi controlli più avanzati disponibili alle persone che potrebbero non essere in grado di accedervi in caso contrario — soprattutto per gli utenti che cercano di creare un sito con funzionalità drag-and-drop.

Un'altra funzionalità chiave è che ARIA non solo estende l'HTML — può anche essere utilizzato per rendere disponibili a più utenti altre tecnologie meno accessibili. Questo è spesso il caso delle persone che utilizzano AJAX o DHTML per le applicazioni web.

E in realtà, stanno solo scalfendo la superficie. Se siete interessati a saperne di più sulle funzionalità, attributi e altri parametri utili, date un'occhiata al quadro generale di WAI-ARIA.

Perché dovremmo usare ARIA?

Per quanto riguarda l'accessibilità, ARIA è diventato uno degli standard più diffuso, con oltre il 25% dei principali milioni di siti web che lo utilizzano in una certa misura.

Il più grande vantaggio nell'utilizzo di WAI-ARIA è che aumenta l'accessibilità del vostro sito. Gli utenti che contano sui lettori di schermo, ipovedenti o che utilizzano interfacce alternative per il web beneficiano notevolmente dell'implementazione — e in alcuni casi, potrebbero non essere in grado di utilizzare pienamente un sito web senza di esso. Per molti, l'accessibilità è vista come un valore fondamentale del web, e in qualità di sviluppatori, dovremmo sforzarci di fornirlo ovunque sia possibile.

Oltre all'aspetto di prassi migliori, c'è anche un incentivo economico per la loro implementazione. Con il 2-3% degli americani con qualche forma di ipovisione, c'è una parte significativa della maggior parte dei mercati che trarrebbero beneficio dall'uso dello standard. Inoltre, avere un'implementazione in atto ora sarà vantaggioso in quanto l'adozione di ARIA cresce sempre più tra le interfacce web non standard e si insinua in dispositivi come gli altoparlanti intelligenti.

Le migliori prassi per l'implementazione di ARIA

Fino ad ora, in questa serie ci siamo concentrati sui metodi concreti di attuazione. Con le nozioni di base su come aggiungere ARIA al vostro sito ora, diamo un'occhiata ad alcune linee guida fondamentali per mettere insieme la vostra implementazione.

Utilizzare un approccio leggero

Una buona implementazione di ARIA non ha bisogno di attributi e ruoli aggiuntivi in ogni occasione.

Quando possibile, l'ideale è utilizzare la minor quantità di codice aggiuntivo per trasmettere le informazioni necessarie. Per esempio, l'uso eccessivo di ARIA è simile a rendere la home page del vostro sito una completa mappa del sito per un utente di visivo. Le persone che utilizzano i lettori di schermo saranno sopraffatte dalla quantità di notifiche e di markup aggiuntivo su una pagina che sovrautilizza ARIA, ottenendo l'opposto di quello che stavamo cercando.

L'obiettivo è fornire abbastanza markup aggiuntivo per rendere chiaro il contesto dei vostri elementi importanti, e probabilmente non è necessario nient'altro oltre ciò.

Evitare la ridondanza (soprattutto quando si utilizza HTML5)

Negli articoli precedenti di questa serie, abbiamo parlato un po' dell'attributo role. L'abbiamo messo in ogni luogo in cui ci serviva che l'utente ne fosse a conoscenza. C'è un'importante eccezione a ciò, tuttavia, di cui non ne abbiamo parlato prima, e cioè la necessità di evitare la ridondanza.

Ogni volta che un elemento a cui volete aggiungere ARIA definisce già chiaramente che cos'è, allora potete saltare l'aggiunta di ARIA a esso. Perché è così? Perché ARIA ha lo scopo di estendere il codice esistente per renderlo più leggibile, ma in alcuni casi, il codice è già chiaro, strutturato e facile da capire.

Questo accade frequentemente alle persone che utilizzano gli elementi introdotti in HTML5. Per esempio, quando si utilizza l'elemento <button>, non avete più bisogno di aggiungere l'attributo role="button", dal momento che il ruolo è definito già in modo esplicito dal codice HTML.

Testare con un lettore di schermo

Un'altra chiave per creare una buona implementazione di ARIA è assicurarvi di testare il sito con uno o due lettori di schermo. Sarete probabilmente sorpresi dai dettagli del loro funzionamento e di quanto sia facile rendere il vostro sito web fastidioso da usare per caso.

Molti attributi di ARIA possono creare notifiche o avvisi per l'utente finale, e se state utilizzando un'area di contenuto di aria che cambia ogni 10 secondi, è possibile che l'implementazione stia rendendo più difficile da usare il vostro sito Web.

Accessibilità iterativa per il web

Quando si aggiungono misure aggiuntive di accessibilità al vostro sito,è importante ricordare che non si tratta di un compito o tutto o niente. Non c'è bisogno di completare completamente il vostro sito web in un solo tentativo, e le aggiunte iterative sono probabilmente il modo migliore di procedere.

Iniziare con le principali aree di contenuto e le navigazioni per poi diffondersi lentamente in tutto il sito è una strategia solida, completando di più col passare del tempo. Anche se pianificate 15 o 30 minuti ogni mese per aggiungere solo un po' di accessibilità al sito, è un passo nella giusta direzione.

Una buona UX è una buona accessibilità (e viceversa)

ARIA non è una panacea per i problemi di accessibilità. È fondamentale porre una forte attenzione su una buona progettazione UX, soprattutto quando si tratta della leggibilità del testo, come un altro strumento nella vostra cassetta degli attrezzi per l'accessibilità.

Se vi piacerebbe approfondire le specifiche di come l'UX e lo sviluppo (al di fuori di ARIA) possono essere maneggiati per migliorare l'accessibilità, date un'occhiata alle Linee guida della Web Content Accessibility.

Potete anche dare un'occhiata alla nostra Guida di apprendimento completo sull'accessibilità del Web.

Domande frequenti su ARIA

Questa serie su ARIA ha toccato un sacco di lettori e ha suscitato discussioni nella comunità. Continuiamo così! Aumentare la consapevolezza e migliorare questi tutorial è il modo migliore per portare alla ribalta l'accessibilità.

Ecco alcune delle domande più comuni e i commenti che sono spuntati sul web:

Quali browser supportano WAI-ARIA?

Parecchi! I browser più moderni supportano in parte le funzionalità di ARIA, anche se questo cambia leggermente da browser a browser. Se volete vedere le specifiche di ogni browser, potete utilizzare uno strumento Can I Use?

Can I Use ARIA results

ARIA può essere utilizzato con WordPress?

Sì! Alcuni temi di WordPress già hanno integrato ARIA, ma potete aggiungerlo a qualsiasi tema di cui potete modificare il codice sorgente. Inoltre, potete utilizzare ARIA anche ARIA con quasi qualsiasi Content Management System!

Cosa succede se ARIA non è supportato?

Dal momento che l'ARIA non influisce sul rendering, niente! Nella maggior parte dei casi, se un dispositivo non supporta ARIA, sarà solo ignorato completamente.

Rendere il Web un posto migliore!

Mettendo insieme tutti gli articoli di serie, spero che ora abbiate tutti gli strumenti necessari per migliorare l'accessibilità del vostro sito!

Se avete delle domande, dei commenti, o avete una correzione per qualcosa che ho detto, per favore fatemelo sapere nei commenti!

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.