Après la théorie sur la navigation accessible, place à la pratique.

Ce que j’ai fait :

• modifier le markup existant de la navigation
• ajouter un fil d’ariane

Aperçu du code

Pour rappel, j’utilise actuellement un template tout prêt, jekyll-now(lien externe), permettant de publier sur github. Au cours de ces 100 jours, je vais me servir de template comme un petit laboratoire destiné à tester ce que j’apprends sur l’accessibilité.

Le code initial de la navigation se présentait ainsi :

<nav role="navigation">
  <a href="/">Blog</a>
  <a href="/about">A propos</a>
</nav>

Après modification, voici le nouveau code :

<nav class="masthead__nav" role="navigation">
  <ul class="main-nav">
    
      <li class="main-nav__item">
        <a class="main-nav__link" href="/">Blog</a>
      </li>
    
    
    <li class="main-nav__item">
      <a class="main-nav__link" href="/about">A propos</a>
    </li>
    
  </ul>
</nav>

Les modifications incluent :

• l’ajout des balises <ul><li></li></ul> pour structurer la navigation sous forme de liste
• l’ajout de conditions générant une class CSS et une balise title pour indiquer la page en cours de consultation
• l’emploi de la syntaxe BEM (Block Element Modifier)(lien externe) pour nommer les class CSS

J’ai également ajouté un fil d’ariane sur header de chaque article. En effet, l’item “Blog” du menu n’étant actif que lorsque l’on se trouve sur la page listant tous les articles du blog, j’ai choisi d’ajouter un fil d’ariane pour donner une indication de localisation supplémentaire lorsque l’on se trouve sur un article.

<header>
  <p class="breadcrumbs">
    Vous êtes à : <a href="/">Blog</a> > Jour 13 - Implémenter une navigation accessible (partie 1)
  </p>
  <h1>Jour 13 - Implémenter une navigation accessible (partie 1)</h1>
</header>

A faire

• ajouter des liens d’évitement
• tester avec un lecteur d’écran