Tastaturtilgjengelighetstips ved hjelp av HTML og CSS

Å gjøre nettstedet ditt tilgjengelig for brukere av tastaturet er en viktig del av det større tilgjengelighetsbildet. Her er noen tips om tastaturtilgjengelighet du raskt kan implementere ved hjelp av grunnleggende HTML og CSS.

A11y fra begynnelsen

Disse tipsene er en del av Web Accessibility: Den komplette læringsguiden, der vi har samlet en rekke opplæringsprogrammer, artikler, kurs og e-bøker, for å hjelpe deg å forstå web tilgjengelighet fra begynnelsen.

Hva er Tastaturtilgjengelighet?

Et tastatur kan være det primære for noen brukere å navigere nettsteder. I dag, når de fleste webgrensesnitt er utformet med musepekere og berører interaksjon i tankene, ignoreres tastaturnavigasjon. Tastaturtilgjengelighet er praksis for å sikre at brukerne kan navigere effektivt og uhindret ved å bruke bare tastaturet.

Hvem kan trenge tastaturtilgjengelighet?

Dette er de viktigste målgruppene for tastaturtilgjengelighet:

• Brukere med nedsatt funksjonsevne som har problemer med å bruke en mus, bruker en berøringsenhet eller klikker på små ting.
  
• Blind eller synshemmede brukere foretrekker ofte å navigere nettsteder med spesifikke Braille-tastaturer.
  
• Amputere eller de med medfødt amputasjon (fødsel uten lemmer eller lemmer, spesifikt hender i dette tilfellet) bruker ofte spesiell maskinvare som etterligner tastaturfunksjonalitet.
  
• Alle som rett og slett ikke har tilgang til en fungerende mus eller touchpad.

1. Test nettstedet ditt for tilgang til tastatur

Det viktigste målet med tastaturtilgjengelighet er å gjøre hvert interaktivt element, for eksempel koblinger og skjemakontroller, tilgjengelig med Tab nøkkel. Dette er hvordan brukere av tastaturet bare navigerer gjennom en nettside. Testing av nettstedet ditt for tastaturtilgjengelighet er faktisk ganske enkelt: bare trykk på Tab nøkkel og navigere fra toppen av siden til bunnen, markere aktive elementer mens du går.

Navigere hurtigkoblinger i Tuts + footer med Tab nøkkel

Vær oppmerksom på hvor lett eller vanskelig det er å komme til hovedinnholdet, klikk på et menyelement, fyll inn et skjema, bruk en skyveknapp eller følg din nåværende posisjon på siden. Du kan også teste motsatt retning ved hjelp av Shift + Tab hurtigtast.

2. Opprett Merkbar :fokus Styles

CSS har en :fokus pseudoklasse som utløses når en bruker klikker eller tapper på et element, eller velger det med Tab nøkkel. De :fokus tilstand gjelder bare for fokusable elementer, nemlig , , , </code>, <code><select></code>, og <code><area></code>.</p><p>Hver nettleser har sin egen standard <code>:fokus</code> stiler - vanligvis en stiplet svart omriss rundt elementet, eller en sløret glød, men mange designere finner det ikke til deres smak og vil helt fjerne den. Dette er faktisk nummer én feil som ødelegger tastatur tilgjengelighet på nettsider. Hvis du ikke liker standardstilene, bruker du noe som samsvarer med ditt nettsteds design. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Standard: Fokusstiler i Google Chrome-nettleseren<p>Velg en stil som er lett merkbar, men stoler ikke bare på farger. Her er et mulig eksempel som kan fungere godt for brukere av tastaturet:</p><pre>: fokus disposisjon: 3px solid rød; </pre><h2> 3. Bruk ikke-farge designatorer for koblinger</h2><p>Hyperlinks skal ikke skilles bare etter farge. Dette prinsippet er vanligvis nevnt i forhold til visuell tilgjengelighet, da personer med nedsatt syn finner forskjellene mellom visse farger vanskelig å skille mellom. Imidlertid er tydelige synlige lenker også viktige for tastaturtilgjengelighet. Brukere av tastaturet skal kunne se linker så raskt som mulig. Dette hjelper dem å skanne siden og finne ut hvordan de skal navigere til den delen de er interessert i.</p><p>Tilsvarende til <code>:fokus</code> stiler, hyperkoblinger kommer også med standard nettleser styling-blå understreker i de fleste tilfeller. Imidlertid fjerner designere ofte understreket og bruker kun farger for å indikere tilstedeværelsen av en lenke. Hvis du fjerner standard understreket, må du alltid bruke en annen ikke-farger designator som samsvarer med webdesignen din, for eksempel grenser, ikoner eller konturer.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Klare lenker på gov.uk: (1) hyperkobling (2) fokusert (3) besøkt<p>Du kan bruke <code>tittel</code> Tilskrive å beskrive et lenkes innhold, men det blir bare synlig når noen svinger koblingen. Brukere av tastatur-brukere har ikke tilgang til svinghendelser, så legg aldri viktig informasjon i <code>tittel</code> Egenskap. Det regnes heller ikke som en fargesignator. For eksempel, gjør aldri dette:</p><pre> Klikk her </pre><p>Gjør dette i stedet:</p><pre> Viktig informasjon </pre><p>WCAG 2.0 advarer også om tilgjengelighetsproblemene i tittelattributtet. Bruk det med forsiktighet, eller bruk det ikke i det hele tatt.</p><h2> 4. Bruk Native Control Elements</h2><p>Skjemaer er interaktive elementer, så de må være tilgjengelige via tastaturet. Brukere av tastaturet skal kunne fylle ut skjemaer, trykke på knapper, bruke glidebrytere, velge alternativer og betjene kontroller enkelt. Hvis du har noen skjemaer på nettstedet ditt, bør du teste dem en etter en, ved hjelp av <strong>Tab</strong> nøkkel. Tenk på registreringsskjemaer, nyhetsbrevskjemaer, påloggingsskjemaer, kommentarskjemaer, handlekurver og så videre.</p><p>Den beste måten å lage tilgjengelige skjemaer på er å bruke innfødte kontrollelementer, uansett hvor det er mulig. Innfødte kontrollelementer leveres med innebygd tastaturtilgjengelighet, noe som betyr at de er fokusable og svarer på tastetrykkhendelser som standard. De er som følger:</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>For eksempel kan du opprette en glidebryter for tastaturtilgjengelig rekkevidde med følgende HTML:</p><pre><input type="range" min="0" max="10"></pre><p>Tastaturbrukere kan først fokusere det med <strong>Tab</strong> nøkkel, flytt deretter glidebryteren opp og ned med <strong>Rom</strong>. </p><p>Hvis du trenger å bruke en ikke-fokusabel HTML-kode for et interaktivt element av en eller annen grunn, kan du gjøre det fokusabelt med <code>tabindex = "0"</code> Egenskap. For eksempel, her er en <code><div></code> omgjort til en fokuserbar knapp:</p><pre><div role="button" tabindex="0"> Klikk på meg </div></pre><p>De <code>role = "button"</code> Attributt i den ovennevnte koden er en ARIA landemerke rolle. Selv om brukerne av tastaturet ikke trenger det, er det uunnværlig for brukerne av skjermlesere og visuell tilgjengelighet.</p><p>Selv om den ikke-innfødte knappen har blitt gjort fokusabel, er den fortsatt dårligere enn den innfødte motparten når det gjelder tastaturtilgjengelighet. Du forstår dette umiddelbart når du prøver å legge til en hendelseshåndterer på knappen. Her ser det ut som en klikkhendelse lytter ser ut som den innfødte <code><button></code> element:</p><pre><button onclick="alert('Hi, I am a native button!')"> Klikk på meg </button></pre><p>Og her er ekvivalenten ved hjelp av div-knappen:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Klikk på meg </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>Hvis du klikker på knappene med musen eller pekefeltet, kan du se begge varselmeldingene. Men hvis du navigerer til hver knapp ved hjelp av <strong>Tab</strong> nøkkel og trykk <strong>Tast inn</strong> for å behandle dem, vil du bare se den første meldingen som tilhører den innfødte knappen. For å gjøre at den ikke-innfødte knappen behandler tastaturinngangen, må du også definere en tastetrykkhendelse handler separat:</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!')"> Klikk på meg </div></pre><p>Nå, når tastaturbrukere treffer <code>Tast inn</code>, de ser også meldingen som tilhører den ikke-innfødte knappen. Som du kan se, er det mye enklere og raskere å bruke den opprinnelige versjonen. Så, med mindre du har en god grunn til ikke å bruke dem, bruk alltid innfødte kontrollelementer.</p><h2> 5. Legg til en "Hopp til hovedinnhold" Link</h2><p>Legge til en <strong>Gå til hovedinnhold</strong> eller <strong>Hopp over navigasjon</strong> kobling til websidene dine bidrar sterkt til tastaturbrukte brukere. I de fleste tilfeller vil disse brukerne ikke ønske å hoppe gjennom alle navigasjonslinkene før de begynner å lese innholdet. Dette gjelder spesielt når de ser på mer enn én side på nettstedet ditt. Bare tenk, uten en navigasjonslink, må de gå gjennom de samme navigasjonslinkene på hjemmesiden <em>hver gang</em>. Det virker ikke som en spesielt underholdende aktivitet.</p><p>For å opprette en fungerende hoppe navigasjonslink, må du binde den til hovedinnholdet ved hjelp av <code>id</code> og <code>href</code> HTML-attributter på følgende måte:</p><pre>Gå til hovedinnhold <nav>Navigasjon</nav> <main tabindex="-1">Hovedinnhold</main></pre><p>Du må også legge til <code>tabindex = "- 1"</code> Tilordne beholderen til hovedinnholdet. Dette er samme tabindex som vi har brukt ovenfor for å gjøre den ikke-innfødte knappen fokuserbar. De <code>tabindex</code> Attributt brukes til å endre standard navigasjonsordre. Med en verdi på <code>0</code>, det gjør fokus på ikke-fokusable elementer. Med en verdi på <code>-1</code>, det gjør også elementene fokusable, men de blir ikke tilgjengelig med standard tastaturnavigasjon. Enkelte nettlesere, for eksempel Chrome og IE, krever tilstedeværelse av <code>tabindex = "- 1"</code> på målet for skipets navigasjonslenk, så aldri utelate det.</p><h3>Bare avslør Skip-koblingen til tastaturbrukere</h3><p>Du kan bruke CSS til å gjøre oversiktsnavigasjonslinken bare synlig for tastaturbrukere. Skjul lenken fra vanlige brukere i standardstatus ved å plassere den ut av visningsporten. Så avslør det for tastaturbrukere ved å lage separate stiler for fokustilstanden som utløses når brukeren treffer <strong>Tab</strong> nøkkel. </p><p>Du kan se denne effekten på handling på nettsteder som webaim.org, www.w3.org og (som vanlig) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Har du noen gang sett denne linken før?<p>Følgende CSS er en forenklet versjon av skipnavigasjonskoden til NC State Universitys IT Accessibility Handbook:</p><pre>a.skip-main left: -999px; posisjon: absolutt; topp: auto; bredde: 1px; høyde: 1px; overløp: skjult; z-indeks: -999; a.skip-main: fokus left: auto; topp: auto; bredde: 30%; høyde: auto; overløp: auto; margin: 0 35%; polstring: 5px; skriftstørrelse: 20px; omriss: 3px solid rød; tekst-align: center; z-indeks: 999; </pre><p>Når brukeren treffer <strong>Tab</strong> nøkkel, <code>.hoppe-main</code> elementet er gitt sin fokustilstand og hoppe navigasjons lenken vises på skjermen. </p><p>Du kan raskt teste hvordan det fungerer hvis du klikker på toppen av demoen under og klikker på <strong>Tab</strong> nøkkel. Du kan finne det enklere å åpne demoen under i full sidevisning i stedet.</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>Neste skritt</h2><p>I denne artikkelen delte jeg noen grunnleggende tastaturtilgjengelighetstips som du kan implementere ved hjelp av HMTL og CSS. Det er andre, mer avanserte ting du kan gjøre for tastatur tilgjengelighet også. For eksempel kan du:</p><ul> <li>Legg til egendefinerte hurtigtaster i webappen din,</li> <li>Lag tastaturnavigerbare JavaScript-widgets,</li> <li>eller bygge tastaturtilgjengelige skyveknapper.</li> </ul><p>I tillegg til disse tipsene, unngår du å bruke CAPTCHAer der det er mulig, da de har alvorlige tilgjengelighetsproblemer, både for skjermlesere og brukere av tastatur. Hvis du fortsatt trenger å bruke dem, gir du mer enn to måter å løse dem, ellers vil brukere med tilgjengelighetsbehov kjempe for å behandle skjemaene dine. Gi oss beskjed hvis du har noen enkle tastaturtilgjengelighetstips!</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">Webdesign</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 Introduksjon</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">Nøkkelverdier Observerer med Facebooks KVOController</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </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="Søke..."> <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>