Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa
Miksi natiivi HTML on lähes aina parempi valinta.
Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Mitä ARIA todella on
ARIA on joukko HTML-attribuutteja, jotka kertovat avustavalle teknologialle, mikä elementti on ja mitä se tekee, kun merkintä yksin ei pysty kertomaan sitä.
ARIA ei muuta toimintaa
Tässä on juju: ARIA muuttaa vain sen, mitä ilmoitetaan. Se ei itsessään lisää napsautuksia, kohdistusta tai näppäimistötukea.
<div role="button">Save</div>
<!-- looks like a button, does nothing -->ARIAn ensimmäinen sääntö
Virallinen ensimmäinen sääntö kuuluu: jos natiivi HTML-elementti pystyy hoitamaan tehtävän, käyttäkää sitä sen sijaan, että loisitte sen uudelleen ARIAlla.
Natiivi sisältää kaiken valmiina
Aito painike saa kohdistuksen, aktivoituu Enterillä ja välilyönnillä sekä ilmoittaa roolinsa automaattisesti. Teidän ei tarvitse kirjoittaa mitään näistä itse.
<button>Save</button>
<!-- focus, keyboard, role: all built in -->Miksi huono ARIA on pahempi
Väärä rooli johtaa käyttäjiä aktiivisesti harhaan. Huono ARIA on pahempaa kuin ei ARIAa vain aiheuttamansa haitan vuoksi: se voi piilottaa sisältöä tai kuvata sen väärin.
Ohituksen ansa
ARIA ohittaa natiivin semantiikan. Jos lisäätte otsikkoon role=presentation, ruudunlukijat eivät enää käsittele sitä lainkaan otsikkona.
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->Kolme asiaa, jotka ARIA tarjoaa
ARIA tarjoaa täsmälleen kolmenlaista tietoa: roolin (mikä elementti on), tilat ja ominaisuudet. Siinä on koko työkalupakki.
ARIA ei vaikuta CSS:ään
Kun asetatte elementille aria-hidden-määritteen, se piilotetaan ruudunlukijoilta, mutta se pysyy täysin näkyvänä näytöllä. Nämä kaksi tasoa ovat erillisiä.
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->Milloin ARIA on oikea ratkaisu
Käyttäkää ARIAa, kun mikään natiivi elementti ei sovi tilanteeseen, esimerkiksi tablistassa tai mukautetussa liukusäätimessä. Käyttäkää sitä sitten täsmällisesti ja testatkaa toteutus.
Yhdistäkää ARIA JavaScriptiin
Jos joudutte rakentamaan mukautetun käyttöliittymäkomponentin, ARIA ja JavaScript kuuluvat yhteen. ARIA nimeää komponentin, ja JS huolehtii kohdistuksesta sekä näppäimistölogiikasta.
Vähemmän on enemmän
Parhaiten saavutettavalla sivulla on usein hyvin vähän ARIAa. Käyttäkää ensin semanttista HTML:ää ja ARIAa vain täyttämään sen jättämät aukot.
Pikatarkistus
Tarvitsette napsautettavan Tallenna-toiminnon. Mikä on saavutettavin vaihtoehto?
Kertaus: käyttäkää ARIAa harkiten
Opitte, että ARIA kuvaa toimintaa mutta ei koskaan toteuta sitä. Suosikaa natiivia HTML:ää, lisätkää ARIAa vain todellisten puutteiden korjaamiseksi ja testatkaa aina. 🎯
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 ”Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa” ilmainen?
Kyllä – oppitunnin ”Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa” 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 ”Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa”?
Miksi natiivi HTML on lähes aina parempi valinta. 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 1/4.
Kuinka kauan ”Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa”-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
- Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa
- Roolit määrittävät, mikä asia on
- Tilat ja ominaisuudet: expanded, checked, disabled
- Saavutettavuuspuun lukeminen ARIA-ongelmien selvittämiseksi