Drupal heeft een goede reputatie op het gebied van gebruiksvriendelijkheid en toegankelijkheid. In deze serie van zes blogs kijken we naar hoe Drupal het doet en waar nog verbeterpunten liggen. Na deel 1 over de paginastructuur, kijken we in dit tweede deel naar de toegankelijkheid en WCAG-ondersteuning van de navigatie in Drupal. Het doel van Drupal is om ondersteuning te bieden voor WCAG 2.1 AA. We gaan kijken in hoeverre dat al lukt.
Dit is het tweede deel, uit een serie van zes.
Bij navigatie gaat het onder meer om menu’s, de breadcrumb en links (met de :hover, :focus, :active en :visited-statussen). De skip-link is al genoemd in deel 1 over de paginastructuur. Zorg altijd dat er meerdere manier zijn om op een site te navigeren, niet alleen een menu, maar ook een zoekmogelijkheid en/of een sitemap.
De richtlijnen bevelen aan om een menu op te bouwen met een <nav>-element waarin een kop van het niveau 2 (<h2>) en een (ongeordende) lijst (<ul> / <li>) met links (<a>) zijn opgenomen. Daarbij zijn een aantal attributen verplicht of worden aangeraden.
Drupal bouwt de menu’s als volgt op:
<nav aria-labelledby="block-main-menu-menu" role="navigation">
<h2 id="block-main-menu-menu" class="visually-hidden">Main menu</h2>
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/our-products">Our products</a></li>
<li><a href="/contact-us">Contact us</a></li>
</ul>
</nav>Zoals de WCAG voorschrijft, is <nav>-element voorzien van een aria-labelledby-attribuut dat correct verwijst naar (het id van) de <h2>. De aria-role mag worden weggelaten, die wordt toegevoegd voor screen readers die het nav-element niet ondersteunen. Dit is doorgaans niet meer relevant, maar dit kan verschillen voor specifieke doelgroepen.
De kop heeft een class “visually-hidden”, dit is een class in Drupal die zorgt dat het betreffende element niet zichtbaar is, maar wel wordt voorgelezen door screen readers. Verder bestaat het menu – zoals geadviseerd – uit een lijst met links. Er zal aangegeven moeten worden welke van de links de huidige pagina is, dit kan op een aantal manieren, maar Drupal doet dit vanaf de volgende versie (10.3) heel netjes met het aria-current-attribuut. Zie daarvoor issue 3038523.
Kortom, de Drupal navigatie heeft een goede toegankelijkheid en voldoet (vanaf 10.3) aan de WCAG.
Neem contact op en laat een volledige audit uitvoeren. Samen kijken we hoe we dit voor jouw specifieke implementatie op kunnen lossen.
