Esitysrooli vuorovaikutteisessa elementissä
Silktide tarkistaa vuorovaikutteiset elementit, kuten painikkeet, linkit ja lomakekentät, jotka on merkitty pelkästään koristeellisiksi. Vuorovaikutteisen elementin merkitseminen tällä tavalla poistaa sen merkityksen avustavalta teknologialta, vaikka elementti pysyy näytöllä napsautettavana.
<!-- Ongelma: painike toimii edelleen, mutta ei ilmoita mitään -->
<button role="presentation">Poista</button>
<!-- Korjaus: poista rooli -->
<button>Poista</button>
Miksi tämä on tärkeää
-roolit presentation ja none kertovat
, että elementillä
ei ole merkitystä – ne on tarkoitettu semantiikan poistamiseen esimerkiksi
taittotaulukoista. Vuorovaikutteisessa elementissä käytettyinä ne luovat
pahimmanlaisen esteen: ohjausobjektin, jota näkevät hiiren käyttäjät napsauttavat päivittäin,
mutta jonka esittää toimimattomana sisältönä
tai ohittaa kokonaan. Käyttäjä ei voi tietää, että painike on edes olemassa.
Näin korjaat sen
- Poista vuorovaikutteisesta elementistä
role="presentation"tairole="none". Natiivielementit välittävät jo oikean merkityksen ilman roolia. - Jos elementin ei oikeasti pitäisi olla vuorovaikutteinen, tee siitä sellainen:
korvaa se vuorovaikutuksettomalla elementillä, kuten
<div>, ja poista kaikkitabindex-määritteet. - Jos yritit poistaa kääre-elementin merkityksen (esimerkiksi ohjausobjektien ympärillä olevasta taittotaulukosta), aseta rooli kääre-elementtiin, älä sen sisällä oleviin ohjausobjekteihin.
Näin Silktide testaa tämän
- Etsi sivulta kaikki elementit, joilla on
role="presentation"tairole="none". - Selvitä, onko elementti vuorovaikutteinen: painike, linkki tai kuvakartan
alue, jolla on
href, lomakekenttä tai mikä tahansa elementti, joka on sijoitettu näppäimistön sarkainjärjestykseen, kun sentabindexon vähintään 0. - Raportoi jokainen vuorovaikutteinen elementti, jolla on esitysrooli.
Elementtejä, jotka on poistettu sarkainjärjestyksestä negatiivisella tabindex-arvolla, ei
raportoida. Myöskään koristeellisia elementtejä, kuten kuvia tai SVG-grafiikkaa, ei raportoida.
Vianmääritys
Kehys tai kirjasto lisäsi roolin
Jotkin käyttöliittymäkirjastot käyttävät sisäisissä kääre-elementeissään role="presentation" -roolia,
ja toisinaan rooli lisätään väärään elementtiin. Tarkista raportoitu elementti: jos sitä voi
käyttää hiirellä, mutta se on hiljennetty avustavalta teknologialta, korjaus
kuuluu kirjaston käyttötapaasi tai kirjaston ylläpitäjälle.