aria-pressed

Milloin käyttää

Painikkeessa, joka toimii vaihtimena — mykistä / poista mykistys, seuraa / lopeta seuraaminen, lihavoitu / ei lihavoitu tekstieditorissa, sivupalkki auki / sivupalkki suljettu. Painike vaihtaa tilaa muttei suorita navigointia; otsikko pysyy samana ja vain painettu tila viestii muutoksesta.

Kolme arvoa on kelvollisia:

• aria-pressed="false" — vaihto on pois päältä.
• aria-pressed="true" — vaihto on päällä.
• aria-pressed="mixed" — käytetään, kun vaihto ohjaa useita alakohtia ja ne ovat sekatilassa (osa päällä, osa pois). Harvinainen käytännössä; useimmat kehittäjät jakavat erillisiin ohjaimiin.

Jos painike ei vaihda tilaa — se vain lähettää lomakkeen tai avaa modaalin — älä käytä aria-pressed-attribuuttia. Käytä aria-expanded-attribuuttia paljastussäätimille tai jätä tilaattribuutti kokonaan pois tavallisille toimintapainikkeille.

Synkronoinnin ylläpito

aria-pressed on tila, mikä tarkoittaa, että se muuttuu käyttäjän vuorovaikutuksen myötä. Napsautuskäsittelijän, joka päivittää painikkeen ulkoasun, täytyy myös päivittää attribuutti. Ne eivät saa koskaan olla ristiriidassa — jos kuvake näyttää mykistettyä, aria-pressed-attribuutin pitäisi sanoa "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Yleiset virheet

• aria-pressed-asetus ei-painikkeelle (<div>- tai <a>-elementille). Käytä role="button" tai, paremmin, vaihda <button>-elementtiin.
• Visuaalisen tilan vaihto CSS:llä ilman aria-pressed-attribuutin päivittämistä. Ruudunlukuohjelman käyttäjät kuulevat aina saman tilan.
• aria-pressed="true" käyttö painikkeessa, joka ei vaihda tilaa (“Lähetä”-painike) — sekoittaa avustavan teknologian ilmoittamaan epäolennaisen tilan.
• aria-pressed-attribuutin sekoittaminen aria-selected-attribuuttiin (kohteille yksivalintaisessa elementissä kuten välilehti tai optio) tai aria-checked-attribuuttiin (valintaruuduille ja radiopainikkeille). Jokaisella on eri semantiikka; valitse elementtimallia vastaava.