Ohjetekstit ja pakolliset kentät ilmoitettuna
Välitä vihjeet ja vaatimukset apuvälineteknologialle.
Ohjetekstit ja pakolliset kentät ilmoitettuna 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.
Otsakkeet ovat vasta alku
Kenttä tarvitsee usein muutakin kuin nimen. Vihjeiden ja vaatimusten on välityttävä avustavalle teknologialle, eivätkä ne saa näkyä vain näkeville käyttäjille. 📝
Yhdistä vihjeet aria-describedby-määritteellä
Sijoita ohjeteksti elementtiin ja määritä syötteen aria-describedby viittaamaan sen tunnisteeseen. Nyt vihje luetaan otsakkeen jälkeen.
<input id="pw" aria-describedby="pwhelp">
<p id="pwhelp">At least 8 characters</p>Nimi ja sitten kuvaus
Ruudunlukijat lukevat ensin label-tekstin ja sitten kuvauksen tekstin. Käyttäjä kuulee nimen ja vihjeen luontevassa järjestyksessä.
Viittaa useisiin tunnisteisiin
aria-describedby voi sisältää useita välilyönneillä erotettuja tunnisteita. Yhdistä samaan kenttään vihje ja virheilmoitus.
<input aria-describedby="hint err">Pakollisuuden merkitseminen
Lisää required-määrite, jotta selain valvoo pakollisuutta ja ilmoittaa avustavalle teknologialle, että kenttä on täytettävä.
<input id="name" required>Ilmoitetaan automaattisesti
Kun käytössä on required, ruudunlukija sanoo kentän olevan pakollinen, kun kohdistus siirtyy siihen. Saat tämän automaattisesti ilman ylimääräistä ARIA-merkintää.
Asteriskin ansa
Pelkkä punainen asteriski ei kerro mitään, ja se jää helposti huomaamatta. Yhdistä se required-määritteeseen tai näkyvään pakollisuustekstiin.
Selitä asteriski
Jos käytät asteriskia, lisää lomakkeen lähelle legend, jossa kerrotaan sen merkitsevän pakollisia kenttiä. Älä koskaan jätä symbolia selittämättä.
aria-required varmistuksena
Jos mukautetuissa ohjauskomponenteissa ei ole natiivia validointia, arvo aria-required true välittää saman tilan ruudunlukijoille.
<div role="textbox" aria-required="true"></div>Merkitse sen sijaan valinnaiset
Kun useimmat kentät ovat pakollisia, merkitse sen sijaan ne harvat, jotka ovat valinnaisia. Näin näkymä on selkeämpi ja käytäntö pysyy johdonmukaisena.
Pidä ohjeet näkyvissä
Näytä vihjeet näytöllä, älä vain ruudunlukijoille. Kaikki hyötyvät siitä, että näkevät säännöt ennen virheen tekemistä.
Nopea tarkistus
Miten liität ohjetekstin kenttään ruudunlukijoita varten?
Kertaus
Yhdistä vihjeet aria-describedby-määritteellä ja merkitse täytettäviksi vaaditut kentät required-määritteellä. Nyt jokainen käyttäjä kuulee nimen, ohjeen ja säännöt. ✅
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 ”Ohjetekstit ja pakolliset kentät ilmoitettuna” ilmainen?
Kyllä – oppitunnin ”Ohjetekstit ja pakolliset kentät ilmoitettuna” 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 ”Ohjetekstit ja pakolliset kentät ilmoitettuna”?
Välitä vihjeet ja vaatimukset apuvälineteknologialle. 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 ”Ohjetekstit ja pakolliset kentät ilmoitettuna”-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
- Jokainen syötekenttä tarvitsee oikean label-elementin
- Placeholder ei ole selite
- Ryhmittele kentät fieldset- ja legend-elementeillä
- Ohjetekstit ja pakolliset kentät ilmoitettuna