Näppäimistönavigointi ja fokuksen hallinta
Varmista, että kaikki interaktiiviset elementit ovat saavutettavissa Tab-näppäimellä, hallitse fokusta ohjelmallisesti dialogeissa ja reitityksessä sekä luo näkyvät fokusosoittimet
Näppäimistönavigointi ja fokuksen hallinta on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Miksi näppäimistönavigointi on tärkeää?
Monet käyttäjät eivät voi käyttää hiirtä: heillä voi olla liikkumisrajoitteita, he voivat käyttää ruudunlukijaa tai suosia näppäimistöä tehokkaampana työvälineenä. Jos sovelluksessanne ei voi navigoida näppäimistöllä, se ei toimi näille käyttäjille.
Tab ja Shift+Tab
Tab siirtää kohdistuksen seuraavaan vuorovaikutteiseen elementtiin. Shift+Tab siirtää sen edelliseen. Järjestys noudattaa oletusarvoisesti DOM-järjestystä — älkää taistelko tätä vastaan, vaan antakaa DOM:n määrittää sarkainjärjestys.
Mihin voi kohdistaa oletusarvoisesti?
Natiiviset vuorovaikutteiset elementit voidaan kohdistaa: a[href], button, input, select, textarea ja summary. Mukautetut elementit tarvitsevat tabindex-määritteen.
tabindex-arvot
tabindex="0": elementti sisältyy sarkainjärjestykseen DOM-sijaintinsa kohdalla. tabindex="-1": elementin voi kohdistaa vain JavaScriptillä (komentosarjan kohdistus, ei Tab-näppäimellä). tabindex=">0": anti-pattern — luo hämmentävän kohdistusjärjestyksen, älkää koskaan käyttäkö sitä.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Näkyvä kohdistuksen ilmaisin
Älkää koskaan poistako kohdistuksen ääriviivoja tarjoamatta korvaavaa ilmaisinta. WCAG edellyttää näkyvää ilmaisinta jokaiselle kohdistettavalle elementille.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
:focus-visible-pseudoluokka aktivoituu vain, kun kohdistus on tullut näppäimistöltä, ei hiiren napsautuksesta. Sen avulla voitte säilyttää hiirellä käytettävän siistin tyylin ja näyttää samalla näppäimistökohdistuksen.
Siirry sisältöön -linkki
Ensimmäisen kohdistettavan elementin tulisi olla ohituslinkki, jotta näppäimistön käyttäjät voivat ohittaa otsakkeen navigoinnin ja siirtyä suoraan pääsisältöön.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Kohdistuksen lukitseminen modaalissa
Kun modaalinen ikkuna avautuu, kohdistus tulee lukita sen sisälle — viimeisestä elementistä Tab-näppäimellä siirryttäessä kohdistus siirtyy ensimmäiseen ja ensimmäisestä Shift+Tab-näppäimellä siirryttäessä viimeiseen. Escape-näppäimen painaminen sulkee modaalisen ikkunan.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Käyttäkää dialog-elementtiä
HTML:n natiivi <dialog>-elementti käsittelee kohdistuksen lukitsemisen, sulkemisen Escapella ja modaalisen taustan automaattisesti.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Kohdistuksen hallinta reitin vaihtuessa
SPA-sovellukset eivät lataa sivua uudelleen, joten ruudunlukijoiden käyttäjät eivät saa merkkiä navigoinnin tapahtumisesta. Siirtäkää kohdistus reitin vaihtuessa uuden sivun h1-elementtiin tai main-elementtiin.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();Kohdistusjärjestyksen tulee vastata visuaalista järjestystä
Varmistakaa, että DOM-järjestys vastaa visuaalista etenemistä. Jos CSS järjestää elementit uudelleen (flex order, grid placement, position absolute), sarkainjärjestys ei vastaa visuaalista järjestystä — tämä hämmentää kaikkia käyttäjiä.
Testatkaa laittamalla hiiri sivuun
Hyödyllisin saavutettavuustesti: irrottakaa hiiri ja yrittäkää käyttää koko sovellusta Tab-, Shift+Tab-, Enter-, välilyönti- ja nuolinäppäimillä. Jos jäätte jumiin, myös käyttäjät jäävät jumiin.
Pikatarkistus
Millä CSS-pseudoluokalla voitte tyylitellä kohdistuksen ääriviivan vain silloin, kun kohdistus on tullut näppäimistöltä eikä hiiren napsautuksesta?
Kertaus: näppäimistönavigointi
Natiiviset vuorovaikutteiset elementit voidaan kohdistaa oletusarvoisesti. Käyttäkää tabindex=0-arvoa vain mukautetuissa käyttöliittymäkomponenteissa; älkää koskaan käyttäkö tabindex>0-arvoa. Näyttäkää kohdistus aina — käyttäkää :focus-visible-pseudoluokkaa. Lisätkää Siirry sisältöön -linkki. Lukitkaa kohdistus modaaleissa ja palauttakaa se sulkemisen jälkeen. Käyttäkää natiivia <dialog>-elementtiä aina kun mahdollista. Siirtäkää kohdistus reitin vaihtuessa h1-elementtiin tai main-elementtiin. Testatkaa laittamalla hiiri sivuun.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Näppäimistönavigointi ja fokuksen hallinta” ilmainen?
Kyllä – oppitunnin ”Näppäimistönavigointi ja fokuksen hallinta” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Näppäimistönavigointi ja fokuksen hallinta”?
Varmista, että kaikki interaktiiviset elementit ovat saavutettavissa Tab-näppäimellä, hallitse fokusta ohjelmallisesti dialogeissa ja reitityksessä sekä luo näkyvät fokusosoittimet Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Näppäimistönavigointi ja fokuksen hallinta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- WCAG-tasot A, AA ja AAA
- Semanttinen HTML perustana
- ARIA-roolit ja -attribuutit
- Näppäimistönavigointi ja fokuksen hallinta