Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä
Miksi oikea painike voittaa tyylitellyn span-elementin joka kerta.
Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä 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.
Perusvalinta
Jokaisen ohjausobjektin kohdalla on tehtävä yksi valinta: käytätkö alkuperäistä HTML-elementtiä vai rakennatko mukautetun elementin itse. Alkuperäinen voittaa lähes aina.
Aito painike toimii suoraan
Alkuperäinen button voidaan kohdistaa, sitä voi käyttää hiirellä, näppäimistöllä ja kosketuksella, ja se ilmoitetaan oikein. Kirjoitat yhden tunnisteen, ja alusta hoitaa loput.
<button>Buy now</button>Tyylitelty span ei toimi
Kun span muotoillaan painikkeen näköiseksi, sillä ei edelleenkään ole roolia, kohdistusta tai näppäimistötukea. Se huijaa vain silmää.
<span class="button">Buy now</span>Mukautetun ratkaisun hinta
Jotta mukautettu ohjain toimisi, sille on lisättävä role, tabindex sekä Enter- ja Space-näppäinten käsittelijät. Yhden elementin jäljittelyyn tarvitaan paljon koodia.
<span role="button" tabindex="0">Buy now</span>Ja jotain unohtuu varmasti
Huolellisistakin mukautetuista ohjaimista jää helposti reunatapauksia huomioimatta: kohdistusrenkaat, käytöstä poistetut tilat ja kosketus. Natiivi element käsittelee ne kaikki valmiiksi.
Natiivi on muutakin kuin painikkeita
Tämä pätee koko alustaan. Oikea select-, valintaruutu- tai details-elementti tarjoaa toiminnallisuuden ja esteettömyyden, jota div-jäljitelmä ei koskaan täysin saavuta.
<input type="checkbox"> Remember meLomakkeet suosivat natiivia
Natiivit lomakeohjaimet lähetetään form-elementin mukana, ne tarkistavat tietonsa itse ja yhdistyvät nimikkeeseen automaattisesti. Kaiken tämän rakentaminen käsin on harvoin vaivan arvoista.
Milloin mukauttaminen on perusteltua
Käyttäkää custom-ratkaisua vain, kun rakenteelle ei ole olemassa natiivia elementtiä, kuten välilehtikäyttöliittymälle tai puulle. Noudattakaa silloin huolellisesti hyväksi todettua toteutusmallia.
Tyylitelkää natiivia vapaasti
Huolestuttaako, että oikea painike näyttää pelkistetyltä? Voitte style-määritteillä tyylitellä natiiveja elementtejä runsaasti CSS:n avulla. Säilyttäkää semantiikka ja muuttakaa ulkoasu haluamanne kaltaiseksi.
Vähemmän koodia, enemmän kestävyyttä
Kun valitsette oikean element-elementin, JavaScriptiä tarvitaan vähemmän, virheitä syntyy vähemmän ja ohjain kestää selainten ja avustavien teknologioiden päivitykset ilman lisätyötä.
Perussääntö
Tehkää tästä oletus: ensin native, mukautettu ratkaisu vasta viimeisenä keinona. Verkkoalusta tarjoaa valtavan esteettömyyshyödyn, joten antakaa sen tehdä työ.
Pikatarkistus
Päättäkäämme, käytetäänkö natiivia vai mukautettua ratkaisua.
Kertaus
Valitkaa ensin native: oikea painike tai syötekenttä tarjoaa kohdistuksen, näppäimet ja semantiikan automaattisesti. Käyttäkää mukautettua ratkaisua vain, kun sopivaa elementtiä ei ole, ja tyylitelkää natiiveja elementtejä vapaasti. 🎉
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 ”Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä” ilmainen?
Kyllä – oppitunnin ”Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä” 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 ”Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä”?
Miksi oikea painike voittaa tyylitellyn span-elementin joka kerta. 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 ”Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä”-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
- Tageilla on merkitys: miksi div-soppa epäonnistuu
- Tekstielementit: kappaleet, luettelot ja korostukset
- Esteettömyyspuu: mitä ruudunlukijat kuulevat
- Natiivi vai mukautettu: milloin kannattaa käyttää oikeaa elementtiä