Placeholder ei ole selite
Miksi katoavat vihjeet eivät palvele oikeita käyttäjiä.
Placeholder ei ole selite on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Houkutteleva oikotie
On houkuttelevaa lisätä kenttään vihjeteksti ja jättää otsake pois. Paikkamerkki on kuitenkin vihje, ei nimi. ⚠️
Se katoaa
Heti kun käyttäjä alkaa kirjoittaa, paikkamerkki katoaa. Nyt jäljelle ei jää mitään, joka kertoisi, mitä varten kenttä on.
<input type="text" placeholder="Full name">Muistikuormitus
Käyttäjien, joilla on muistiin tai tarkkaavaisuuteen liittyviä haasteita, täytyy muistaa vihje sen katoamisen jälkeen. Pysyvä otsake poistaa tämän kuormituksen.
Heikko kontrasti oletusarvoisesti
Paikkamerkkiteksti on yleensä vaaleanharmaata, mikä rikkoo usein kontrastia koskevia sääntöjä. Heikkonäköiset käyttäjät eivät ehkä pysty lukemaan sitä lainkaan.
Näyttää täytetyltä
Harmaa vihjeteksti voi näyttää valmiiksi täytetyltä arvolta. Käyttäjä ohittaa kentän, ja pakollisuudesta ilmoittava virhe tulee yllätyksenä.
Epäjohdonmukainen ruudunlukijoissa
Ruudunlukijoiden tuki paikkamerkin käyttämiselle nimenä on vaihtelevaa ja riippuu selaimesta. Et voi luottaa siihen, että se luetaan ääneen.
Käytä molempia, älä jompaakumpaa
Paikkamerkit sopivat ylimääräisiksi vihjeiksi, esimerkiksi muotoesimerkiksi. Yhdistä ne oikeaan otsakkeeseen äläkä koskaan käytä niitä yksin.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Muotoesimerkit sopivat tähän erinomaisesti
Paikkamerkki sopii erinomaisesti muotoesimerkiksi, kuten päivämäärämalliksi. Otsake kertoo edelleen kentän varsinaisen nimen.
Kelluvat otsakkeet
Kelluvat otsakkeet siirtyvät ylöspäin kirjoittamisen alkaessa ja pitävät nimen näkyvissä. Ne ovat oikeita otsakkeita, jotka vain animoidaan, joten ne täyttävät vaatimukset.
Testaa täyttämällä kenttä
Nopea tarkistus: kirjoita kenttään. Jos et enää pysty päättelemään, mitä kenttä odottaa, paikkamerkki hoiti otsakkeen tehtävää.
WCAG vahvistaa tämän
WCAG:n Labels or Instructions -kriteeri edellyttää selkeää ja pysyvää nimeä. Pelkän paikkamerkin sisältävät kentät eivät yleensä läpäise tarkastuksia.
Nopea tarkistus
Miksi paikkamerkki on huono korvike otsakkeelle?
Kertaus
Paikkamerkki on katoava vihje, ei nimi. Säilytä oikea otsake ja käytä paikkamerkkejä vain ylimääräisinä muotoiluvihjeinä. 💡
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 ”Placeholder ei ole selite” ilmainen?
Kyllä – oppitunnin ”Placeholder ei ole selite” 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 ”Placeholder ei ole selite”?
Miksi katoavat vihjeet eivät palvele oikeita käyttäjiä. 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 2/4.
Kuinka kauan ”Placeholder ei ole selite”-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