Näppäimistönavigointi ja kohdistusjärjestys
Varmista, että kaikki toiminnot ovat käytettävissä näppäimistöllä loogisessa järjestyksessä
Näppäimistönavigointi ja kohdistusjärjestys on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Kuka tarvitsee näppäimistönavigointia?
Monet käyttäjät tarvitsevat näppäimistönavigointia:
- Liikuntarajoitteiset käyttäjät — eivät voi käyttää hiirtä
- Tehokäyttäjät — suosivat näppäinoikoteitä
- Ruudunlukijan käyttäjät — navigoivat kokonaan näppäimistöllä
- Kytkinohjauksen käyttäjät — käyttävät näppäinpainalluksia simuloivia painikkeita
Luonnostaan kohdistettavat elementit
Nämä HTML-elementit voidaan oletusarvoisesti kohdistaa näppäimistöllä:
<a href>— Tab siirtää kohdistuksen siihen, Enter aktivoi sen<button>— Tab siirtää kohdistuksen siihen, Enter tai välilyönti aktivoi sen<input>,<textarea>,<select>— Tab siirtää kohdistuksen niihin<details>/<summary>— Tab + Enter
Sarkainjärjestys
Selain määrittää sarkainjärjestyksen seuraavasti:
- Oletusarvoisesti DOM-järjestyksen mukaan — elementit kohdistetaan siinä järjestyksessä kuin ne esiintyvät HTML:ssä
- Positiiviset tabindex-arvot — näihin elementteihin siirrytään ensin nousevassa järjestyksessä
tabindex="0"— lisätään luonnolliseen sarkainjärjestykseen DOM-sijaintinsa kohdalletabindex="-1"— ei kuulu sarkainjärjestykseen; siihen voidaan kohdistaa vain komentosarjalla
Luonnollinen sarkainjärjestys = DOM-järjestys
HTML:n lukemisjärjestyksen tulee vastata visuaalista asettelua:
<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
<!-- BAD: visually reordered with CSS, DOM order broken:
CSS flexbox order: doesn't affect tab order!
Screen readers and keyboard users follow DOM order, not CSS order -->Näkyvä kohdistuksen ilmaisin
WCAG 2.4.7 (taso AA): näppäimistön kohdistuksen on oltava näkyvissä:
/* NEVER do this: */
* { outline: none; } /* removes all focus outlines */
/* GOOD: styled focus indicator: */
:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 3px;
border-radius: 4px;
}
/* :focus-visible shows outline for keyboard only
mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */Mukautetut kohdistustyylit
Suunnittelujärjestelmän kohdistustyylit:
/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}
/* Always ensure 3:1 contrast ratio between
focus indicator and background (WCAG 2.4.11 Level AA) */Looginen kohdistusjärjestys
Kohdistusjärjestyksen tulee olla looginen ja ennakoitava — WCAG 2.4.3 (taso A):
<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->
<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->Ohituslinkit
Ohituslinkkien avulla näppäimistön käyttäjät voivat ohittaa toistuvan navigoinnin:
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Visually hidden until focused: -->
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #0070f3;
color: white;
padding: 0.75rem;
z-index: 9999;
}
.skip-link:focus {
top: 0; /* visible when focused -->
}Modaalin kohdistusansa
Modaalien on pidettävä kohdistus sisällään niiden ollessa avoinna:
<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->
const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');
function openModal() {
modal.removeAttribute('hidden');
modal.querySelector('button, [tabindex="0"]').focus();
}
function closeModal() {
modal.setAttribute('hidden', '');
trigger.focus();
}Näppäinoikotiet
Toteuttakaa näppäinoikotiet tapahtumankuuntelijoilla:
document.addEventListener('keydown', (e) => {
// Close modal on Escape:
if (e.key === 'Escape') closeModal();
// Navigate tabs with arrow keys:
if (e.key === 'ArrowRight') focusNextTab();
if (e.key === 'ArrowLeft') focusPrevTab();
// Submit form on Enter (default behavior in inputs):
// Nothing needed — browser handles this
});Näppäimistönavigoinnin testaaminen
Näppäimistön saavutettavuuden testaaminen:
- Laittakaa hiiri sivuun ja käyttäkää vain näppäimistöä
- Painakaa Tab-näppäintä — pääsettekö jokaiseen vuorovaikutteiseen elementtiin?
- Onko kohdistuksen ilmaisin aina näkyvissä?
- Onko sarkainjärjestys looginen?
- Voitteko käyttää kaikkia toimintoja (lomakkeita, modaaleja ja avattavia valikoita) ilman hiirtä?
- Siirtykää taaksepäin painamalla Shift+Tab
Pikatarkistus
Minkä CSS-ominaisuuden poistamista kaikista elementeistä ei koskaan pidä tehdä näppäimistön saavutettavuuden vuoksi?
Kertaus: näppäimistönavigointi
Näppäimistön saavutettavuuden perusasiat:
- Kaikkiin vuorovaikutteisiin elementteihin on päästävä Tab-näppäimellä
- DOM-järjestys = sarkainjärjestys — vastatkaa visuaalista asettelua
- Älkää koskaan poistako kohdistuksen ääriviivoja — käyttäkää mukautetuissa tyyleissä
:focus-visible-valitsinta - Ohituslinkkien avulla voi ohittaa toistuvan navigoinnin
- Käyttäkää modaaleissa kohdistusansaa ja palauttakaa kohdistus sulkemisen yhteydessä
- Testatkaa käyttämällä sivustoa pelkällä näppäimistöllä
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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Näppäimistönavigointi ja kohdistusjärjestys” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Näppäimistönavigointi ja kohdistusjärjestys”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Näppäimistönavigointi ja kohdistusjärjestys”?
Varmista, että kaikki toiminnot ovat käytettävissä näppäimistöllä loogisessa järjestyksessä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML 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 kohdistusjärjestys”-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ä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML 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
- Miksi saavutettavuus on tärkeää: WCAG-tasot
- Otsikkohierarkia ruudunlukijoita varten
- Kuvien alt-teksti: milloin ja miten
- Näppäimistönavigointi ja kohdistusjärjestys