HTML5-oriëntatiepuntelementen worden gebruikt om de navigatie te verbeteren

HTML5-elementen zoals main , nav en aside fungeren als oriëntatiepunten of speciale gebieden op de pagina waar schermlezers en andere ondersteunende technologieën naartoe kunnen springen. Door oriëntatiepuntelementen te gebruiken, kunt u de navigatie-ervaring op uw site voor gebruikers van ondersteunende technologie aanzienlijk verbeteren. Lees meer in HTML 5 en ARIA Landmarks van Deque University.

Hoe u oriëntatiepunten handmatig kunt controleren

Gebruik de lijst met oriëntatiepunten van het W3C om te controleren of elk hoofdgedeelte van uw pagina een oriëntatiepuntelement bevat. Bijvoorbeeld:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

U kunt ook tools zoals de Accessibility Insights-extensie van Microsoft gebruiken om uw paginastructuur te visualiseren en secties op te vangen die niet in oriëntatiepunten voorkomen:

Schermafbeelding van web.dev met oriëntatiepunten gemarkeerd door de Accessibility Insights-extensie

Hoe u oriëntatiepunten effectief kunt gebruiken

  • Gebruik oriëntatiepuntelementen om belangrijke delen van uw pagina te definiëren in plaats van te vertrouwen op algemene elementen zoals <div> of <span> .
  • Gebruik oriëntatiepunten om de structuur van uw pagina over te brengen. Het <main> -element moet bijvoorbeeld alle inhoud bevatten die rechtstreeks verband houdt met het hoofdidee van de pagina, dus er mag er maar één per pagina zijn. Bekijk MDN's samenvatting van inhoudssectie-elementen om te leren hoe u elk oriëntatiepunt kunt gebruiken.
  • Gebruik oriëntatiepunten oordeelkundig. Het hebben van te veel oriëntatiepunten kan de navigatie zelfs moeilijker maken voor gebruikers van ondersteunende technologie, omdat het voorkomt dat ze gemakkelijk naar het gewenste stuk inhoud kunnen springen.

Zie het bericht Koppen en oriëntatiepunten voor meer informatie.

Bronnen