Menu accessible sur WordPress : Menu mobile

Le fameux menu burger ou menu à tiroir, voici les étapes pour le mettre en place, de manière accessible, sur WordPress. C’est parti !

Ajout d’un bouton sur mobile

Sur mobile, nous allons ajouter un bouton qui permet d’afficher notre menu, qui est masqué par défaut. Si vous avez bien suivi la partie 2, nous aurons donc besoin des attributs aria-expanded et aria-controls.

Reprenons notre fichier header.php.

Nous allons ajouter un bouton, à l’intérieur de notre nav et le positionner avant la fonction wp_nav_menu() :

<nav role="navigation" aria-label="<?php esc_html_e( 'Menu principal', 'text-domain' ); ?>">
    <button type="button" aria-expanded="false" aria-controls="primary-menu" class="menu-toggle">
        <?php esc_html_e( 'Menu', 'text-domain' ); ?>
    </button>
    <?php
    wp_nav_menu([
        'theme_location' => 'main-menu',
        'container'      => false,
        'walker'         => new A11y_Walker_Nav_Menu(),
        'menu_id'        => 'primary-menu',
    ]);
    ?>
</nav>

Dans le DOM, il est important que le bouton se trouve avant le menu afin d'assurer un ordre de tabulation cohérent pour les personnes naviguant au clavier.

Il faut maintenant lier la valeur du aria-controls à notre menu. Plutôt simple, c’est la dernière ligne ajoutée à la fonction wp_nav_menu() : 'menu_id' => 'primary-menu'.

Comme l’indique le codex : menu_id permet d’ajouter un id à la balise <ul> qui structure le menu.

Et voilà, le bouton est correctement positionné et lié à notre menu. Il ne reste plus qu'à rendre interactif le bouton.

Ajout du JavaScript

Côté JavaScript, il n’y a pas de changement par rapport a ce que l’on a déjà vu dans la partie 2. Lorsque le menu est ouvert, nous modifions la valeur de aria-expanded à true pour restituer l’information aux lecteurs d’écran. Et inversement lorsqu'il est fermé.

Nous en profitons pour ajouter une classe toggled sur notre <nav> qui nous aidera à gérer l’affichage en CSS :

/** @type {HTMLElement} */
const siteNavigation = document.querySelector( 'nav' );

/**
 * @param {HTMLElement} el
 * @param {string}      attr
 * @param {any}         value
 */
 const setAttr = ( el, attr, value ) => el.setAttribute( attr, value );

if ( siteNavigation ) {
  /** @type {HTMLElement} */
  const mobileButton = siteNavigation.querySelector( 'button.menu-toggle' );

  /**
    * Au clic sur le bouton mobile, on affiche ou masque le menu :
    * - on ajouter/supprime la classe "toggled" sur la <nav> qui nous servira à masquer/afficher en css
    * - on passe l'attribut "aria-expanded" à true/false
    */
    if ( mobileButton ) {
      mobileButton.addEventListener( 'click', function() {
        siteNavigation.classList.toggle( 'toggled' );

        if ( mobileButton.getAttribute( 'aria-expanded' ) === 'true' ) {
          setAttr( mobileButton, 'aria-expanded', 'false' );
        } else {
          setAttr( mobileButton, 'aria-expanded', 'true' );
        }
      } );
    }
}

Voir la démo sur Codepen

Et voilà ! il n’y a plus qu’à ajouter du CSS pour ne faire apparaitre le bouton que sur mobile et afficher/masquer le menu <ul> selon la présence de la classe CSS toggled.

Ce tutoriel est désormais fini. Nous avons vu les principales étapes pour rendre un menu accessible sur WordPress. Vous pouvez retrouver l’intégralité du code sur ce repo Github. 👋.