Semantiikka, nimikkeet, roolit ja kohdistus
Käyttäkää asianmukaista semantiikkaa, yhdistäkää nimikkeet syötekenttiin, hyödyntäkää rooleja ja siirtäkää kohdistus sinne, missä käyttäjä sitä tarvitsee.
Semantiikka, nimikkeet, roolit ja kohdistus on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. 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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.
Saavutettavuuden perusteet
Tavoite: Tehkää käyttöliittymästä avustaville teknologioille ymmärrettävä.
- Käyttäkää oikeita elementtejä (button, nav, form)
- Antakaa syötekentille asianmukaiset labelit
- Hallitkaa kohdistusta eri työnkuluissa
Semantiikan ja roolien yleiskatsaus
- Suosikaa natiivista semantiikkaa: button div-elementin sijaan
- Implisiittiset roolit tulevat oikeista elementeistä automaattisesti
- Lisätkää ARIA-määritteitä vain, kun natiivi semantiikka ei riitä
Nimetyt syötekentät (hyvä)
Luokaa syötekentät niihin yhdistetyillä labeleilla ja palautetta varten tarkoitetulla live-alueella.
<div id="root"></div>
Painikkeet ja vaihtokytkimen tila
Käyttäkää oikeaa painiketta ja ilmaiskaa tila toggle-toiminnoissa aria-pressed-määritteellä.
<div id="root"></div>
Kohdistus avattaessa (hyvä käyttökokemus)
Siirtäkää kohdistus juuri avattuun paneeliin, jotta näppäimistöä käyttävät voivat aloittaa kirjoittamisen heti.
<div id="root"></div>
Vinkit ja sudenkuopat
- Suosikaa natiiveja elementtejä ja lisätkää ARIA-määritteitä vain tarvittaessa
- Labelit antavat syötekentille luotettavan nimen
- Hallitkaa kohdistusta peittokuvia avattaessa tai navigoinnin jälkeen
Nimeämisen parhaat käytännöt
Kertaus
Kertaus: Käyttäkää oikeaa semantiikkaa, yhdistäkää labelit syötekenttiin, ilmaiskaa tila roolien ja ARIA-määritteiden avulla tarvittaessa ja siirtäkää kohdistus seuraavaan toimintapaikkaan.
Opi React 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
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Semantiikka, nimikkeet, roolit ja kohdistus” ilmainen?
Kyllä – oppitunnin ”Semantiikka, nimikkeet, roolit ja kohdistus” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Semantiikka, nimikkeet, roolit ja kohdistus”?
Käyttäkää asianmukaista semantiikkaa, yhdistäkää nimikkeet syötekenttiin, hyödyntäkää rooleja ja siirtäkää kohdistus sinne, missä käyttäjä sitä tarvitsee. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.
Kuinka kauan ”Semantiikka, nimikkeet, roolit ja kohdistus”-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ä React Academy-oppitunnilla?
Kyllä. Jokainen React 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
- Semantiikka, nimikkeet, roolit ja kohdistus
- Näppäimistövuorovaikutus ja ohituslinkit
- Saavutettavuuden testaamisen perusteet