Hands-on con ARIA elementi della home page e navigazione standard

Stai cercando di rendere il tuo sito web più accessibile? Vuoi essere il primo in linea quando arrivano sul mercato le nuove interfacce online? Non guardare oltre ARIA.

Questo insieme di standard gestiti dal W3C (World Wide Web Consortium) offre il meglio di entrambi i mondi aggiungendo una serie di attributi che consentono di estendere l'HTML in modo significativo. Qui, passeremo attraverso ciò che è ARIA, vediamo come può avvantaggiare un sito Web informativo e passare attraverso un caso d'uso passo dopo passo con esempi di codice. Iniziamo!

Nozioni di base ARIA

ARIA (o talvolta WAI-ARIA) è l'acronimo di una serie di standard di accessibilità, denominati Web Accessibility Initiative-Accessible Rich Internet Applications. Puoi controllare di più sulle basi di ARIA nel mio precedente articolo, ma ora analizziamo alcuni dei suoi pilastri.

Definire relazioni non tradizionali

La maggior parte dei siti Web è costruita utilizzando l'HTML, che principalmente collega gli elementi tra loro in modo gerarchico attraverso relazioni genitore-figlio. Questa struttura è ideale per definire i contenuti, ma non è sufficiente quando si tratta di definire le interfacce utente. Ad esempio, in molti siti e applicazioni Web, un'area del contenuto è controllata da pulsanti all'interno di un elemento fratello - i fratelli hanno lo stesso elemento padre, ma in HTML non hanno una relazione diretta l'uno con l'altro. Per questo motivo diventa difficile definire quali elementi dell'interfaccia utente (UI) controllano quali parti del contenuto utilizzano tecnologie assistive.

Questo porta anche a nuove interfacce. Ad esempio, se si sta tentando di navigare in un sito Web tramite un dispositivo intelligente, diventa difficile quando le modifiche degli elementi non sono visibili.

ARIA ti consente di associare elementi HTML usando attributi aggiuntivi per rappresentare questi tipi di controlli.

Classificazione degli elementi non rigidi

Un'altra lacuna di HTML è la sua incapacità di separare la struttura dall'intento.

Ad esempio, potresti voler trasformare un elemento immagine in un pulsante cliccabile. Tuttavia, l'HTML definisce ancora in gran parte quell'immagine solo come un'immagine, e ogni cosa oltre a quella avviene altrove.

Con ARIA, l'intento può essere separato da un elemento, consentendo di contrassegnare le immagini come pulsanti o un collegamento da definire come suggerimento. Ciò conferisce maggiore controllo allo sviluppatore relativamente all'interfaccia utente, creando relazioni più chiaramente definite.

Creazione di aree di riferimento

Oltre a contrassegnare gli elementi nell'interfaccia utente, ARIA fornisce anche l'accesso all'attributo ruolo, utilizzato per definire le aree di una pagina. Ad esempio, puoi contrassegnare il tuo menu principale come la navigazione e l'area del contenuto dell'articolo come contenuto principale. Ciò rende più facile per gli utenti spostarsi all'interno delle aree importanti del tuo sito e può prevenire la confusione per quelli con layout di sito non comuni o complessi.

Caso d'uso: Homepage di piccole imprese

Per acquisire esperienza aggiungendo ARIA a un sito, prenderemo un wireframe di un sito che potrebbe essere utilizzato da una piccola impresa e implementare i nostri attributi passo dopo passo.

La pagina wireframe che segnerà

Per motivi di chiarezza, il codice con cui lavoreremo è ridotto, con le classi CSS e qualsiasi funzionalità da un CMS rimosso.

La prima cosa che vorremmo fare è suddividere il nostro wireframe in parti per rendere l'aggiunta in ARIA più semplice nel complesso. Nell'immagine qui sotto, vedrai che ho scelto di suddividere il sito in cinque parti principali: 

• navigazione
• soddisfare
• sidebar
• moduli di contatto
• elementi dell'interfaccia utente specializzati

Nel nostro caso, assomiglia a questo:

Le sezioni con cui lavoreremo

Quando rompi il tuo sito in aree come questa, stiamo cercando due cose. Il primo riguarda i principali elementi che possono essere definiti da un punto di riferimento ARIA: banner, navigazione, principale, complementare, informazioni sui contenuti, ricerca e modulo. Questi rappresentano le parti necessarie del nostro sito e qualsiasi cosa non necessaria per utilizzarla non sarà contrassegnata come un punto di riferimento (ad esempio annunci pubblicitari).

La seconda cosa da cercare sono elementi specifici che devono essere chiariti con ARIA. Nella maggior parte dei casi, questo è piuttosto semplice (come contrassegnare un'immagine come un'immagine), ma per alcuni elementi dell'interfaccia utente, può diventare un po 'complicato.

Una volta che sappiamo quali aree devono essere implementate da ARIA, possiamo iniziare a spostarle sistematicamente. Iniziamo con la navigazione del sito.

Navigazione

Nel nostro esempio, noterai che abbiamo alcuni tipi di navigazione. Il primo è un menu come si vede nella maggior parte dei siti, elencando alcune pagine per il sito. Subito sotto c'è un menu più piccolo che contiene opzioni per gli utenti.

Vogliamo contrassegnarli con il role = "navigazione" attributo in modo che possano essere facilmente individuati come menu del sito. Questo porta alla domanda: dovrebbero essere raggruppati in un unico punto di riferimento di navigazione, o contrassegnati come due punti di riferimento separati?

Per rispondere a questa domanda nei tuoi progetti, in genere puoi porsi due domande:

1. L'intento di questi menu è diverso? Nel nostro esempio, il menu principale naviga tra le pagine del pilastro del sito, mentre il menu più piccolo si concentra sulle cose che un utente connesso potrebbe aver bisogno. Questi intenti sono diversi, quindi ha senso separarli.

2. I menu sono all'interno dello stesso elemento principale? So che questo sembra controintuitivo dal momento che ARIA è progettato per aiutarci a superare questi tipi di restrizioni relazionali, ma in questo caso è meno su ciò che è possibile e più su ciò che è giusto per l'utente. Avere un singolo menu definito, ma con metà di esso in una posizione e l'altra metà altrove, rende la navigazione più difficile.

Nel nostro caso, considereremo le nostre navigazioni come due punti di riferimento separati. Quindi apporteremo alcune modifiche al codice. Per cominciare, abbiamo solo il nostro HTML di base:

 
 
 
Casa
 
Di
 
Servizi
 
Posizione
 
Contattaci
 
 
 
Accesso
 
account
 
impostazioni
 
 

Ora annoteremo con alcuni punti di riferimento.

Il prossimo passo nella definizione di questi punti di riferimento è fornire all'utente un suggerimento su quale sia l'intento di ciascun menu. Se li lasciamo entrambi come navigazione senza ulteriori informazioni, rende le cose più difficili da interpretare. Quindi aggiungiamo loro etichette significative usando il Aria-label attributo:

Oltre a questo, vorremmo aggiungere marcature di ruolo aggiuntive al nostro menu per far sapere agli utenti che si tratta di un menu e contrassegnare ciascun link all'interno come una voce di menu:

Area del contenuto

Ora sull'area del contenuto. Qui, contrassegneremo il contenitore che contiene l'intero contenuto principale role =”main”. Ancora una volta, per il confronto, ecco il nostro codice di avviamento. 

 
  
 Lorem ... scelerisque ... 
 
  Trovalo 
 

Ed ecco come appare dopo aver aggiunto il "principale" punto di riferimento.

 
  
 Lorem ... scelerisque ... 
 
  Trovalo 
 
 

All'interno di quel contenuto, andremo a cercare qualsiasi elemento che abbia un intento che non corrisponde alla sua definizione HTML.

Innanzitutto, ci occuperemo dell'immagine che funge da pulsante aggiungendo il "pulsante" ruolo:

Questo link che attiva un modal è un po 'più complicato, perché dipende da ciò che è nella modale stessa. Per noi, stiamo per dire che è un suggerimento:

scelerisque

All'interno del nostro contenuto principale, abbiamo anche un modulo di ricerca. Questo ha un ulteriore livello di complessità, in quanto è un modulo di ricerca che utilizza elementi HTML e si qualifica anche come punto di riferimento della casella di ricerca. Lo segneremmo in questo modo:

 
  Trovalo 
 

Oltre a questo, è possibile definire ogni elemento con il proprio tag ARIA. Per la maggior parte dei siti, questo può essere un onere eccessivo per il processo di sviluppo, sebbene nella maggior parte dei CMS possa essere automatizzato. Nei casi in cui non può essere, se la definizione HTML di un elemento corrisponde al suo scopo di utilizzo, allora può essere considerata bassa priorità quando si realizzano implementazioni ARIA. Ecco come appare l'area del contenuto principale dopo aver apportato tutte queste modifiche:

 
  
 Lorem ... scelerisque ... 
 
 
  Trovalo 
 
 
 

Sidebar

La barra laterale di un sito può assumere molte forme. Nel nostro caso, fornisce contenuti aggiuntivi relativi al sito, con un elenco di post correlati in basso.

Ecco il markup iniziale per la barra laterale:

Per definire il contenuto, vorremmo darglielo "complementare" ruolo, consentendo agli utenti di sapere che le informazioni nella barra laterale sono contenuti aggiuntivi correlati al contenuto principale. Questo può assomigliare a questo:

I post correlati di seguito potrebbero essere considerati una forma di navigazione, consentendo agli utenti di esplorare ulteriormente i post del sito. Vogliamo contrassegnarlo con a "navigazione" ruolo e dargli un'etichetta appropriata, in questo modo:

La barra laterale di ogni sito è diversa e potrebbe richiedere una combinazione diversa di ruoli e punti di riferimento. Se la barra laterale ha un annuncio, è meglio non contrassegnarlo. Se è presente un modulo di ricerca nella barra laterale, contrassegnarlo con il ruolo appropriato. Qualsiasi menu che appare in una barra laterale dovrebbe seguire lo stesso schema di cui abbiamo discusso nella sezione di navigazione: 

• un "navigazione" punto di riferimento
• un "menu" ruolo per il contenitore del menu
• ruoli di "elemento del menu" per ciascuno degli oggetti nidificati

Ecco come appare la nostra barra laterale finale:

Gestione dei moduli di contatto

Infine, nella parte inferiore della nostra pagina c'è un modulo di invito all'azione, che richiede il nome e l'e-mail dell'utente, con un pulsante di invio standard di seguito. Quando si tratta di moduli, ci sono tre parti da tenere a mente:

1. Dare alla forma il ruolo fondamentale di "modulo": dal momento che il modulo è una parte importante del sito, dobbiamo renderlo facile agli utenti per raggiungerlo. Lo facciamo dandogli un ruolo fondamentale

2. Assegna i ruoli corrispondenti agli elementi. I moduli sono un'area comune per le intenzioni e le definizioni HTML non sono corrispondenti. Aggiungi ruoli ARIA dove necessario, specialmente quando si tratta di checkbox, slider, tooltip e altri elementi che possono essere implementati in più modi.

3. Abbina le etichette con gli elementi appropriati. HTML gestisce questo in modo semplice, permettendoti di usare il elemento per associare un'etichetta a un input. Le forme possono facilmente avere una struttura più complessa che impedisce che funzioni; per fortuna possiamo aggiustarlo con il Aria-labelledby attributo.

Diamo un'occhiata a come appare il nostro codice aggiornato:

 
 Casella di testo   Scelta # 1 Scelta # 2  casella di controllo