Web Accessibility Academy · Oppitunti

Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla

Koe alueelta toiselle siirtyminen ruudunlukijalla.

Oppitunti 4/413 vaihetta

Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla on ilmainen Web Accessibility 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 Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.

Siirtykää, älkää vierittäkö

Näkevä käyttäjä silmäilee sivua. Ruudunlukijaa käyttävä käyttäjä sen sijaan siirtyy alueelta toiselle määrittämienne maamerkkien avulla.

Maamerkin pikanäppäin

Useimmissa ruudunlukijoissa on näppäin, jolla maamerkkejä voi selata. NVDA:ssa D-näppäin siirtyy seuraavalle alueelle ilman hiirtä.

Alueluettelo

Käyttäjät voivat myös avata landmarks-luettelon, jossa näkyvät kaikki sivun alueet, ja valita niistä yhden siirtyäkseen suoraan siihen.

Ohittakaa toistuvat osat

Suurin hyöty on ohittaminen. Käyttäjät siirtyvät suoraan uuteen sisältöön ohi header-elementin ja navigoinnin, jotka he ovat jo kuulleet.

VoiceOver-roottori

Macilla VoiceOver-käyttäjät avaavat rotor-roottorin ja valitsevat Landmarks navigoidakseen alueillanne nimen ja roolin perusteella.

Miksi nimet ovat hyödyllisiä

Maamerkkiluettelossa aria-label-arvoistanne tulee valikkokohtia, joten hyvät nimet tekevät siirtymisestä hyödyllistä.

<nav aria-label="Main">...</nav>

Järjestys seuraa DOM-puuta

Maamerkit käydään läpi source-järjestyksessä, joten looginen HTML-järjestys tarkoittaa kaikille loogista siirtymisjärjestystä.

Liian monet maamerkit haittaavat

Jos jokainen laatikko on alue, luettelosta tulee noise-hälyä. Käyttäkää maamerkkejä todellisille sivuosioille, ei yleiseen asetteluun.

Kattakaa koko sivu

Parhaassa tapauksessa kaikki näkyvä sisältö sijaitsee jonkin landmark-maamerkin sisällä. Minkään alueen ulkopuolista irrallista sisältöä on vaikeampi saavuttaa siirtymällä.

Testatkaa itse

Avatkaa ruudunlukija ja painakaa maamerkkien pikanäppäintä. Jos voitte siirtyä sivulla sujuvasti, alueenne toimivat. 🎧

Nopeammin kuin sarkaimella

Maamerkkien välillä siirtyminen on tehokkaampaa kuin Tab-näppäimen painaminen kymmeniä kertoja. Muutama näppäinpainallus korvaa pitkän ja rasittavan etenemisen kaikkien linkkien läpi.

Pikatarkistus

Mikä on maamerkkien avulla navigoinnin tärkein hyöty ruudunlukijaa käyttäville?

Kertaus: siirtykää sivulla

Opitte, miten käyttäjät siirtyvät landmarks-maamerkkien välillä näppäimen tai roottorin avulla, miksi nimetyt alueet ja DOM-järjestys ovat tärkeitä sekä miten toimintaa testataan kuuntelemalla. 🙌

Aloita maksutta

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
30
Oppitunnit
120

Usein kysytyt kysymykset

Onko oppitunti ”Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla” ilmainen?

Kyllä – oppitunnin ”Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla” 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 Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla”?

Koe alueelta toiselle siirtyminen ruudunlukijalla. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility 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 ”Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla”-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ä Web Accessibility Academy-oppitunnilla?

Kyllä. Jokainen Web Accessibility 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

  1. header, nav, main, footer: neljä tärkeintä
  2. Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä
  3. Nimeä useita alueita aria-labelilla
  4. Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla
← Takaisin: Web Accessibility Academy