Haitarielementit button- ja aria-expanded-määritteillä
Rakentakaa avautuva sisältö, joka ilmoittaa avoimen ja suljetun tilan.
Haitarielementit button- ja aria-expanded-määritteillä on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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ä haitaripaneeli tekee
Haitaripaneeli on otsikoiden muodostama pino, jota laajentamalla ja kutistamalla sisältö tulee näkyviin. Jokainen osio voi avautua itsenäisesti toisin kuin välilehdissä.
Otsikko on painike
Tehkää jokaisesta haitaripaneelin otsikosta oikea painike. Painikkeet voidaan kohdistaa, ne toimivat Enter- ja Space-näppäimillä ja ruudunlukijat ilmoittavat ne automaattisesti.
<button>Shipping details</button>div-otsikko ei toimi
Varokaa napsautettavaa div-elementtiä otsikkona. Siihen ei voi kohdistaa, se ei reagoi näppäimistöön eikä kerro avustavalle teknologialle tehtävästään mitään.
<div onclick="toggle()">Shipping details</div>aria-expanded on avain
Lisätkää painikkeeseen aria-expanded, jotta ruudunlukijat ilmoittavat, onko sisältö kutistettu vai laajennettu. Tämä yksittäinen tila tekee haitaripaneelista saavutettavan.
<button aria-expanded="false">Shipping details</button>Vaihda tila napsautettaessa
Kun käyttäjä aktivoi painikkeen, vaihtakaa aria-expanded-arvoksi vuorotellen true ja false. Pitäkää arvo synkronoituna sen kanssa, näkyykö paneeli todella.
btn.setAttribute("aria-expanded", String(open));Viittaa alueeseen
Käyttäkää painikkeessa aria-controls-määritettä ja asettakaa sen arvoksi avattavan paneelin id. Käyttäjä ymmärtää, minkä sisällön tämä otsikko paljastaa.
<button aria-controls="sec1" aria-expanded="false">More</button>Piilota kutistettu paneeli
Kun osio on suljettu, antakaa sen paneelille hidden-määrite. Tällöin paneeli poistuu sivulta ja saavutettavuuspuusta, kunnes se avataan uudelleen.
<div id="sec1" hidden>Panel content</div>Sijoita otsikot oikeiden otsikkoelementtien sisään
Sijoittakaa jokainen painike oikean otsikon, kuten h3-elementin, sisään. Ruudunlukijan käyttäjät voivat tällöin siirtyä osiosta toiseen otsikkonavigoinnilla.
<h3><button aria-expanded="false">FAQ</button></h3>Älä käytä ARIAa yksittäisissä avattavissa osioissa
Yksittäinen näytä-piilota-toiminto on avattava osio, ei välilehtijoukko. Se tarvitsee vain painikkeen, jossa on aria-expanded, eikä lainkaan tablist- tai tab-rooleja.
Pidä kohdistus painikkeessa
Jättäkää kohdistus vaihtamisen jälkeen käyttäjän painamaan painikkeeseen. Älkää siirtäkö kohdistusta paneeliin, sillä se yllättää näppäimistön käyttäjät.
Miksi aria-expanded on hyvä ratkaisu
Koska painike sisältää oman tilansa, ruudunlukija sanoo joka kerta, onko sisältö laajennettu vai kutistettu. Käyttäjä tietää aina, mitä painikkeen aktivointi tekee.
Pikatarkistus
Rakennatte haitaripaneelin otsikkoa, joka avaa ja sulkee osion. Mikä määrite tekee sen tilasta saavutettavan?
Kertaus: saavutettavat haitaripaneelit
Opitte, että haitaripaneelin otsikko on aria-expanded-määritteen sisältävä painike, joka on otsikon sisällä. Vaihtakaa tilaa, viitatkaa paneeliin ja piilottakaa se suljettuna.
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 ”Haitarielementit button- ja aria-expanded-määritteillä” ilmainen?
Kyllä – oppitunnin ”Haitarielementit button- ja aria-expanded-määritteillä” 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 ”Haitarielementit button- ja aria-expanded-määritteillä”?
Rakentakaa avautuva sisältö, joka ilmoittaa avoimen ja suljetun tilan. 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 3/4.
Kuinka kauan ”Haitarielementit button- ja aria-expanded-määritteillä”-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
- Välilehtirakenne: tablist, tab, tabpanel
- Välilehtien välillä siirtyminen nuolinäppäimillä
- Haitarielementit button- ja aria-expanded-määritteillä
- Avautuva sisältö vai välilehdet: valitkaa oikea