Direct naar de inhoud

Test of je vaste balk de focus bedekt

Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.

Ga als volgt te werk:

  • Scroll een halve pagina naar beneden.
  • Klik ergens in de tekst, buiten een link.
  • Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
  • Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.

Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.

Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:

document.addEventListener('focusin', function (e) {
  var r = e.target.getBoundingClientRect();
  var boven = document.elementFromPoint(r.left + 4, r.top + 4);
  if (boven && boven !== e.target && !e.target.contains(boven)) {
    console.warn('bedekt door', boven, e.target);
  }
});

Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.

Terug naar boven