Tila Yleinen tila

`aria-disabled`

Ilmaisee, että ohjauselementti on havaittavissa ja tarkennettavissa mutta ei reagoi käyttäjän syötteeseen. Suosi natiivista HTML:n disabled-attribuuttia, kun se on käytettävissä; turvaudu aria-disabled-attribuuttiin, kun elementin on pysyttävä tarkennettavana tai näytettävä tooltip.

Käyttötilanteet

Kun painike, linkki, syöttökenttä tai yhdistelmäwidget on tällä hetkellä käyttökyvytön mutta sen pitäisi pysyä sarkailussa, jotta käyttäjät voivat löytää sen ja selvittää miksi se on pois käytöstä. Asetetaan aria-disabled="true" ja muotoillaan elementti visuaalisesti niin, että tila on selvästi havaittavissa.

Vertailu lähiattribuutteihin:

HTML disabled (<button>, <input>, <select>, <textarea>, <fieldset>-elementeille) — poistaa ohjauselementin sarkailusta kokonaan, ei reagoi klikkauksiin, eikä lähetä arvoa lomakkeessa. Käytetään, kun käyttäjällä ei ole mitään tehtävää elementin kanssa.
aria-disabled="true" — ruudunlukuohjelma ilmoittaa “himmennetty” / “ei käytettävissä”, mutta elementti pysyy tarkennettavana. Klikkikäsittelijän suoritus on estettävä erikseen. Käytetään mukautetuille widgeteille, <a>-tunnisteille (jotka eivät tue disabled-attribuuttia) tai kun käytöstäpoistotila tarvitsee tooltippiä selityksenä.
aria-readonly — arvoa ei voi muuttaa, mutta ohjauselementti on edelleen käytettävissä ja tarkennettavissa. Käyttäjä voi kopioida sen, lomake lähettää sen silti.
aria-hidden — poistaa elementin kokonaan saavutettavuuspuusta. Eri tavoite: piilotettu, ei poistettu käytöstä.

Synkronointi

Kelvolliset arvot ovat "true" ja "false". Oletuksena "false" tai jätetään pois, kun käytössä — jokaisen aktiivisen ohjauselementin kohdalle ei tarvitse renderöidä aria-disabled="false".

Kun aria-disabled="true":

Estetään klikkikäsittelijän suoritus. Attribuutti ei itse estä tapahtumia.
Estetään oletusarvoinen näppäimistöaktiviointi (Enter, välilyönti).
Varmistetaan, että visuaalinen tyyli tekee tilan selväksi; tarkistetaan, että se yhä täyttää WCAG 1.4.11 ei-tekstikontrastivaatimuksen (poistettu käytöstä -ulkoasu on nimenomaisesti vapautettu, mutta selkeä visuaalinen vihje on silti parempi käytäntö).

Yleisimmät virheet

aria-disabled="true" ilman klikkikäsittelijän estämistä — elementti näyttää himmennetyltä mutta laukaisee silti toiminnon.
disabled- ja aria-disabled-attribuuttien käyttö samassa elementissä. Natiivi attribuutti paljastaa tilan jo; toinen on tarpeeton.
aria-disabled <a>-elementissä ilman href-attribuutin poistamista tai oletusarvoisen toiminnon estämistä — linkki navigoi silti.
Ohjauselementtien poistaminen käytöstä selittämättä syytä. WCAG 3.3.1 edellyttää virhettä tai ohjetta.
aria-disabled ja aria-hidden sekoittaminen keskenään. Poistetut käytöstä elementit pysyvät saavutettavuuspuussa; piilotetut elementit katoavat siitä.

Esimerkki

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Lähetä tilaus
</button>
<p id="submit-help">Lisää vähintään yksi tuote ostoskoriin aktivoidaksesi lähetyksen.</p>