Succescriterium 2.4.7 Focus zichtbaar

Niveau AA

Lees de officiële tekst van succescriterium 2.4.7 Focus zichtbaar

• Zichtbare focus: de focusring

  Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

  In de code ziet dat er zo uit:

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
    outline-offset: 2px;
    box-shadow:
      0 0 0 2px #FFFFFF,              /* binnenring: licht */
      0 0 0 5px #08251C;              /* buitenring: donker */
    border-radius: 6px;
  }

  De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

  Gebruik :focus-visible en niet :focus. Met :focus krijgt ook een bezoeker die met de muis klikt een rand om zijn knop. Met :focus-visible bepaalt de browser het zelf: een rand bij het toetsenbord, geen rand bij de muis.

  Drie oplossingen die niet genoeg zijn:

  • Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
  • De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
  • Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet kleur anders Je ziet slecht

  Hulpmiddelen

  Schakelaar Schermvergroting Toetsenbord

  Open dit onderwerp op een eigen pagina

• Zichtbare focus: zo test je het

  De zichtbaarheid van de focus is met het toetsenbord te toetsen. Er is geen software voor nodig.

  Ga als volgt te werk:

  • Open de pagina en klik één keer bovenaan, buiten een link of invoerveld.
  • Druk op Tab, en blijf drukken tot je onderaan de pagina bent.
  • Kijk bij elke druk of zichtbaar is welk onderdeel is geselecteerd.

  Let daarbij op vier dingen:

  • Verdwijnt de focus? Er verandert niets in beeld, terwijl er wel iets is geselecteerd.
  • Springt de focus heen en weer? Dan klopt de volgorde niet met wat er staat. Dat valt onder 2.4.3.
  • Kom je ergens niet meer weg? Een venster of videospeler die je met Tab niet uit komt is een toetsenbordval.
  • Schuift de pagina mee? Staat het geselecteerde onderdeel half onder een vaste balk, dan valt dat onder 2.4.11.

  Is de focus nergens te zien, zoek dan in het stijlbestand naar deze regels:

  outline: none;
  outline: 0;

  Staan die er, en staat er geen eigen rand voor in de plaats, dan is de oorzaak gevonden.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Schakelaar Schermvergroting Toetsenbord

  Open dit onderwerp op een eigen pagina

• Zichtbare focus: wat het criterium vraagt

  Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

  Dit raakt vooral:

  • Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
  • Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
  • Bezoekers die met een schakelaar of met hun stem werken.

  De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

  Dit criterium gaat alleen over de zichtbaarheid van de focus. Of de rand genoeg contrast heeft valt onder 1.4.11 Contrast van niet-tekstuele content, de volgorde onder 2.4.3 Focus volgorde, en of de rand achter een balk verdwijnt onder 2.4.11.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet kleur anders Je ziet slecht

  Hulpmiddelen

  Schakelaar Schermvergroting Toetsenbord

  Open dit onderwerp op een eigen pagina