aria-label vai aria-labelledby
Valitkaa nimi suoraan tekstistä tai viittauksella.
aria-label vai aria-labelledby 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.
Kaksi tapaa antaa nimi
Kun natiivi nimeäminen ei riitä, käytettävissänne on kaksi ARIA-työkalua: aria-label upotetulle merkkijonolle ja aria-labelledby olemassa olevaan tekstiin viittaamiseen.
aria-label sisältää merkkijonon
Käyttäkää aria-label-määritettä, kun näkyvää tekstiä ei ole lainattavaksi. Kirjoitatte lausuttavan nimen suoraan elementtiin.
<button aria-label="Search">🔍</button>aria-labelledby sisältää tunnisteen
Käyttäkää aria-labelledby-määritettä, kun sivulla näkyvä teksti voi toimia nimenä. Sen arvona on kyseisen elementin id, ei merkkijono.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>Suosikaa näkyvää tekstiä
Käyttäkää ensin aria-labelledby-määritettä. Näytöllä näkyvän tekstin uudelleenkäyttö pitää lausutun ja näkyvän nimen automaattisesti synkronissa.
labelledby voi yhdistää tunnisteita
Antakaa aria-labelledby-määritteelle useita välilyönnein erotettuja tunnisteita, niin selain yhdistää niiden tekstit tässä järjestyksessä yhdeksi nimeksi.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby ohittaa labelin
Jos molemmat ovat käytössä, aria-labelledby voittaa. Selain jättää aria-label-määritteen kokonaan huomiotta, joten älkää olettako niiden yhdistyvän.
Elementti voi nimetä itsensä
aria-labelledby-määritteellä elementti voi viitata omaan id-tunnisteeseensa. Tämä on kätevää, kun alue halutaan nimetä sen näkyvän otsikkotekstin perusteella.
label on näkymätön
aria-label ei koskaan näy näytöllä. Se muuttaa vain sen, mitä avustava teknologia ilmoittaa, joten näkevät käyttäjät eivät huomaa eroa.
Varokaa käännösloukkua
aria-label on tavallista tekstiä, jonka sivujen kääntäjät usein ohittavat, kun taas labelledby käyttää näkyvää sisältöä, joka käännetään.
Tunnisteiden on täsmättävä tarkasti
aria-labelledby-määritteen id-tunnisteen on vastattava oikean elementin id-tunnistetta. Kirjoitusvirhe jättää elementin hiljaisesti kokonaan ilman laskettua nimeä.
Valitkaa totuuden lähteen perusteella
Kysykää, missä nimi sijaitsee. Jos se näkyy jo näytöllä, käyttäkää aria-labelledby-määritettä; jos se on olemassa vain avustavaa teknologiaa varten, käyttäkää aria-label-määritettä.
Pikatarkistus
Osiossa näkyy jo h2-otsikko. Miten osio pitäisi nimetä?
Kertaus: label vai labelledby
Opitte käyttämään aria-labelledby-määritettä olemassa olevalle näkyvälle tekstille ja aria-label-määritettä näkymättömille upotetuille nimille ilman oletusta niiden yhdistymisestä. 🎯
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 ”aria-label vai aria-labelledby” ilmainen?
Kyllä – oppitunnin ”aria-label vai aria-labelledby” 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 ”aria-label vai aria-labelledby”?
Valitkaa nimi suoraan tekstistä tai viittauksella. 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 ”aria-label vai aria-labelledby”-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
- Saavutettavan nimen laskenta selkokielellä
- aria-label vai aria-labelledby
- aria-describedby lisäkontekstia varten
- Yleiset nimeämisvirheet, jotka hiljentävät ohjausobjektit