Gelijktijdige invoer

Silktide zoekt naar stijlen die aanraakinvoer voor de hele pagina uitschakelen of die knoppen en links verbergen voor mensen die een bepaald type aanwijzer gebruiken, zoals een muis of een touchscreen. Pagina's moeten bezoekers in staat stellen elke invoermethode te gebruiken die hun apparaat biedt.

Waarom dit belangrijk is

Mensen wisselen voortdurend van invoermethode: een laptop met een touchscreen, een tablet met een aangesloten toetsenbord, een desktopcomputer met een stylus. Anderen zijn vanwege een beperking afhankelijk van één specifieke invoermethode: iemand met tremoren vindt aanraken misschien gemakkelijker dan een muis, terwijl iemand die een mondstok gebruikt mogelijk alleen een toetsenbord gebruikt. Een pagina die aanraken uitschakelt of bedieningselementen verbergt tenzij je met een muis kunt aanwijzen, sluit deze bezoekers uit van functies die de rest van je publiek wel kan gebruiken.

Dit is de reden achter -succescriterium 2.5.6 (Gelijktijdige invoermechanismen), een vereiste van .

Zo los je het op

Verwijder touch-action: none van het element html of body. Als je dit nodig hebt om een aangepast gebaar te ondersteunen, pas het dan alleen toe op het specifieke element dat het gebaar verwerkt, zoals een kaart of schuifregelaar, en niet op de hele pagina.
Wanneer een mediaquery zoals @media (hover: none) of @media (pointer: coarse) een knop of link verbergt, zorg er dan voor dat dezelfde actie op een andere manier beschikbaar blijft voor deze bezoekers. Pas bedieningselementen aan voor aanraken in plaats van ze te verwijderen.
Als de gemarkeerde stijl echt onschadelijk is — bijvoorbeeld omdat deze een bedieningselement verbergt dat voor iedereen een zichtbaar equivalent heeft — kun je de bevinding .

\/* Probleem: schakelt aanraakinvoer uit voor de hele pagina *\/\nbody {
  touch-action: none;
}

\/* Beter: beperk dit tot het element dat aangepaste gebaren nodig heeft *\/\n.map-canvas {
  touch-action: none;
}

Zo test Silktide dit

Lees de die rechtstreeks in elke pagina is opgenomen, zowel in <style>-blokken als in style-attributen op de elementen html en body.
Meld een pagina wanneer deze aanraken globaal uitschakelt, met touch-action: none toegepast op het element html, body of het hoofdelement.
Meld een pagina wanneer een mediaquery die het type hover of aanwijzer test (zoals hover: hover of pointer: coarse) een interactief element zoals een knop, link of formulierveld verbergt met display: none.
Meld maximaal één bevinding per pagina. Omdat deze patronen soms legitieme toepassingen hebben, worden bevindingen gemarkeerd ter bevestiging in plaats van geteld als bevestigde fouten.

Problemen oplossen

De gemarkeerde stijl is opzettelijk

Sommige pagina's hebben deze patronen echt nodig — een tekentool kan native aanraakgebaren uitschakelen, of een functie die alleen op desktop beschikbaar is kan het hovermenu op aanraakapparaten verbergen terwijl er een andere route naar dezelfde inhoud wordt aangeboden. Als je bevestigt dat er een gelijkwaardige invoermogelijkheid bestaat, keur je de bevinding goed.

Mijn pagina beperkt invoer, maar er is niets gemarkeerd

Silktide leest alleen CSS die in de pagina zelf is opgenomen; regels in afzonderlijke gekoppelde stylesheetbestanden worden niet door deze controle gescand. Ook kan het geen invoerbeperkingen zien die via worden toegepast, zoals scripts die aanraakevenementen op bepaalde apparaten negeren. Een geslaagd resultaat hier garandeert niet dat de pagina aan het succescriterium voldoet.