aria-expanded

Käyttötilanteet

Ohjauselementissä, joka avaa ja sulkee toisen käyttöliittymäalueen: tekstipaneelin otsikko, “näytä lisää” -paljastauspainike, yhdistelmälaatikon laukaisin, valikkonappi, treeitem alielementteineen tai hampurilaisvalikkopainike. Ohjauselementti pysyy samana molemmissa tiloissa — vain attribuutti vaihtuu.

Jos ohjauselementti vaihtaa tilaa itsessään (mykistä / poista mykistys, seuraa / lopeta seuraus), käytetään aria-pressed-attribuuttia. aria-expanded kuvaa suhdetta toiseen alueeseen, joka tunnistetaan yleensä aria-controls-attribuutilla.

Rooli määrää, onko aria-expanded mielekäs: se on tuettu button-, combobox-, link-, tab-, treeitem-, menuitem-, gridcell-, row-rooleissa ja muutamissa muissa. Sen lisääminen <div>-elementtiin ilman roolia ei tuota hyötyä.

Synkronointi

Kelvolliset arvot ovat "true" (alue on auki) ja "false" (alue on suljettu). Oletusarvo jätettynä pois on “ei lainkaan laajennustilaa” — mikä eroaa "false"-arvosta. Jos ohjauselementti on koskaan laajennettavissa, renderöidään aria-expanded="false" suljetussa tilassa sen sijaan, että se jätettäisiin pois.

Attribuutti päivitetään samassa koodipolulla, jossa alueen avaaminen tai sulkeminen animoidaan. Attribuutti on totuuden lähde, jota ruudunlukuohjelmat lukevat; visuaalinen nuolisymboli on toissijainen vihje näkeville käyttäjille.

Yhdistetään aria-controls="<alueen-id>", jotta ruudunlukuohjelma voi ilmoittaa suhteen: “Suodattimet, painike, suljettu, ohjaa filter-panel-elementtiä”. Jotkin apuvälineteknologiat tarjoavat pikakomennon ohjattuun alueeseen siirtymiseksi.

Yleisimmät virheet

• Paneeliin lisätään CSS-luokka mutta aria-expanded jätetään päivittämättä.
• aria-expanded käytetään interaktiottomassa elementissä ilman roolia. Attribuutti ohitetaan.
• Vain aria-expanded="true" renderöidään — ei koskaan "false"-tilaa. Ruudunlukuohjelma ei ilmoita mitään suljetussa tilassa.
• aria-expanded käytetään ohjauselementissä, joka ei oikeasti laajenna mitään aluetta (esim. “Lähetä”-painike).
• aria-expanded ja aria-pressed sekoitetaan vaihtopainikkeissa, jotka eivät avaa erillistä aluetta.
• aria-controls jätetään pois, jolloin laukaisimen ja paneelin välinen suhde jää implisiittiseksi.

Esimerkki

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Suodattimet
</button>

<div id="filters-panel" hidden>
  <!-- suodatinelementit -->
</div>