ARIA in pratica: gli elementi dell'Homepage e gli standard di navigazione

() translation by (you can also view the original English article)

State cercando di rendere il vostro sito Web più accessibile? Volete essere in prima linea quando le nuove interfacce online arrivano sul mercato? Vi basta osservare ARIA.

Questo insieme di standard mantenuto dal W3C (World Wide Web Consortium) vi dà il meglio di entrambi i mondi con l'aggiunta di un numero di attributi che consentono all'HTML di essere esteso in modo significativo. Qui, vedremo che cosa è ARIA, vedrete come ne può beneficiare un sito informativo e analizzeremo un caso di utilizzo passo per passo con esempi di codice. Iniziamo!

Nozioni di base di ARIA

ARIA (o, talvolta, WAI-ARIA) è l'acronimo di un insieme di standard di accessibilità, chiamato Web Accessibility Initiative-Accessible Rich Internet Applications. È possibile controllare di più sui fondamenti di ARIA nel mio precedente articolo, ma ora esaminiamo alcuni dei suoi pilastri.

HTML

Accessibilità del sito: Guida introduttiva ad ARIA

Kyle Speaker

Definizione di relazioni non tradizionali

La maggioranza dei siti Web sono costruiti utilizzando HTML, che riguarda principalmente gli elementi tra loro in modo gerarchico tramite relazioni padre-figlio. Questa struttura è fantastica per la definizione dei contenuti, ma delude quando si tratta di definire le interfacce utente. Per esempio, in molti siti e applicazioni web, un'area di contenuto è controllata dai pulsanti all'interno di un elemento fratello adiacente — i fratelli adiacenti hanno lo stesso elemento padre, ma in HTML non hanno un rapporto diretto l'uno con l'altro. Per questo motivo, diventa difficile definire quali elementi dell'interfaccia utente (UI) controllano quali parti di contenuto quando si utilizzano le tecnologie assistive.

Questo porta inoltre a interfacce più nuove. Ad esempio, se si sta tentando di navigare un sito Web attraverso un dispositivo smart, diventa difficile quando le modifiche dell'elemento non sono visibili.

ARIA vi consente di legare gli elementi HTML insieme utilizzando attributi aggiuntivi per rappresentare questi tipi di controlli.

Classificazione non rigida dell'elemento

Un'altra lacuna dell'HTML è l'impossibilità di separare la struttura dallo scopo.

Per esempio, se si desidera rendere un elemento dell'immagine in un pulsante cliccabile. Tuttavia, HTML definisce ancora in gran parte quell'immagine come sola immagine, e tutto ciò che è oltre che avviene altrove.

Con ARIA, lo scopo può essere separato da un elemento, consentendo alle immagini di essere contrassegnate come pulsanti o a un link di essere definito come un tooltip. Questo dà più controllo allo sviluppatore riguardo all'interfaccia utente, creando più chiaramente relazioni fisse.

Creazione di zone di riferimento

Oltre a contrassegnare gli elementi all'interno dell'interfaccia, ARIA dà anche accesso all'attributo role — utilizzato per definire le aree di una pagina. Per esempio, è possibile contrassegnare il vostro menu principale come navigazione e l'area di contenuto del vostro articolo come contenuto principale. Questo rende più facile agli utenti di muoversi in tutte le aree importanti del vostro sito e può evitare confusione per quelli con layout del sito insolito o complesso.

Caso di utilizzo: Homepage per piccole imprese

Per ottenere una certa esperienza nell'aggiungere ARIA a un sito, prenderemo un wireframe di un sito che potrebbe essere utilizzato da una piccola impresa e implementeremo i nostri attributi passo dopo passo.

Example Page Wireframe — Il wireframe della pagina che codificheremo

Per motivi di chiarezza, il codice con lavoreremo è ridotto al minimo, con le classi CSS e qualsiasi funzionalità da un CMS è stata rimossa.

La prima cosa che vogliamo fare è dividere il nostro wireframe in parti per rendere l'aggiunta di ARIA più semplice nel complesso. Nella foto qui sotto, vedrete che ho scelto di suddividere il sito in cinque parti principali:

navigazione
contenuto
barra laterale
moduli di contatto
elementi di interfaccia utente specializzati

Nel nostro caso, appare così:

Wireframe broken into sections — Le sezioni su cui lavoreremo

Quando dividete il vostro sito in aree come queste, stiamo cercando due cose. La prima è per gli elementi principali che possono essere definiti da un punto di riferimento ARIA: banner, navigazione, principale, complementare, informazioni di contenuto, ricerca e forma. Questi rappresentano le parti necessarie del nostro sito, e le cose superflue per utilizzarlo non saranno contrassegnate come un punto di riferimento (es. pubblicità).

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

Una volta che sappiamo quali aree necessitano di avere ARIA implementato, possiamo iniziare a muoverci attraverso di loro sistematicamente. Cominciamo con la navigazione del sito.

Navigazione

Nel nostro esempio, noterete che abbiamo alcuni tipi di navigazione. Il primo è un menu come visto sulla maggior parte dei siti, che elenca alcune pagine del sito. Direttamente sotto c'è un menu più piccolo che contiene le opzioni per gli utenti.

Vogliamo segnare questi con l'attributo role="navigation" in modo che essi possono essere facilmente selezionati come i menu del sito. Questo porta alla domanda: dovrebbero essere raggruppati insieme in un punto di riferimento di navigazione singolo, o magari contrassegnati come due distinti punti di riferimento?

Per rispondere a questa domanda nei propri progetti, potete in genere porvi due domande:

È diverso lo scopo per questi menu? Nel nostro esempio, il menu in alto naviga le pagine principali del sito, mentre il menu più piccolo si concentra su cose di cui un utente registrato potrebbe aver bisogno. Questi scopi sono diversi, quindi ha senso separarli.
I menu sono all'interno dello stesso elemento padre? So che questo sembra controintuitivo poiché ARIA è stato progettato per aiutarci a superare questi tipi di restrizioni di rapporto, ma in questo caso riguarda meno ciò che è possibile e più ciò che è giusto per l'utente. Avere un singolo menu definito, ma con la metà di esso in un percorso e l'altra metà altrove, rende più difficile la navigazione.

Per il nostro caso, ci accingiamo a trattare le nostre navigazioni come due punti di riferimento separati. Così faremo alcune modifiche al codice. Per cominciare, abbiamo solo il nostro HTML di base:

1	<!-- Example code before ARIA -->
2
3	<div id=’menus’>
4	<ul>
5	<li>Home</li>
6	<li>About</li>
7	<li>Services</li>
8	<li>Location</li>
9	<li>Contact Us</li>
10	</ul>
11	<ul>
12	<li>Login</li>
13	<li>Account</li>
14	<li>Settings</li>
15	</ul>
16	</div>

Ora, lo annoteremo con alcuni punti di riferimento.

<!-- Example code after adding landmarks -->

<div id=’navigation-menu’ role=’navigation’>
    <ul>
        ...
	</ul>
</div>
<div id=’user-menu’ role=’navigation’>
    <ul>
        ...
	</ul>
</div>

Il prossimo passo nella definizione di questi punti di riferimento è quello di dare all'utente un indizio su che qual è lo scopo di ogni menu. Se li lasciamo entrambi come navigazione senza qualsiasi ulteriore informazione, rende solo le cose più difficili da interpretare. Quindi aggiungiamogli delle etichette significative utilizzando l'attributo aria-label:

<!-- Example code after adding labels -->

<div id=’navigation-menu’ role=’navigation’ aria-label=’Main Navigation’>
    <ul>
        ...
	</ul>
</div>
<div id=’user-menu’ role=’navigation’ aria-label=’User Menu’>
    <ul>
        ...
	</ul>
</div>

Oltre a ciò, vorremo aggiungere del markup role aggiuntivo al nostro menu per consentire agli utenti di sapere che questo è un menu e contrassegnare ogni collegamento all'interno come una voce di menu:

<!-- Code after ARIA implementation -->

<div id=’navigation-menu’ role=’navigation’ aria-label=’Main Navigation’>
    <ul role=’menu’>
		<li role=’menuitem’>Home</li>
		<li role=’menuitem’>About</li>
		<li role=’menuitem’>Services</li>
		<li role=’menuitem’>Location</li>
		<li role=’menuitem’>Contact Us</li>
	</ul>
</div>
<div id=’user-menu’ role=’navigation’ aria-label=’User Menu’>
    <ul role=’menu’>
		<li role=’menuitem’>Login</li>
		<li role=’menuitem’>Account</li>
		<li role=’menuitem’>Settings</li>
	</ul>
</div>

Area del contenuto

Ora l'area del contenuto. Qui, aggiungeremo al codice del contenitore che contiene interamente il nostro contenuto principale con role="main". Ancora una volta, per confronto, ecco il nostro codice di partenza.

<!-- Our code before ARIA -->

<div>
    <img src=”#” onclick=”#” />

	<p> Lorem …
		<a href=”#” onclick=”#”>scelerisque</a>
	…</p>

	<form action="#">
      		<input type="text" placeholder="Enter Your Search Text" name="search">
     		 <button type="submit">Find It</button>
    	</form>
</div>

Ed ecco come appare dopo che abbiamo aggiunto il punto di riferimento "main".

<!-- Adding in the 'main' landmark -->

<div role=”main”>
    <img src=”#” onclick=”#” />

	<p> Lorem …
		<a href=”#” onhover=”#”>scelerisque</a>
	…</p>

	<form action="#">
      		<input type="text" placeholder="Enter Your Search Text">
     		 <button type="submit">Find It</button>
    	</form>
</div>

All'interno di tale contenuto, andremo a cercare qualsiasi elemento che ha uno scopo che non corrisponde alla definizione HTML.

In primo luogo, ci occupiamo dell'immagine che agisce come un pulsante aggiungendo il ruolo di "button":

1	<img src=”#” onclick=”#” role=”button” />

Questo collegamento che attiva un modale è un po' più complicato, perché dipende da che cosa è il modale stesso. Per noi, diremo che è un tooltip:

1	<a href=”#” onhover=”#” role:’tooltip’>scelerisque</a>

All'interno del nostro contenuto principale, abbiamo anche un modulo di ricerca. Ha un ulteriore livello di complessità, nel senso che è un modulo di ricerca che utilizza elementi HTML, e si qualifica anche come un punto di riferimento della casella di ricerca. Lo contrassegneremmo così:

<div role=’search’>
<form action="#">
          	<input type="text" placeholder="Enter Your Search Text" role=’textbox’>
     		 <button type="submit" role=’button’>Find It</button>
    	</form>
</div>

Oltre a ciò, potete definire ogni elemento con un tag di ARIA adeguato. Per la maggior parte dei siti, questo può essere troppo penalizzante per il processo di sviluppo, anche se nella maggior parte dei CMS può essere automatizzato. In casi dove non lo può essere, se la definizione di un elemento HTML corrisponde al suo intento di utilizzo, allora può essere considerato a bassa priorità quando si effettuano le implementazioni di ARIA. Ecco come appare l'area del contenuto principale dopo aver effettuato tutte queste modifiche:

<!-- The completed content area -->

<div role=”main”>
    <img src=”#” onclick=”#” role=”button” />

	<p> Lorem …
		<a href=”#” onhover=”#” role:’tooltip’>scelerisque</a>
	…</p>

<div role=’search’>
<form action="#">
      		<input type="text" placeholder="Enter Your Search Text" role=’textbox’>
     		 <button type="submit" role=’button’>Find It</button>
    	</form>
</div>
</div>

Barra laterale

La barra laterale di un sito può assumere molte forme. Nel nostro caso, fornisce contenuti aggiuntivi relazionati al sito, con una lista di post correlati in fondo.

Ecco il codice iniziale per la barra laterale:

1	<aside id=’sidebar’>
2	<div>
3	<h2>More About Us</h2>
4	<p>Lorem...</p>
5	</div>
6	<div>
7	<h2>Related Posts</h2>
8	<ul>
9	<li>Post</li>
10	<li>Post</li>
11	<li>Blog Post</li>
12	</ul>
13	</div>
14	</aside>

Per definire il contenuto, vogliamo assegnargli il ruolo "complementary", consentendo agli utenti di sapere che le informazioni nella barra laterale sono contenuti aggiuntivi relativi al contenuto principale. Che può apparire come questo:

1	<div role=’complementary’>
2	<h2>More About Us</h2>
3	<p>Lorem...</p>
4	</div>

I post collegati sotto potrebbero essere considerati una forma di navigazione, consentendo agli utenti di esplorare ulteriormente i post del sito. Vogliamo assegnargli un ruolo di "navigation" e dargli un'etichetta appropriata, in questo modo:

<div role=’navigation’ aria-labelledby=’posts-heading’>
    <h2 id=’posts-heading’>Related Posts</h2>
	<ul role=’menu’>
		<li role=’menuitem’>Post</li>
		<li role=’menuitem’>Post</li>
		<li role=’menuitem’>Blog Post</li>
	</ul>
</div>

La barra laterale di ogni sito è diversa e può richiedere una diversa combinazione di ruoli e punti di riferimento. Se la vostra sidebar ha un annuncio, allora è meglio non contrassegnare tale elemento. Se c'è un modulo di ricerca all'interno della barra laterale, allora contrassegnatela pure con il ruolo appropriato. Tutti i menu che vengono visualizzati in una barra laterale dovrebbero seguire lo stesso schema come abbiamo discusso nella sezione sulla navigazione:

un punto di riferimento "navigation"
un ruolo "menu" per il contenitore di menu
ruoli "menuitem" per ognuno degli elementi nidificati

Ecco come appare la nostra sidebar finale:

<aside id=’sidebar’>
    <div role=’complementary’>
    	<h2>More About Us</h2>
    	<p>Lorem...</p>
    </div>
	<div role=’navigation’ aria-labelledby=’posts-heading’>
    	<h2 id=’posts-heading’>Related Posts</h2>
    	<ul role=’menu’>
    		<li role=’menuitem’>Post</li>
    		<li role=’menuitem’>Post</li>
    		<li role=’menuitem’>Blog Post</li>
    	</ul>
    </div>
</aside>

Gestione dei moduli di contatto

Infine, nella parte inferiore della nostra pagina è una forma di chiamata all'azione, chiedendo all'utente nome e indirizzo email, con un pulsante di invio standard sotto. Quando si tratta di moduli, ci sono tre parti da tenere a mente:

Date al modulo il ruolo di punto di riferimento "form": dato che il modulo è una parte importante del sito, abbiamo bisogno di rendere più facile agli utenti arrivare ad esso. Lo facciamo dando un ruolo di riferimento
Assegnate i ruoli corrispondenti agli elementi. I moduli sono un'area abituale dove gli scopi e le definizioni HTML sono disallineati. Aggiungete i ruoli ARIA dove necessario, soprattutto quando si tratta di caselle di controllo, barre di scorrimento, descrizioni comandi e altri elementi che possono essere implementati in più modi.
Abbinate le etichette con gli elementi appropriati. HTML gestisce ciò in modo base, lasciandovi utilizzare l'elemento <label> per associare un'etichetta a un input. I moduli possono facilmente avere una struttura più complessa che ne impedisce il funzionamento; fortunatamente possiamo rimediare con l'attributo aria-labelledby.

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

<!-- Contact form after ARIA -->

<form action="#" role=’form’>

    <label for="textbox" id=’textbox-label’>Text box</label>
  	<input type="text" id="textbox" role=’textbox’ aria-labelledby=’textbox-label’>

    <select name="combobox" role=’combobox’ aria-label=’Descriptive Name Dropdown’>
		<option value="choice1" aria-label=’Choice #1’>Choice #1</option>
  		<option value="choice2" aria-label=’Choice #2’>Choice #2</option>
	</select>

	<input type=”checkbox” checked  role=’checkbox’ aria-label=’Get a Newsletter Checkbox’ aria-check=’true’’>Checkbox
	
  	<input type="submit" value="Submit" role=’button’>
      
</form>

Testate la vostra implementazione

Con tutte le nostre implementazioni a posto, dobbiamo ora controllare che funzionino correttamente. Per fare questo, è più facile usare uno strumento di accessibilità esistente come gli strumenti di sviluppo di accessibilità di Google o il Plugin Dynamic Assistant di IBM.

Entrambi si integrano con gli strumenti per gli sviluppatori di Chrome per consentire l'ispezione in tempo reale dell'accessibilità del vostro sito. Il W3C mantiene anche una lista più grande di strumenti per l'accessibilità.

Rendere il Web più accessibile

Il wireframe del nostro sito ha ormai ARIA! Mentre c'è ancora un sacco di ARIA rimasta da esplorare, ora ne sapete abbastanza per rendere una gran parte dei siti su cui lavorate più accessibili. Oltre a ciò, il vostro sito è anche meglio preparato a gestire un numero qualsiasi di nuove tecnologie che attraversano internet che potrebbero presentarsi.

C'è qualche altro aspetto di ARIA che si vorreste farci esplorare? Avete domande su questo articolo? Sentitevi liberi di aggiungerle nei commenti qui sotto!