Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Suggerimenti sull'accessibilità con la tastiera utilizzando HTML e CSS

by
Length:MediumLanguages:

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

Rendere il vostro sito Web accessibile per gli utenti che usano la sola tastiera è una parte importante del quadro generale sull'accessibilità. Ecco alcuni suggerimenti sull'accessibilità con la tastiera, che è possibile implementare rapidamente utilizzando HTML e CSS di base.

A11y fin dall'inizio

Questi suggerimenti sono parte di Accessibilità sul Web: la guida completa all'apprendimento, dove abbiamo raccolto una serie di tutorial, articoli, corsi e libri elettronici, che vi aiutano a capire l'accessibilità del web fin dall'inizio.

Che cos'è l'accessibilità da tastiera?

Una tastiera può essere il mezzo principale per alcuni utenti per navigare i siti Web. Al giorno d'oggi, quando la maggior parte delle interfacce web sono progettate con i cursori del mouse e l'interazione touch in mente, la navigazione da tastiera è trascurata. L'accessibilità da tastiera è la pratica di assicurarsi che gli utenti possano navigare in modo efficiente e senza ostacoli utilizzando solo la tastiera.

Chi potrebbe aver bisogno dell'accessibilità da tastiera?

Questi sono i principali gruppi destinatari di accessibilità da tastiera:

  • Utenti con disabilità motorie che hanno difficoltà a usare un mouse, a utilizzare un dispositivo touch o a cliccare su piccole cose.
  • Gli utenti non vedenti o ipovedenti spesso preferiscono navigare i siti Web con specifiche tastiere Braille.
  • Gli amputati o quelli con amputazione congenita (nascita senza un arto o gli arti, in particolare le mani in questo caso) spesso usano un hardware speciale che imita la funzionalità della tastiera.
  • Chi semplicemente non ha accesso a un mouse o un touchpad funzionanti.

1. Testate il vostro sito per l'accessibilità da tastiera

L'obiettivo più importante dell'accessibilità da tastiera è quello di rendere ogni elemento interattivo, quali i collegamenti e i controlli del modulo, disponibili con il tasto Tab. Questo è come gli utenti solo con tastiera navigano su di una pagina web. Provare il vostro sito web per l'accessibilità da tastiera è in realtà piuttosto semplice: basta premere il tasto Tab e navigare dalla parte superiore della pagina verso il basso, evidenziando gli elementi attivi, mentre andate.

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Navigare i link rapidi nel footer di Tuts+ con il tasto Tab

Osservate quanto sia facile o difficile raggiungere il contenuto principale, fate clic su una voce di menu, compilate un modulo, azionate uno slider o seguite la vostra posizione corrente nella pagina. Inoltre potete verificare la direzione inversa utilizzando la scorciatoia da tastiera Shift + Tab.

2. Create stili per :focus evidenti 

Il CSS ha una pseudo-classe :focus che viene attivata quando un utente fa clic o tocca su un elemento o lo seleziona con il tasto Tab. Lo stato :focus si applica solo agli elementi attivabili, vale a dire <a>, <button>, <input>, <textarea>, <select>, e <area>.

Ogni browser è dotato dei suoi propri stili predefiniti per :focus – di solito un contorno nero punteggiato intorno all'elemento, o un bagliore sfocato, tuttavia molti designer non li trovano di loro gusto e li rimuoveranno completamente. Questo è in realtà l'errore numero uno che rovina l'accessibilità da tastiera nelle pagine web. Se non vi piacciono gli stili predefiniti, utilizzate qualcosa che abbina il design al vostro sito Web.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Gli stili predefiniti per :focus nel browser Google Chrome

Scegliete uno stile che sia facilmente visibile, ma non si basi esclusivamente sui colori. Ecco un esempio possibile che può funzionare bene per gli utenti con la sola tastiera:

3. Utilizzate gli indicatori non-colore per i collegamenti

I collegamenti ipertestuali non dovrebbero essere caratterizzati solo dal colore. Questo principio è solitamente citato in relazione all'accessibilità visiva, poiché le persone ipovedenti trovano le differenze tra alcuni colori difficili da discernere. Tuttavia, i collegamenti chiaramente visibili sono anche importanti per l'accessibilità da tastiera. Gli utenti solo da tastiera dovrebbero essere in grado di individuare i collegamenti il più rapidamente possibile. Questo aiuta la scansione della pagina e a capire come navigare verso la parte a cui sono interessati.

Similmente per gli stili per :focus, anche i collegamenti ipertestuali vengono con lo stile del browser di default — sottolineato blu nella maggior parte dei casi. Tuttavia, i designer spesso rimuovono la sottolineatura e utilizzano solo i colori per indicare la presenza di un link. Se rimuovete la sottolineatura predefinita utilizzate sempre un altro indicatore non-colore che corrisponde al design  del vostro sito web, quali bordi, icone o contorni.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Collegamenti chiari su gov.uk: (1) collegamento ipertestuale (2) focus (3) visitato

È possibile utilizzare l'attributo title per descrivere il contenuto di un link, ma diventa visibile solo quando qualcuno passa sul link. Gli utenti solo da tastiera non hanno accesso agli eventi al passaggio del mouse, quindi non ponete mai informazioni cruciali nell'attributo title. Inoltre non conta come un indicatore non-colore. Ad esempio, mai fare questo:

Invece, procedete come segue:

WCAG 2.0 avverte anche circa i problemi di accessibilità dell'attributo title. Utilizzatelo con cura o non usatelo affatto.

4. Utilizzate gli elementi di controllo nativi

I moduli sono elementi interattivi, quindi hanno bisogno di essere accessibili tramite la tastiera. Gli utenti solo da tastiera dovrebbero essere in grado di compilare moduli, premere pulsanti, utilizzare gli slider, selezionare opzioni e azionare i comandi con facilità. Se disponete di eventuali moduli sul vostro sito web è necessario testarli uno per uno, utilizzando il tasto Tab. Pensate ai moduli di iscrizione, ai moduli della newsletter, ai moduli per il login, ai moduli per i commenti, ai carrelli della spesa e così via.

Il modo migliore per creare moduli accessibili è utilizzando elementi di controllo nativi, laddove è possibile. Gli elementi di controllo nativi sono dotati di accesso facilitato mediante la tastiera incorporata, significando che sono attivabili e rispondono agli eventi dati dalla pressione dei tasti per impostazione predefinita. Sono come segue:

  • <button>
  • <input>
  • <textarea>
  • <select>
  • <option>

Per esempio, è possibile creare uno slider con intervalli accessibile da tastiera con il seguente codice HTML:

Gli utenti da tastiera possono prima metterlo a fuoco con il tasto Tab, quindi spostare il dispositivo di scorrimento su e giù con la Barra spaziatrice.

Se è necessario utilizzare un tag HTML da non mettere a fuoco per un elemento interattivo per un qualche motivo, si può rendere attivabile con l'attributo tabindex="0". Per esempio, qui un <div> è trasformato in un pulsante attivabile:

L'attributo role="button" nel frammento precedente è un ruolo punto di riferimento di ARIA. Sebbene agli utenti solo da tastiera non serva, è indispensabile per gli utenti di screen reader e per l'accessibilità visiva.

Anche se il pulsante non nativo è stato fatto attivabile, risulta ancora inferiore al suo omologo nativo in termini di accessibilità da tastiera. Capirete questo immediatamente quando tenterete di aggiungere un gestore eventi per il pulsante. Ecco come appare un listener di eventi cliccabile con l'elemento nativo <button>:

E, qui l'equivalente utilizzando il div button:

Se cliccate i pulsanti con il mouse o il touchpad potete vedere entrambi i messaggi di avviso. Tuttavia, se navigate su ogni pulsante utilizzando il tasto Tab e premere Invio per elaborarli, vedrete solo il primo messaggio, appartenendo al pulsante nativo. Per far sì che il pulsante non-nativo elabori l'input da tastiera, è anche necessario definire un gestore eventi alla pressione dei tasti separatamente:

Ora, quando gli utenti da tastiera premono Enter, vedono anche il messaggio che appartiene al pulsante non-nativo. Come potete vedere, è molto più facile e più veloce usare la versione nativa. Così, a meno che non abbiate un buon motivo per non usarla, utilizzate sempre elementi di controllo nativo.

5. Aggiungete un link "Salta al contenuto principale"

Aggiungere un link Salta al contenuto principale o Salta la navigazione alle vostre pagine web aiuta notevolmente gli utenti solo da tastiera. Nella maggior parte dei casi, questi utenti non vogliono passare attraverso tutti i link di navigazione prima di iniziare a leggere il contenuto. Questo è particolarmente vero quando danno un'occhiata a più di una pagina sul vostro sito. Provate a immaginare, senza un link salta la navigazione, devono passare attraverso gli stessi collegamenti di navigazione ogni volta sulla home page. Non sembra un'attività particolarmente divertente.

Per creare un collegamento funzionante salta la navigazione, è necessario associarlo al contenuto principale utilizzando gli attributi HTML id e href nel modo seguente:

È inoltre necessario aggiungere l'attributo tabindex="-1" per il contenitore del contenuto principale. Questa è la stessa proprietà tabindex che abbiamo usato sopra per rendere il pulsante non nativo attivabile. L'attributo tabindex viene utilizzato per modificare l'ordine di navigazione predefinito. Con un valore pari a 0, rende gli elementi non focalizzabili focalizzabili. Con un valore di -1, inoltre rende gli elementi focalizzabili ma diventano non raggiungibili con la navigazione da tastiera predefinita. Alcuni browser, come Chrome e IE, richiedono la presenza di tabindex="-1" sulla destinazione del collegamento salta la navigazione, quindi non omettetelo mai.

Rivelare il collegamento Salta a solo agli utenti da tastiera

Potete utilizzare il CSS per rendere il collegamento salta la navigazione visibile solo agli utenti da tastiera. Nello stato predefinito, nascondete il collegamento agli utenti regolari posizionandolo fuori dal viewport. Poi, rivelatelo agli utenti da tastiera creando stili distinti per lo stato attivo che viene attivato quando l'utente preme il tasto Tab.

Si può vedere questo effetto in azione su siti come webaim.org, www.w3.org e (come al solito) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
Avete mai visto questo link prima?

Il seguente codice CSS è una versione semplificata del codice salta la navigazione del manuale sull'accessibilità IT della NC State University: 

Quando l'utente preme il tasto Tab, l'elemento .skip-main è dato dal suo stato di messa a fuoco e il collegamento salta la navigazione appare sullo schermo.

Potete verificare rapidamente come funziona se cliccate sulla parte superiore del demo qui sotto e premete il tasto Tab. Potete trovare più facile aprire la demo qui sotto con la visualizzazione a pagina intera, invece.

Prossimi passi

In questo articolo, ho condiviso alcuni suggerimenti di base sull'accessibilità da tastiera che è possibile implementare utilizzando HTML e CSS. Ci sono pure altre cose, più avanzate che potreste fare per l'accessibilità da tastiera. Per esempio, potreste:

Oltre a questi consigli, evitate i CAPTCHA dove possibile, poiché hanno problemi di accessibilità gravi, sia per gli utenti da sola tastiera che per i lettori di schermo. Se avete ancora bisogno di usarli, fornite più di due modi per risolverli, altrimenti gli utenti con bisogni di accessibilità lotteranno per elaborare i vostri moduli. Fateci sapere se avete dei vostri suggerimenti per l'accessibilità da tastiera!

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.