Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung
Toegankelijkheid
Waarom zou een gericht element nooit verborgen worden?
Iedereen die door een pagina met het toetsenbord gaat moet zien waar de focus ligt. Kleefkopbalken, banners voor cookies en chatvensters over de inhoud; De focus landt eronder en is onzichtbaar. Niveau AA (2.4.11, nieuw in WCAG 2.2) vereist dat het gerichte element ten minste gedeeltelijk zichtbaar blijft. Niveau AAA criterium 2.4.12 vereist: volledig zichtbaar, geen pixel verduisterd.
Wat het criterium vereist
Wanneer een item een toetsenbordfocus ontvangt, zit er geen enkel deel van achter enige andere inhoud die de auteur heeft gegenereerd: geen plakkerige header of voettekst, geen cookiebanner, geen chatknop, geen referentievenster. Bij het veranderen van focus scrolt de browser alleen zover dat het element het zichtbare gebied binnenkomt; Hij weet niets van hen die erboven staan. De zijde moet er dus zelf voor zorgen dat het oppervlak onder een kleefband tijdens het scrollen helder blijft.
Uitvoering
De CSS eigenschap scroll-padding op de scroll container reserves op en neer zo veel ruimte als de plakstrips zijn hoog; de browser dan scroll uit gerichte elementen onder de bar. Vensters die over de zijkant liggen vangen de focus (focus blijft in het venster) of sluiten wanneer de focus de zijkant binnenkomt. Een chat-knop in de hoek blijft klein of verplaatst zich opzij als je je focust op een element hieronder.
Zo gaan we ermee om
De meting gaat door de pagina met de tabsleutel, meet het zichtbare gedeelte voor elk gericht element en vergelijkt met lijmelementen; Gedeeltelijk zichtbaar voor niveau AA, volledig zichtbaar voor AAA. Dezelfde meting geeft beide waarden. Het criterium behoort tot de categorie AAA in kennis; het verslag bevat het verborgen aandeel per referentiepunt.
Voorbeelden
Gericht veld half onder de chatknop
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }Op niveau AA moet een deel van het gerichte element worden verduisterd en geen pixel op AAA.
- Schuifvulling boven en onder op de hoogte van uw lies.
- Laat cookiebanners en referentievensters de focus vastleggen totdat ze gesloten zijn.
- Ga door elk sjabloon met de tabsleutel en observeer het focusframe; Het mag nergens meer verdwijnen.
- Houd drijvende knopen (chat, up) klein en op een afstand van de rand.
