Puuttuva ARIA-ylätason rooli

Silktide tarkistaa elementit, joiden ARIA-rooli on mielekäs vain tietynlaisessa säilössä, kuten välilehden, jonka on oltava välilehtiluettelon sisällä, ja varmistaa, että vaadittu säilö on olemassa.

<!-- Ongelma: välilehti ilman ympäröivää tablist-elementtiä -->
<button role="tab">Yleiskatsaus</button>

<!-- Korjaus: sijoita välilehdet niiden vaadittuun säilöön -->
<div role="tablist">
  <button role="tab">Yleiskatsaus</button>
</div>

Miksi tämä on tärkeää

Kohderoolit määritellään niiden asiayhteyden perusteella: tab on kolmas viidestä välilehdestä, option on yksi vaihtoehto luettelossa ja row on osa taulukkoa. päättelevät sijainnin, määrän ja navigointikäyttäytymisen ylätason pienoisohjelmasta. Ilman sitä kohde voidaan tunnistaa väärin, ilmoittaa ilman asiayhteyttä tai ohittaa kokonaan – tekijä on lisännyt puolet pienoisohjelmasta, eivätkä käyttäjät saa kumpaakaan puoliskoa luotettavasti käyttöönsä.

Näin korjaat sen

Sijoita elementti säilöön, jolla on vaadittu rooli – sijoita esimerkiksi role="tab" -elementit role="tablist" -elementin sisään.
Jos ylätason elementti ei voi koodissa fyysisesti ympäröidä lapsielementtejä, lisää loogiseen ylätason elementtiin aria-owns, jotta se omaksuu ne.
Jos elementti ei todellisuudessa ole kyseisenlainen kohde, poista tai korjaa sen rooli.

Yleisiä pareja: tab tarvitsee tablist-roolin; option tarvitsee listbox-roolin; menuitem tarvitsee menu- tai menubar-roolin; ARIA-ryhmässä oleva radio tarvitsee radiogroup-roolin; treeitem tarvitsee tree-roolin; row tarvitsee grid-, table-, treegrid- tai rowgroup-roolin; solut ja otsakkeet tarvitsevat row-roolin.

Näin Silktide testaa tämän

Etsi kaikki elementit, joiden ARIA-rooli edellyttää tiettyä ylätason roolia, ohittaen kaiken alueilla, jotka on merkitty data-silktide="ignore" -attribuutilla, sekä kaiken, joka vastaa verkkosivustollesi määritettyä tarkistuksen poissulkua.
Kulje sen esi-isäelementit ylöspäin ja seuraa myös mahdollisia aria-owns-omaksumisia etsien elementtiä, jolla on vaadittu ylätason rooli.
Raportoi elementit, joille tällaista esi-isäelementtiä ei löydy.

Vianmääritys

Ylätason rooli on elementissä, jolla on implisiittinen rooli

Natiivit elementit kelpaavat: <select>-elementin sisällä oleva <option> tai <ul>-, <ol>- tai <menu>-elementin sisällä oleva <li> ei tarvitse eksplisiittisiä rooleja, koska molemmilla on oikeat roolit implisiittisesti. Löydöksiä ilmenee, kun kohderoolia käytetään ilman soveltuvaa eksplisiittistä tai implisiittistä ylätason elementtiä.

Elementti on kolmannen osapuolen koodissa, jota et voi muuttaa

Jotkin pienoisohjelmat, kuten upotettu kartta, luovat merkinnän, jota et voi muokata. Lisää data-silktide="ignore" pienoisohjelman sisältävään elementtiin, jolloin tämä tarkistus ohittaa kaiken sen sisällä seuraavassa testissä.