Sfaturi pentru accesibilitatea tastaturii Folosind HTML și CSS

Efectuarea accesului la site-ul dvs. pentru utilizatorii numai de la tastatură este o parte importantă a imaginii de accesibilitate mai mare. Iată câteva sfaturi despre accesibilitatea tastaturii pe care le puteți implementa rapid utilizând codurile de bază HTML și CSS.

A11y de la început

Aceste sfaturi fac parte din Accesibilitatea Web: Ghidul complet de învățare, unde am colectat o serie de tutoriale, articole, cursuri și cărți electronice, pentru a vă ajuta să înțelegeți accesibilitatea web de la început.

Ce este accesibilitatea tastaturii?

O tastatură poate fi mijlocul principal pentru anumiți utilizatori de a naviga pe site-uri web. În zilele noastre, când majoritatea interfețelor web sunt proiectate cu cursoare de mouse și în interacțiune tactil în minte, navigarea de pe tastatură este neglijată. Accesibilitatea tastaturii este practica de a vă asigura că utilizatorii pot naviga eficient și fără obstacole folosind doar tastatura.

Cine poate avea nevoie de acces la tastatură?

Acestea sunt principalele grupuri țintă ale accesibilității tastaturii:

• Utilizatorii cu dizabilități motorii care întâmpină dificultăți în utilizarea unui mouse, folosind un dispozitiv tactil sau făcând clic pe lucruri mici.
  
• Utilizatorii nevăzători sau cu deficiențe de vedere preferă în mod frecvent să navigheze pe site-uri web cu tastaturi specifice Braille.
  
• Amputeii sau cei cu amputație congenitală (naștere fără membre sau membre, în special mâini în acest caz) utilizează adesea un echipament special care imită funcționalitatea tastaturii.
  
• Oricine nu are acces la un mouse sau un touchpad funcțional.

1. Testați-vă site-ul pentru accesibilitatea tastaturii

Scopul cel mai important al accesibilității tastaturii este de a face ca orice element interactiv, cum ar fi legăturile și comenzile formularului, să fie disponibil cu Tab cheie. Acesta este modul în care utilizatorii cu tastatură navighează printr-o pagină Web. Testarea site-ului dvs. pentru accesibilitatea tastaturii este de fapt destul de ușoară: apăsați butonul Tab și navigați din partea de sus a paginii spre partea de jos, subliniind elementele active în timp ce mergeți.

Navigați prin legături rapide în subsolul Tuts + cu Tab cheie

Observați cât de ușor sau dificil este să ajungeți la conținutul principal, să faceți clic pe un element de meniu, să completați un formular, să utilizați un cursor sau să urmați poziția curentă a paginii. De asemenea, puteți testa direcția inversă utilizând butonul Shift + Tab Comanda rapidă de la tastatură.

2. Creați notabil : focus stiluri

CSS are a : focus pseudo-clasă care este declanșată atunci când un utilizator dă clic sau se apasă pe un element sau o selectează cu Tab cheie. : focus stat se aplică numai elementelor focalizabile, și anume , , , </code>, <code><select></code>, și <code><area></code>.</p><p>Fiecare browser are propria sa implicită <code>: focus</code> stiluri - de obicei o contur negru punctat în jurul elementului sau o strălucire neclară, oricât de mulți designeri nu o vor găsi gustului și o vor elimina complet. Aceasta este de fapt greșeala numărul unu care ruinează accesibilitatea tastaturii pe paginile web. Dacă nu vă place stilurile implicite, utilizați ceva care se potrivește cu designul site-ului dvs. Web. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Implicit: stiluri de focalizare în browserul Google Chrome<p>Alegeți un stil ușor de văzut, dar nu se bazează exclusiv pe culori. Iată un exemplu posibil care poate funcționa bine pentru utilizatorii care utilizează tastatură:</p><pre>: focalizare contur: 3px roșu solid; </pre><h2> 3. Utilizați desenatori non-color pentru link-uri</h2><p>Link-urile hyperlink-uri nu trebuie diferențiate doar prin culoare. Acest principiu este de obicei menționat în ceea ce privește accesibilitatea vizuală, deoarece persoanele cu viziune redusă descoperă diferențele dintre anumite culori greu de discernut. Cu toate acestea, legăturile vizibile clar sunt, de asemenea, importante pentru accesibilitatea tastaturii. Utilizatorii care utilizează doar tastatură ar trebui să poată afișa legăturile cât mai repede posibil. Acest lucru îi ajută să scaneze pagina și să-și dea seama cum să navigheze la partea de care sunt interesați.</p><p>În mod similar cu <code>: focus</code> stiluri, hyperlink-uri vin, de asemenea, cu stilul de browser implicit - albastru subliniază în cele mai multe cazuri. Cu toate acestea, designerii îndepărtează frecvent sublinierea și utilizează doar culori pentru a indica prezența unei legături. Dacă eliminați sublinierea implicită, utilizați întotdeauna un alt desenator non-color care se potrivește cu designul site-ului dvs. web, cum ar fi frontiere, pictograme sau contururi.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Link-uri clare pe gov.uk: (1) hyperlink (2) focalizat (3) vizitat<p>Puteți utiliza funcția <code>titlu</code> atributul descrie conținutul unui link, dar devine vizibil numai atunci când cineva bate link-ul. Numai utilizatorii cu tastatură nu au acces la evenimentele de tip hover, deci niciodată nu puneți informații cruciale în <code>titlu</code> atribut. De asemenea, nu este considerat un indicator non-color. De exemplu, nu faceți niciodată acest lucru:</p><pre> Click aici </pre><p>În schimb, faceți acest lucru:</p><pre> Informații importante </pre><p>WCAG 2.0 avertizează și asupra problemelor de accesibilitate ale atributului titlu. Fie utilizați-l cu grijă, fie nu-l utilizați deloc.</p><h2> 4. Folosiți elemente de control nativ</h2><p>Formularele sunt elemente interactive, astfel încât acestea trebuie să fie accesibile prin intermediul tastaturii. Utilizatorii care utilizează numai tastatură ar trebui să poată completa formulare, să apese butoanele, să utilizeze glisoarele de intervale, să selecteze opțiunile și să opereze cu ușurință comenzile. Dacă aveți vreun formular pe site-ul dvs., trebuie să le testați unul câte unul, utilizând <strong>Tab</strong> cheie. Gândiți-vă la formularele de înscriere, formularele de buletine de informare, formularele de conectare, formularele de comentarii, coșurile de cumpărături și așa mai departe.</p><p>Cea mai bună modalitate de a crea formulare accesibile este utilizarea elementelor de control native ori de câte ori este posibil. Elementele de control native vin cu accesibilitatea încorporată a tastaturii, ceea ce înseamnă că acestea sunt focalizabile și răspund implicit la evenimentele de tip keypress. Ele sunt după cum urmează:</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>De exemplu, puteți crea un cursor cu rază accesibilă pentru tastatură cu următorul cod HTML:</p><pre><input type="range" min="0" max="10"></pre><p>Utilizatorii de tastatură pot să-l concentreze mai întâi pe <strong>Tab</strong> , apoi mutați cursorul în sus și în jos cu <strong>Spaţiu</strong>. </p><p>Dacă aveți nevoie să utilizați o etichetă HTML non-focalizabilă pentru un element interactiv dintr-un anumit motiv, puteți să-l concentrați pe <code>tabindex = "0"</code> atribut. De exemplu, iată a <code><div></code> transformat într-un buton focalizabil:</p><pre><div role="button" tabindex="0"> Dă-mi clic </div></pre><p> <code>rol = „buton“</code> atributul din fragmentul de mai sus este un rol de reper ARIA. Deși utilizatorii de tastatură nu au nevoie de aceasta, este indispensabil pentru utilizatorii de cititoare de ecran și pentru accesibilitatea vizuală.</p><p>Chiar dacă butonul non-nativ a fost făcut focalizabil, acesta este încă inferior omologului său nativ în ceea ce privește accesibilitatea tastaturii. Veți înțelege acest lucru imediat când încercați să adăugați un handler de evenimente la buton. Iată ce arată un ascultător al evenimentului de clic cu cel nativ <code><button></code> element:</p><pre><button onclick="alert('Hi, I am a native button!')"> Dă-mi clic </button></pre><p>Și, iată echivalentul folosind butonul div:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Dă-mi clic </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>Dacă faceți clic pe butoane utilizând mouse-ul sau touchpad-ul, puteți vedea ambele mesaje de alertă. Cu toate acestea, dacă navigați la fiecare buton utilizând <strong>Tab</strong> cheie și lovit <strong>introduce</strong> pentru a le procesa, veți vedea doar primul mesaj, aparținând butonului nativ. Pentru a face procesarea butonului non-nativ a intrării de la tastatură, trebuie să definiți separat un handler pentru evenimentul keypress:</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!')"> Dă-mi clic </div></pre><p>Acum, când utilizatorii tastaturii au lovit <code>introduce</code>, ei văd, de asemenea, mesajul aparținând butonului non-nativ. După cum puteți vedea, este mult mai ușor și mai rapid să utilizați versiunea nativă. Deci, dacă nu aveți un motiv bun pentru a nu le utiliza, utilizați întotdeauna elemente de control native.</p><h2> 5. Adăugați un link "Sări la conținutul principal"</h2><p>Adăugarea unui <strong>Treci la conținutul principal</strong> sau <strong>Sari peste navigație</strong> link-ul către paginile dvs. web ajută foarte mult pe utilizatorii care folosesc tastatură. În majoritatea cazurilor, acești utilizatori nu vor să sară prin toate legăturile de navigare înainte de a începe să citească conținutul. Acest lucru este valabil mai ales atunci când acestea au o privire la mai mult de o pagină de pe site-ul dvs. Doar imaginați-vă, fără un link de navigare săriți, aceștia trebuie să treacă prin aceleași linkuri de navigare pe pagina de pornire <em>de fiecare data</em>. Nu pare o activitate deosebit de distractivă.</p><p>Pentru a crea un link de navigare funcțional, trebuie să o legați de conținutul principal folosind <code>id</code> și <code>href</code> Atributele HTML în felul următor:</p><pre>Treci la conținutul principal <nav>Navigare</nav> <main tabindex="-1">Conținut principal</main></pre><p>De asemenea, trebuie să adăugați <code>tabindex = "- 1"</code> atribuie containerului conținutul principal. Aceasta este aceeași tabindex pe care am folosit-o mai sus pentru a face focalizarea non-native. <code>tabindex</code> atributul este utilizat pentru a modifica comanda de navigare implicită. Cu o valoare de <code>0</code>, face elemente care nu pot fi focalizate. Cu o valoare de <code>-1</code>, De asemenea, elementele pot fi focalizate, dar devin inaccesibile cu navigarea prin tastatură implicită. Anumite browsere, cum ar fi Chrome și IE, necesită prezența <code>tabindex = "- 1"</code> pe obiectivul liniei de navigare săriți, așa că nu omiteți niciodată.</p><h3>Dezvăluiți doar linkul Skip Link la utilizatorii tastaturii</h3><p>Puteți utiliza CSS pentru a face linkul de navigare sări vizibil numai pentru utilizatorii tastaturii. În starea implicită, ascundeți linkul de la utilizatorii obișnuiți prin poziționarea acestuia din portul de vizualizare. Apoi, dezvăluiți-o pentru utilizatorii tastaturii prin crearea de stiluri separate pentru starea de focalizare care este declanșată atunci când utilizatorul atinge <strong>Tab</strong> cheie. </p><p>Puteți vedea acest efect în acțiune pe site-uri precum webaim.org, www.w3.org și (ca de obicei) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Ați mai văzut vreodată acest link?<p>Următoarea versiune CSS este o versiune simplificată a codului de navigare skip de la Manualul de accesibilitate IT al Universității de Stat din SUA:</p><pre>a.skip-main stânga: -999px; poziția: absolută; top: auto; lățime: 1px; înălțime: 1px; overflow: ascuns; z-index: -999; a.skip-principal: focalizare left: auto; top: auto; lățime: 30%; înălțime: auto; overflow: auto; marja: 0 35%; padding: 5px; font-size: 20px; schiță: 3 pixeli roșii solide; text-align: centru; z-index: 999; </pre><p>Când utilizatorul lovește <strong>Tab</strong> cheie, <code>.skip-main</code> elementului i se acordă starea de focalizare, iar pe ecran apare legătura de navigare transmisă. </p><p>Puteți testa rapid cum funcționează dacă faceți clic pe partea superioară a demo-ului de mai jos și apăsați <strong>Tab</strong> cheie. Este posibil să fie mai ușor să deschideți demo-ul de mai jos în vizualizarea completă a paginii.</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>Pasii urmatori</h2><p>În acest articol, am împărtășit câteva sfaturi de accesibilitate pentru tastatură, pe care le puteți implementa utilizând HMTL și CSS. Există și alte lucruri mai avansate pe care le puteți face și pentru accesibilitatea tastaturii. De exemplu, ați putea:</p><ul> <li>adăugați comenzi rapide personalizate de la tastatură în aplicația dvs. web,</li> <li>creați widget-uri JavaScript navigabile prin tastatură,</li> <li>sau să construiască glisiere accesibile pentru tastatură.</li> </ul><p>În plus față de aceste sfaturi, evitați utilizarea CAPTCHA-urilor acolo unde este posibil, deoarece au probleme grave de accesibilitate, atât pentru cititorul de ecran, cât și pentru utilizatorii exclusiv de tastatură. Dacă totuși trebuie să le utilizați, oferiți-le mai mult de două modalități de a le rezolva, în caz contrar utilizatorii cu nevoi de accesibilitate se vor strădui să proceseze formularele. Spuneți-ne dacă aveți sfaturi de acces la tastatură pe cont propriu!</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">Tastatura Maestro I Introducere</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">Valoarea cheie observând cu KVOController din 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la 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="Căutare..."> <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>