aria-haspopup

Milloin käyttää

Kaikissa ohjauselementeissä, jotka avaavat väliaikaisen kerroksen — painike, joka laukaisee valikon, syöttökenttä, joka avaa yhdistelmäruudun listboxin, tai kuvakepainike, joka avaa dialogin. Attribuutti saa ruudunlukuohjelman ilmoittamaan esimerkiksi “Suodata, valikkopainike” tai “Haku, ponnahdusikkuna”, jolloin käyttäjä tietää, että ohjauselementin painaminen paljastaa lisää käyttöliittymää eikä siirry tai lähetä.

Jätä pois ohjauselementeistä, jotka vain kääntävät saman sivun osion näkyviin — paljastuswidgetin tulee käyttää aria-expanded-attribuuttia yksinään; paljastuva sisältö on osa sivua, ei ponnahdusikkuna.

Miten se toimii

Hyväksyy kiinteän joukon token-arvoja:

• "menu" — avaa role="menu"-elementin (yleisin tapaus valikkopainikeille).
• "listbox" — avaa role="listbox"-elementin, käytetään mukautetuissa yhdistelmäruuduissa.
• "tree" — avaa role="tree"-elementin.
• "grid" — avaa role="grid"-elementin (usein päivämäärävalitsimissa).
• "dialog" — avaa role="dialog"- tai role="alertdialog"-elementin.
• "true" — vastaa arvoa "menu" vanhoista syistä; suosi aina tarkkaa arvoa.
• "false" — eksplisiittinen “ei ponnahdusikkunaa”; oletusarvo.

Yhdistä aria-haspopup attribuuttiin aria-expanded="true|false", jotta AT voi myös ilmoittaa, onko ponnahdusikkuna tällä hetkellä auki. Nämä kaksi attribuuttia tekevät eri asiat — haspopup kertoo “ponnahdusikkuna on olemassa”, expanded kertoo “ja se on nyt näkyvissä”.

Yleisiä virheitä

• aria-haspopup="true" käyttäminen painikkeessa, joka avaa mukautetun päivämäärävalitsimen (joka on todellisuudessa grid tai dialog) — AT ilmoittaa “valikkopainike” ja käyttäjät painavat alanuolta odottaen valikkokohtia.
• aria-expanded-attribuutin unohtaminen. AT sanoo “ponnahdusikkuna” mutta ei koskaan ilmoita avointa/suljettua tilaa, joten käyttäjät eivät tiedä, toimiko napsautus.
• aria-haspopup-attribuutin lisääminen ohjauselementtiin, joka ei avaa ponnahdusikkunaa. Johtaa käyttäjän harhaan.
• aria-haspopup käyttäminen linkissä, joka siirtyy uudelle sivulle. Se ei ole ponnahdusikkuna; anna linkin olla vain linkki.
• Kohdistuksen siirtäminen unohtaminen dialog-ponnahdusikkunaan tai menu-elementin ensimmäiseen menuitem-kohtaan. Attribuutti nimeää ponnahdusikkunatyypin, mutta ei hallitse kohdistusta.
• aria-haspopup="dialog" asettaminen mutta role="dialog" unohtaminen ponnahdusikkunassa. Luvattu semantiikka ei toteudu.

Esimerkki

<!-- Menu button -->
<button
  type="button"
  id="filter-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="filter-menu"
>
  Filter
</button>
<ul id="filter-menu" role="menu" hidden>
  <li role="menuitem">All</li>
  <li role="menuitem">Unread</li>
  <li role="menuitem">Flagged</li>
</ul>