aria-level

Milloin käyttää

role="heading"-elementeissä otsikon syvyyden ilmaisemiseen — ARIA:n vastine <h1>–<h6>:n valitsemiselle. Natiivit otsikkoelementit tulisi olla ensisijainen valintasi; turvaudu role="heading" + aria-level-yhdistelmään vain, kun tarvitset yli 6:n tason tai kun sovelluskehys estää otsikkoelementtien suoran käytön.

Kelvollinen myös role="treeitem"-elementeissä (syvyys puussa, alkaen 1 ylimmän tason kohteille) ja role="listitem"-elementeissä sisäkkäisessä role="list"-elementissä, kun sisäkkäisyys ei ilmene DOM-rakenteesta.

Miten se toimii

Arvo on positiivinen kokonaisluku. Otsikoissa 1–6 vastaa <h1>–<h6>-elementtejä; arvot yli 6:n ovat kelvolliset ARIA:ssa, mutta vain harvat ruudunlukuohjelmat ilmoittavat ne, joten älä luota tason 7 ilmoittamiseen sellaisenaan.

Puun kohteiden tapauksessa taso on syvyys: puun juuri on taso 1, sen välittömät lapset ovat taso 2 ja niin edelleen. Tasoluku antaa ruudunlukuohjelman käyttäjän ymmärtää, missä kohtaa hierarkiaa hän on, ilman että hänen tarvitsee nähdä sisennystä.

Attribuutti ei muuta visuaalista tyyliä. Jos “ARIA-otsikkotaso 4” -elementtisi täytyy näyttää h4:ltä, tyylittele se itse.

Yleisiä virheitä

• role="heading" + aria-level="3" käyttäminen pelkän <h3>-elementin sijaan. Natiivi elementti antaa roolin, tason, oletusnavigoinnin ja dokumentin rakenteen integraation ilmaiseksi.
• aria-level-attribuutin asettaminen elementtiin ilman role="heading", role="treeitem" tai role="listitem" — attribuutilla ei ole vaikutusta esimerkiksi <button>- tai <div>-elementissä ilman roolia.
• Tason ohittaminen — taso 2 suoraan tason 4 perässä hämmentää dokumentin rakennetta ja laukaisee SC 1.3.1 -auditointiongelmia.
• Puun kohteiden väärä taso: tason 2 kohteen jokaisen lapsen täytyy olla taso 3. Yhdellä-virheet tässä rikkovat “siirrytty ylemmälle tasolle” / “siirrytty alemmalle tasolle” -ilmoitukset.
• Ei-kokonaisluku- tai nolla-arvot. Vain positiiviset kokonaisluvut ovat kelvolliset; aria-level="0" sivuutetaan.
• aria-level-attribuutin päivittäminen unohtaminen, kun kohteita siirretään vedettävässä puussa.

Esimerkki

<!-- Heading deeper than h6 (rare; needed in complex outlines) -->
<div role="heading" aria-level="7">Sub-sub-sub-section</div>

<!-- Treeitems express depth via aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documents
    <ul>
      <li role="treeitem" aria-level="2">Invoices</li>
      <li role="treeitem" aria-level="2">Contracts</li>
    </ul>
  </li>
</ul>