Kohdistuksen siirtäminen ensimmäiseen virheeseen
Ohjatkaa käyttäjät suoraan korjattavaan kohtaan.
Kohdistuksen siirtäminen ensimmäiseen virheeseen on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Tilaus unohtuu lähetyksen jälkeen
Käyttäjä lähettää lomakkeen, sivu näyttää virheet ylhäällä, mutta kohdistus pysyy painikkeessa. Hän ei tiedä, että jokin epäonnistui. 😕
Siirrä kohdistus ongelmaan
Kun lähetys epäonnistuu, siirrä kohdistus ensimmäiseen virheelliseen kenttään. Käyttäjä päätyy suoraan kohtaan, josta korjaaminen alkaa, eikä hänen tarvitse etsiä sitä.
Käytä focus-metodia JavaScriptissä
Etsi ensimmäinen virheellinen ohjain ja kutsu siinä focus()-metodia. Nyt sekä näppäimistöä että ruudunlukijaa käyttävät aloittavat oikeasta kohdasta.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Lue nimi, tyyppi ja virhe
Kun kohdistus siirtyy kenttään, ruudunlukija ilmoittaa yhdellä kertaa kentän nimen, että se on invalid, sekä siihen liitetyn virheen.
Ensimmäinen, ei satunnainen
Kohdista aina dokumentin järjestyksessä olevaan ensimmäiseen virheeseen. Myöhempään kenttään siirtyminen ohittaa ongelmat, jotka käyttäjän on edelleen ratkaistava.
Älä vain vieritä
Virheen vierittäminen näkyviin auttaa hiiren käyttäjää, mutta näppäimistöä ja ruudunlukijaa käyttävät tarvitsevat todellisen kohdistuksen siirron, eivät pelkkää näkymän vieritystä.
Yhteenvetolaatikosta on apua
Kun virheitä on paljon, kohdista ensin yläosan virheiden yhteenvetoon. Luettele jokainen ongelma linkkinä, joka siirtyy kyseiseen kenttään.
<div tabindex="-1" id="errors">
3 errors found
</div>Tee yhteenvedosta kohdistettava
Otsikko tai div ei ole oletusarvoisesti kohdistettava. Lisää tabindex="-1", jotta skripti voi siirtää kohdistuksen siihen ohjelmallisesti.
Yhdistä virheet kenttiin
Yhteenvedossa jokainen kohde on linkki kentän id-arvoon. Sen aktivointi siirtää kohdistuksen suoraan rikkoutuneeseen input-elementtiin.
<a href="#email">Email is required</a>Älä varasta kohdistusta liian aikaisin
Siirrä kohdistusta vain käyttäjän tekemän submit-toiminnon seurauksena, älä jokaisen näppäinpainalluksen jälkeen. Kohdistuksen nykäiseminen kesken kirjoittamisen on hämmentävää ja epämiellyttävää.
Vahvista palautuminen
Kun käyttäjä on korjannut kaiken ja lähettää lomakkeen uudelleen, siirrä kohdistus onnistumisesta kertovaan message-viestiin, jotta hän kuulee toiminnon onnistuneen.
Pikatarkistus
Mihin kohdistus pitäisi siirtää, kun lomakkeen lähetys epäonnistuu?
Kertaus
Siirrä epäonnistumisen jälkeen kohdistus ensimmäiseen virheelliseen kenttään tai kohdistettavaan virheyhteenvetoon, ja onnistuneen lähetyksen jälkeen onnistumisviestiin. ✅
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 ”Kohdistuksen siirtäminen ensimmäiseen virheeseen” ilmainen?
Kyllä – oppitunnin ”Kohdistuksen siirtäminen ensimmäiseen virheeseen” 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 ”Kohdistuksen siirtäminen ensimmäiseen virheeseen”?
Ohjatkaa käyttäjät suoraan korjattavaan kohtaan. 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 3/4.
Kuinka kauan ”Kohdistuksen siirtäminen ensimmäiseen virheeseen”-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
- Virheiden yhdistäminen kenttiin aria-describedby-avulla
- Virheellisen tilan merkitseminen aria-invalid-arvolla
- Kohdistuksen siirtäminen ensimmäiseen virheeseen
- Tekstinsisäinen, tarkistuksen yhteydessä tai lähetyksen yhteydessä: ajoituksella on väliä