Suggerimenti per l'accessibilità della tastiera tramite HTML e CSS

Rendere il tuo sito web accessibile per gli utenti solo tastiera è una parte importante della più ampia immagine di accessibilità. Ecco alcuni suggerimenti sull'accessibilità della tastiera che puoi implementare rapidamente utilizzando HTML e CSS di base.

A11y Dall'inizio

Questi suggerimenti fanno parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di esercitazioni, articoli, corsi e ebook, per aiutarti a capire l'accessibilità web dall'inizio.

Che cos'è l'accessibilità della tastiera?

Una tastiera può essere il mezzo principale per alcuni utenti per navigare nei siti web. Oggigiorno, quando la maggior parte delle interfacce web sono progettate con cursori mouse e interazione touch, la navigazione da tastiera viene trascurata. L'accessibilità della tastiera è la pratica per assicurarsi che gli utenti possano navigare in modo efficiente e senza ostacoli usando solo la propria tastiera.

Chi potrebbe aver bisogno di accessibilità tramite tastiera?

Questi sono i principali gruppi target di accessibilità della tastiera:

• Utenti con disabilità motorie che hanno difficoltà ad usare il mouse, usare un dispositivo touch o fare clic su piccole cose.
  
• Gli utenti non vedenti o ipovedenti preferiscono spesso navigare nei siti Web con tastiere braille specifiche.
  
• Le amputate o quelle con amputazione congenita (nascita senza arti o arti, in particolare le mani in questo caso) spesso usano l'hardware speciale che imita la funzionalità della tastiera.
  
• Chiunque semplicemente non ha accesso a un mouse o touchpad funzionante.

1. Verifica il tuo sito per l'accessibilità della tastiera

L'obiettivo più importante dell'accessibilità della tastiera è rendere disponibili tutti gli elementi interattivi, come i collegamenti e i controlli del modulo linguetta chiave. Questo è il modo in cui gli utenti di sola tastiera navigano attraverso una pagina web. Testare il tuo sito web per l'accessibilità della tastiera è in realtà abbastanza semplice: basta premere il tasto linguetta tasto e navigare dalla parte superiore della pagina verso il basso, evidenziando gli elementi attivi mentre si va.

Navigazione dei collegamenti rapidi nel Tuts + footer con il linguetta chiave

Osserva come è facile o difficile raggiungere il contenuto principale, fare clic su una voce di menu, compilare un modulo, utilizzare un dispositivo di scorrimento o seguire la posizione corrente sulla pagina. Puoi anche testare la direzione inversa usando il Shift + Tab scorciatoia da tastiera.

2. Crea visibile :messa a fuoco stili

CSS ha un :messa a fuoco pseudo-classe che viene attivata quando un utente fa clic o tocca un elemento o lo seleziona con linguetta chiave. Il :messa a fuoco lo stato si applica solo agli elementi focalizzabili, vale a dire , , , </code>, <code><select></code>, e <code><area></code>.</p><p>Ogni browser ha il suo predefinito <code>:messa a fuoco</code> stili, in genere un contorno nero tratteggiato attorno all'elemento o un bagliore sfocato, tuttavia molti designer non lo apprezzano e lo rimuovono completamente. Questo è in realtà l'errore numero uno che rovina l'accessibilità della tastiera sulle pagine web. Se non ti piacciono gli stili predefiniti, usa qualcosa che corrisponda al design del tuo sito web. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Predefinito: stili di messa a fuoco nel browser Google Chrome<p>Scegli uno stile che sia facilmente visibile ma che non si basi esclusivamente sui colori. Ecco un possibile esempio che può funzionare bene per gli utenti solo tastiera:</p><pre>: focus contorno: 3px rosso fisso; </pre><h2> 3. Utilizzare i designatori non a colori per i collegamenti</h2><p>I collegamenti ipertestuali non dovrebbero essere distinti solo dal colore. Questo principio viene solitamente menzionato in relazione all'accessibilità visiva, in quanto le persone ipovedenti trovano le differenze tra certi colori difficili da distinguere. Tuttavia, i collegamenti chiaramente visibili sono importanti anche per l'accessibilità della tastiera. Gli utenti solo sulla tastiera dovrebbero essere in grado di individuare i collegamenti il ​​più rapidamente possibile. Questo li aiuta a scansionare la pagina e capire come navigare verso la parte a cui sono interessati.</p><p>Allo stesso modo <code>:messa a fuoco</code> stili, i collegamenti ipertestuali arrivano anche con lo stile browser predefinito - sottolineatura blu nella maggior parte dei casi. Tuttavia, i progettisti rimuovono spesso la sottolineatura e usano solo i colori per indicare la presenza di un collegamento. Se rimuovi la sottolineatura predefinita usa sempre un altro designatore non colore che corrisponde al design del tuo sito web, come bordi, icone o contorni.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Cancella link su gov.uk: (1) hyperlink (2) focused (3) visitato<p>Puoi usare il <code>titolo</code> attributo per descrivere il contenuto di un link, ma diventa visibile solo quando qualcuno passa il link. Gli utenti solo sulla tastiera non hanno accesso agli eventi di passaggio del mouse, quindi non inserire mai informazioni cruciali in <code>titolo</code> attributo. Inoltre, non conta come un indicatore di colore. Ad esempio, non fare mai questo:</p><pre> Clicca qui </pre><p>Invece, fai questo:</p><pre> Informazioni importanti </pre><p>WCAG 2.0 avverte anche sui problemi di accessibilità dell'attributo title. O usalo con cura o non usarlo affatto.</p><h2> 4. Usa elementi di controllo nativi</h2><p>I moduli sono elementi interattivi, quindi devono essere accessibili tramite la tastiera. Gli utenti che utilizzano solo la tastiera dovrebbero essere in grado di compilare moduli, premere pulsanti, utilizzare i cursori di intervalli, selezionare opzioni e utilizzare i controlli con facilità. Se hai qualche modulo sul tuo sito web dovresti testarli uno per uno, usando il <strong>linguetta</strong> chiave. Pensa a moduli di iscrizione, moduli di newsletter, moduli di accesso, moduli di commento, carrelli della spesa e così via.</p><p>Il modo migliore per creare forme accessibili è utilizzando elementi di controllo nativi ovunque sia possibile. Gli elementi di controllo nativi sono dotati di accessibilità della tastiera integrata, il che significa che sono attivabili e rispondono agli eventi di pressione del tasto per impostazione predefinita. Sono come segue:</p><ul> <li><code><button></code></li> <li><code><input></code></li> <li><code><textarea></code></li> <li><code><select></code></li> <li><code><option></code></li> </ul><p>Ad esempio, puoi creare un dispositivo di scorrimento per l'intervallo accessibile della tastiera con il seguente codice HTML:</p><pre><input type="range" min="0" max="10"></pre><p>Gli utenti di tastiera possono prima focalizzarlo con il <strong>linguetta</strong> chiave, quindi sposta il cursore su e giù con <strong>Spazio</strong>. </p><p>Se è necessario utilizzare un tag HTML non attivabile per un elemento interattivo per qualche motivo, è possibile renderlo focalizzabile con <code>tabindex = "0"</code> attributo. Ad esempio, ecco a <code><div></code> trasformato in un pulsante selezionabile:</p><pre><div role="button" tabindex="0"> Cliccami </div></pre><p>Il <code>role = "button"</code> l'attributo nello snippet sopra riportato è un ruolo di riferimento ARIA. Sebbene gli utenti solo per tastiera non ne abbiano bisogno, è indispensabile per gli utenti di screen reader e per l'accessibilità visiva.</p><p>Anche se il pulsante non nativo è stato reso focalizzabile, è ancora inferiore alla controparte nativa in termini di accessibilità della tastiera. Lo capirai immediatamente quando proverai ad aggiungere un gestore di eventi al pulsante. Ecco come appare un listener di eventi di clic con il nativo <code><button></code> elemento:</p><pre><button onclick="alert('Hi, I am a native button!')"> Cliccami </button></pre><p>E, ecco l'equivalente usando il pulsante div:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Cliccami </div></pre> <iframe src="https://codepen.io/tutsplus/embed/jeYmpE/?height=300&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <p>Se fai clic sui pulsanti usando il mouse o il touchpad puoi vedere entrambi i messaggi di avviso. Tuttavia, se si accede a ciascun pulsante utilizzando il <strong>linguetta</strong> chiave e colpisci <strong>accedere</strong> per elaborarli, vedrai solo il primo messaggio, appartenente al pulsante nativo. Per fare in modo che il pulsante non nativo elabori l'input da tastiera, devi anche definire un gestore di eventi keypress separatamente:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" onkeydown="alert('Hi, I am a non-native button!')"> Cliccami </div></pre><p>Ora, quando gli utenti della tastiera colpiscono <code>accedere</code>, vedono anche il messaggio che appartiene al pulsante non nativo. Come puoi vedere, è molto più facile e veloce usare la versione nativa. Quindi, a meno che tu non abbia una buona ragione per non usarli, usa sempre elementi di controllo nativi.</p><h2> 5. Aggiungi un link "Passa al contenuto principale"</h2><p>Aggiungere un <strong>Salta al contenuto principale</strong> o <strong>Salta la navigazione</strong> il collegamento alle tue pagine web aiuta notevolmente gli utenti solo sulla tastiera. Nella maggior parte dei casi, questi utenti non vorranno 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 tuo sito. Immagina, senza saltare il link di navigazione, che devono passare attraverso gli stessi link di navigazione sulla homepage <em>ogni volta</em>. Non sembra un'attività particolarmente divertente.</p><p>Per creare un collegamento di salto salta funzionante, è necessario associarlo al contenuto principale utilizzando il <code>id</code> e <code>href</code> Attributi HTML nel modo seguente:</p><pre>Salta al contenuto principale <nav>Navigazione</nav> <main tabindex="-1">Contenuto principale</main></pre><p>È inoltre necessario aggiungere il <code>tabindex = "- 1"</code> attributo al contenitore del contenuto principale. Questo è lo stesso tabindex che abbiamo usato sopra per rendere il pulsante non nativo focalizzabile. Il <code>tabindex</code> l'attributo viene utilizzato per modificare l'ordine di navigazione predefinito. Con un valore di <code>0</code>, rende focalizzabili elementi non focalizzabili. Con un valore di <code>-1</code>, rende anche gli elementi focalizzabili ma diventano non raggiungibili con la navigazione da tastiera predefinita. Alcuni browser, come Chrome e IE, richiedono la presenza di <code>tabindex = "- 1"</code> sul target del link di navigazione di salto, quindi non ometterlo mai.</p><h3>Mostra il collegamento Salta solo agli utenti della tastiera</h3><p>È possibile utilizzare i CSS per rendere visibile il collegamento di navigazione salta solo per gli utenti di tastiera. Nel suo stato predefinito, nasconde il collegamento da utenti regolari posizionandolo fuori dal viewport. Quindi, rivelalo agli utenti di tastiera creando stili separati per lo stato di attivazione che viene attivato quando l'utente preme il pulsante <strong>linguetta</strong> chiave. </p><p>Puoi vedere questo effetto in azione su siti come webaim.org, www.w3.org e (come al solito) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Hai mai visto questo link prima?<p>Il seguente CSS è una versione semplificata del codice di navigazione skip del Manuale di accessibilità IT della NC State University:</p><pre>a.skip-main left: -999px; posizione: assoluta; inizio: auto; larghezza: 1px; altezza: 1px; overflow: nascosto; z-index: -999; a.skip-main: focus left: auto; inizio: auto; larghezza: 30%; altezza: auto; overflow: auto; margine: 0 35%; imbottitura: 5px; font-size: 20px; contorni: 3px rosso solido; allineamento del testo: centro; z-index: 999; </pre><p>Quando l'utente colpisce il <strong>linguetta</strong> chiave, il <code>.salta-main</code> elemento è dato il suo stato di messa a fuoco e il collegamento di navigazione salta appare sullo schermo. </p><p>Puoi testare rapidamente come funziona se clicchi sulla parte superiore della demo qui sotto e premi il tasto <strong>linguetta</strong> chiave. Potresti trovare più semplice aprire la demo qui sotto nella visualizzazione a pagina intera.</p> <iframe src="https://codepen.io/tutsplus/embed/VEyboG/?height=400&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <h2>Prossimi passi</h2><p>In questo articolo ho condiviso alcuni suggerimenti base sull'accessibilità della tastiera che puoi implementare utilizzando HMTL e CSS. Ci sono altre cose più avanzate che potresti fare per l'accessibilità della tastiera. Ad esempio, potresti:</p><ul> <li>aggiungi scorciatoie da tastiera personalizzate alla tua app Web,</li> <li>creare widget JavaScript navigabili da tastiera,</li> <li>o costruisci cursori accessibili alla tastiera.</li> </ul><p>Oltre a questi suggerimenti, evitare l'utilizzo di CAPTCHA laddove possibile, poiché presentano gravi problemi di accessibilità, sia per gli utenti che utilizzano solo lo screen reader che per la sola tastiera. Se hai ancora bisogno di usarli, fornisci più di due modi per risolverli, altrimenti gli utenti con esigenze di accessibilità faranno fatica ad elaborare i tuoi moduli. Facci sapere se hai qualche consiglio per l'accessibilità della tastiera!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/computers/keyboard-maestro-i-introduction.html">Keyboard Maestro I Introduzione</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/keyboard-maestro-i-introduction_7.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/key-value-observing-with-facebooks-kvocontroller.html">Valore chiave osservando con KVOController di Facebook</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/key-value-observing-with-facebooks-kvocontroller.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Ricerca..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>