Votre navigateur n'accepte pas les coockies
Accueil

Applications pratiques

1. Sémantique

Sur chaque page, un DOCTYPE valide doit être utilisé et le code HTML doit être conforme aux règles de grammaire de ce dernier (le choix du DOCTYPE est libre).

<!doctype html>

Concernant la sémantique, il est important de veiller à :

Utiliser des balises structurelles pour donner un sens au contenu de la page

Permettre aux utilisateurs de redimensionner le texte et la largeur de page

Utiliser les balises des formulaires correctement

2. Les "Landmark Roles"

<main> ou
<div role="main">

Titre principal

Et le code qui va avec ...

    
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="utf-8">
<meta name="description" content="description de la page">
</head>


<body>

<header>
  <h1>Titre de la page</h1>
</header>

<nav>
    <ol>
      <li>
        <a href="#">menu 1</a>
      </li>
      <li>
        <a href="#">menu 2</a>
      </li>
      <li>
        <a href="#">menu 3</a>
      </li>
      <li>
        <a href="#">menu 4</a>
      </li>
    </ol>
</nav>
  
<main>
  <h2>Titre principal</h2>
  <article>
    <p>Contenu</p>
  </article>
</main>

<aside>
    <form role="search">
      <input type="search" placeholder="recherche...">
      <input type="submit" value="recherche">
    </form>
  <h3>Contenu complémentaire</h3>
</aside>

<footer>
  <p>Informations à propos de la page</p>
</footer>

</body>
</html>
    
  

3. Lien d’évitement

Les liens d’évitement (aussi appelés liens de navigation interne) sont des éléments de navigation permettant de contourner des regroupements de liens et ainsi d’accéder plus rapidement à des zones précises de la page.

	<a class="evitement" href="#contenu">Aller au contenu</a>
	...
	<main role="main" id="contenu" tabindex="-1">...</main>
	
L’intégration de tabindex="-1" dans la balise de destination permet de rendre ce lien-ancre fonctionnel sous Internet Explorer et Chrome.

Bien qu’il soit recommandé d’afficher ce lien, celui-ci peut être masqué par défaut. En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Par conséquent, le lien d’évitement ne doit jamais être masqué à l’aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

Privilégier une autre solution, par exemple l’utilisation des codes suivants :

	a.evitement {
	   position: absolute;
	   left: -99999px;
	}
	a.evitement:focus {
	   position: static;
	}
	

Une bonne pratique consiste mettre en surbrillance l’endroit où vous serez amené avec le lien de contournement lorsque le focus est placé sur ce lien.

L’intérêt pour un utilisateur clavier est de découvrir à l’avance où ils sera placés lorsqu’il activera ce lien.

Mise en oeuvre

Pour obtenir ce comportement, on peut par exemple :

  1. Ajouter, en JavaScript, une classe CSS (.destination) à l’élément de destination (<main role="main">) lorsque le focus est placé sur l’ancre correspondante (« Aller au contenu »).
  2. Supprimer, toujours en JavaScript, cette classe lorsque le focus quitte l’ancre correspondante.
  3. Prévoir, dans la CSS, un aspect pour l’élément de destination en état de mise en évidence tel que par exemple : main[role=main].destination {border:.2em dashed red}.

Si vous avez besoin de plusieurs.

Dans ce cas-là, mettre en place une liste de plusieurs liens d’évitement. Comme par exemple :

	<ul id="evitement">
	   <li>
	      <a href="#contenu">Aller au contenu</a>
	   </li>
	   <li>
	      <a href="#menu">Aller au menu</a>
	   </li>
	   <li>
	      <a href="#recherche">Aller à la recherche</a>
	   </li>
	</ul>
	

4. Fil d’Ariane et accessibilité

Le fil d’Ariane est un système de navigation permettant à l’utilisateur de se situer sur un site Internet.

Il indique la position courante de l’internaute dans l’arborescence du site par rapport à la page d’accueil.

La présence du fil d’Ariane répond à un critère d’accessibilité de niveau AAA (le plus élevé).

4.1. Les exigences en terme d’accessibilité

4.1.1. Composition

Le fil d’Ariane doit refléter l’architecture du site et doit permettre à l’internaute de se repérer dans l’arborescence de ce dernier.

Dans l’ordre, il doit être composé :

  1. D’un lien menant à la racine du site (page d’accueil).
  2. De la totalité des liens vers les pages séparant la racine du site de la page courante.
  3. Du titre de la page courante.
À noter que ce dernier élément ne doit pas être cliquable.

Élément séparateur

Non obligatoire, il est cependant conseillé de séparer les éléments composant le fil d’Ariane avec un caractère visible (directement intégré dans le code HTML) tel que « > » par exemple.

L’intérêt pour l’accessibilité y est exposé plus bas, dans la partie « Structure HTML > Paragraphe ».

Vous êtes ici

Le fil d’Ariane est régulièrement précédé d’une mention du type « Vous êtes dans : » ou « Vous êtes ici : ».

Bien que cette mention ne soit pas exigée en terme d’accessibilité, elle permet à l’utilisateur d’identifier rapidement ce moyen de navigation et de comprendre sa fonction. Nous recommandons par conséquent l’intégration de cette mention.

4.1.2. Emplacement visuel et dans le code

Le fil d’Ariane doit être intégré, visuellement et dans le code source, au même emplacement sur l’ensemble des pages du site ; hormis sur la page d’accueil où sa présence n’est pas obligatoire.

À noter qu’en matière d’accessibilité, aucune exigence n’est formulée quant à son emplacement visuel au sein de la page. Il peut par conséquent être placé n’importe où (tout en haut, tout en bas ou en colonne de droite par exemple).

Toutefois, logiquement, en terme d’ergonomie cette fois, il est recommandé de le placer juste au dessus du contenu principal de la page.

4.2. Structure HTML

Les référentiels d’accessibilité ne demandent aucun balisage particulier pour structurer un fil d’Ariane. Malgré tout, selon nous, seules 2 solutions sont à retenir :

4.2.1. Liste non-ordonnée (balises <ul> et <li>)

Il est possible de le structurer en utilisant une liste non-ordonnée comme par exemple :

<div id="fil-ariane">
   <p>Vous êtes dans :</p>
   <ul>
      <li><a href="#">Accueil</a> ></li>
      <li><a href="#">Accessibilité</a> ></li>
      <li><strong>Fil d’Ariane</strong></li>
   </ul>
</div>

Nous voyons plusieurs avantages à l’utilisation d’une liste dans ce cas.

Par exemple, le nombre d’éléments le composant peut être restitué aux utilisateurs de lecteurs d’écran, ce qui leur permet de savoir à quel niveau de profondeur ils se situent dans l’arborescence.

En revanche, nous ne sommes pas favorables à l’imbrication de listes pour baliser un fil d’Ariane. Car dans ce cas, la restitution par un lecteur d’écran peut devenir rapidement « verbeuse » et par conséquent désagréable à l’écoute.

4.2.2. Paragraphe (balise <p>)

Un fil d’Ariane peut très bien tout simplement se coder avec la balise <p> tel que :

<p id="fil-ariane">
   Vous êtes dans :
   <a href="#">Accueil</a> >
   <a href="#">Accessibilité</a> >
   <strong>Fil d’Ariane</strong>
</p>

Cette structure, bien que « sémantiquement pauvre », convient tout à fait en terme d’accessibilité : les « > » séparateurs induisant la notion de progression dans l’arborescence.

Vous remarquerez d’ailleurs que nous avons opté pour ce balisage sur ce blog.

4.2.3. HTML5

Si vous concevez vos sites en HTML5, il peut être intéressant d’englober le fil d’Ariane avec une balise <nav> comme par exemple :

<nav id="fil-ariane">
   Vous êtes dans :
   <a href="#">Accueil</a> >
   <a href="#">Accessibilité</a> >
   <strong>Fil d’Ariane</strong>
</nav>

Bien que l’intérêt en terme d’accessibilité est à ce jour inexistant, demain, lorsque cette balise sera supportée par les différents navigateurs et lecteurs d’écran du marché, cela pourra potentiellement être intéressant.

À noter que le lecteur d’écran NVDA (version 2012.3) reconnaît la balise <nav>. Lorsqu’il la rencontre, il annonce « repère – navigation » à l’utilisateur.

Ressources

5. Donner à toutes les images un équivalent texte

6. Créer une présentation et une navigation cohérente

7. Faire des liens qui identifient clairement leurs destinations

8. Utiliser des couleurs avec un contraste suffisant

9. Construire des pages pour travailler avec un clavier aussi bien qu‘avec une souris

10. Utiliser des scripts avec attention

11. Rendre les objets multimedia accessibles

12-Menu accessible

Un grand menu accessible (GMA)

Accessibilité au clavier

Le GMA supporte la navigation au clavier selon le comportement décrit dans WAI-ARIA Menu or Menu bar (widget), mais il s‘agit aussi de respecter les attentes générales des utilisateurs pour le comportement des liens dans une navigation globale. À cette fin, le grand menu accessible permet un focus detabulation sur chaque items de premier niveau. Lorsque l‘un des items du menu à le focus, appuyer sur la touche Entrée, Espace ou Flèche bas, ouvrira le sous-menu, et appuyer les boutons Flèche gauche ou Flèche droite déplacera le focus sur l‘item du menu adjacent. Les liens à l‘intérieur du sous-menu suivent l‘ordre des tabulations lorsque celui-ci est ouvert. On peut ainsi naviguer avec les flèches de direction. Appuyer sur le bouton Échap fermera le sous-menu et rendra le focus à l‘item du menu parent.

Accessibilité du lecteur d‘écran

Le GMA utilise les WAI-ARIA Rôles, États et Propriétés, tels que décrits dans WAI-ARIA Menu or Menu bar (widget) avec des exceptions notables cependant, de sorte qu‘il se conforme mieux aux attentes des utilisateurs de lecteurs d‘écran pour la navigation globale. On n‘utilise pas role="menu" pour le conteneur du menu et non plus role="menuitem" pour chaque lien à l‘intérieur, car sinon la technologie d‘assitance ne considèrera plus les liens comme des liens mais plutôt comme des items de menu et les liens de la navigation globale n‘apparaitront plus lorsque l‘utilisateur du lecteur d‘écran exécutera une commande de racccourci pour faire apparaître une liste de liens sur la page.

GMA maintient également la sémantique de la structure du sous-menu; Les liens sont organisés en listes et séparés par des balises de titre. Omettre role="menu" et role="menuitem" pour la navigation globale semble être le plus approprié.

Usage

HTML

La structure HTML de GMA est un élément nav, (ou n‘importe quel autre élément cnteneur), contenant une liste. Chaque item de la liste contient un lien qui est suivi par une div (ou n‘importe quel autre conteneur qui servira de panneau de sous-menu). Le panneau peut contenir n‘importe quel code html; Dans l‘exemple ci-dessous chaque panneau contient trois listes de liens. Vous pouvez,dans ce panneau, définir explicitement des groupes entre lesquels un utilisateur peut naviguer rapidement à l‘aide des touches fléches gauche et droite; La classe CSS .sub-nav-group identifie un groupe navigable.

    <nav>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="?movie">Films</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=0">Action & Aventure</a></li>
                        <li><a href="?movie&genre=2">Enfants et Famille</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=7">Drames</a></li>
                        <li><a href="?movie&genre=9">Étranger</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=14">Comédies musicales</a></li>
                        <li><a href="?movie&genre=15">Romance</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a href="?tv">Télévision</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=20">TV Classique</a></li>
                        <li><a href="?tv&genre=21">TV Crime</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=27">TV réalité</a></li>
                        <li><a href="?tv&genre=30">TV Action</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=33">TV Drames</a></li>
                        <li><a href="?tv&genre=34">TV Horreur</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

Par défaut, GMA utilise les classes CSS suivantes pour définir les items de navigation de premier niveau, les panneaux, les groupes à l‘intérieur du panneau et les propriétés hover, focus et open. On définit également un préfixe pour les chaînes d‘identification uniques, qui sont nécessaires pour indiquer la relation d‘un élément de navigation de premier niveau sur le panneau qu‘elle contrôle.

    défaut = {
        /* des ID uniques sont requis pour indiquer aria-owns, aria-controls et aria-labelledby */ 
        uuidPrefix: "menu_accessible",

        /* Classe CSS pour définir le style du GMA */ 
        menuClass: "menu_accessible",

        /* Classe CSS pour un item de navigation de premier niveau */ 
        topNavItemClass: "menu_accessible-top-nav-item",

        /* Classe CSS pour un panneau de sous-menu */ 
        panelClass: "menu_accessible-panel",

        /* Classe CSS pour un groupe d‘items dans un sous-menu */ 
        panelGroupClass: "menu_accessible-panel-group",

        /* Classe CSS pour la propriété hover */ 
        hoverClass: "hover",

        /* Classe CSS pour la propriété focus */ 
        focusClass: "focus",

        /* Classe CSS pour la propriété open */ 
        openClass: "open" 
    }

Vous pouvez redéfinir les valeurs par défaut et utiliser vos propres classes CSS.

JavaScript

Assurez-vous d‘avoir inclus jQuery et le plugin jquery-accessibleMegaMenu.js.

    <script src="js/vendor/jquery-1.10.1.min.js"></script>
    <script src="js/jquery-accessibleMegaMenu.js"></script>

Ce qui suit initialise le premier élément nav comme un GMA, avec des classes CSS optionnelles de surcharge.

    $("nav:first").accessibleMegaMenu({
        /* des ID uniques sont requis pour indiquer aria-owns, aria-controls et aria-labelledby */
        uuidPrefix: "menu_accessible",

        /* Classe CSS pour définir le style du GMA */
        menuClass: "nav-menu",

        /* Classe CSS pour un item de navigation de premier niveau */
        topNavItemClass: "nav-item",

        /* Classe CSS pour un panneau de sous-menu */
        panelClass: "sub-nav",

        /* Classe CSS pour un groupe d‘items dans un sous-menu */
        panelGroupClass: "sub-nav-group",

        /* Classe CSS pour la propriété hover */
        hoverClass: "hover",

        /* Classe CSS pour la propriété focus */
        focusClass: "focus",

        /* Classe CSS pour la propriété open */
        openClass: "open"
    });

CSS

GMA gère l‘affichage et le masquage de panneaux en ajoutant ou supprimant une classe CSS. Aucun style interne n‘est ajouté pour masquer des éléments ou créer une animation entre les états.

Ci-dessous le CSS rudimentaire pour notre exemple qui permet l‘affichage/masquage et le rendu des sous-menu de listes dans GMA.

    /* CSS rudimentaire pour cet exemple de GMA */    

    /* liste du menu principal */
    .nav-menu {
        display: block;
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 15;
    }
    
    /* item de navigation de premier niveau du GMA */
    .nav-item {
        list-style: none;
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    
    /* premier lien descendant dans un li du menu principal */
    .nav-item > a {
        position: relative;
        display: inline-block;
        padding: 0.5em 1em;
        margin: 0 0 -1px 0;
        border: 1px solid transparent;
    }
    
    /* états focus/open premier lien descendant dans un li du menu principal */
    .nav-item > a:focus,
    .nav-item > a.open {
        border: 1px solid #dedede;
    }
    
    /* états open du premier lien descendant dans un li du menu principal */
    .nav-item > a.open {
        background-color: #fff;
        border-bottom: none;
        z-index: 1;
    }
    
    /* panneau de sous-menu */
    .sub-nav {
        position: absolute;
        display: none;
        top: 2.2em;
        margin-top: -1px;
        padding: 0.5em 1em;
        border: 1px solid #dedede;
        background-color: #fff;
    }
    
    /* état open du panneau de sous-menu */
    .sub-nav.open {
        display: block;
    }
    
    /* liste d‘items dans le panneau de sous-menu */
    .sub-nav ul {
        display: inline-block;
        vertical-align: top;
        margin: 0 1em 0 0;
        padding: 0;
    }
    
    /* item li dans le panneau de sous-menu */
    .sub-nav li {
        display: block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

Exemple complet

En compilant tout, voilà le code final :

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Exemple de grand menu accessible</title>
    <style>
        /* CSS rudimentaire pour cet exemple de GMA */    
    
        /* liste du menu principal */
        .nav-menu {
            display: block;
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            z-index: 15;
        }
        
        /* item de navigation de premier niveau du GMA */
        .nav-item {
            list-style: none;
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        
        /* premier lien descendant dans un li du menu principal */
        .nav-item > a {
            position: relative;
            display: inline-block;
            padding: 0.5em 1em;
            margin: 0 0 -1px 0;
            border: 1px solid transparent;
        }
        
        /* états focus/open premier lien descendant dans un li du menu principal */
        .nav-item > a:focus,
        .nav-item > a.open {
            border: 1px solid #dedede;
        }
        
        /* états open du premier lien descendant dans un li du menu principal  */
        .nav-item > a.open {
            background-color: #fff;
            border-bottom: none;
            z-index: 1;
        }
        
        /* panneau de sous-menu */
        .sub-nav {
            position: absolute;
            display: none;
            top: 2.6em;
            margin-top: -1px;
            padding: 0.5em 1em;
            border: 1px solid #dedede;
            background-color: #fff;
        }
        
        /* état open du panneau de sous-menu */
        .sub-nav.open {
            display: block;
        }
        
        /* liste d‘items dans le panneau de sous-menu */
        .sub-nav ul {
            display: inline-block;
            vertical-align: top;
            margin: 0 1em 0 0;
            padding: 0;
        }
        
        /* item li dans le panneau de sous-menu */
        .sub-nav li {
            display: block;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }     
    </style>
    </head>
    <body>
    <nav>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="?movie">Films</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=0">Action &amp; Aventure</a></li>
                        <li><a href="?movie&genre=2">Enfants &amp; Famille</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=7">Drames</a></li>
                        <li><a href="?movie&genre=9">Étranger</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=14">Comédies musicales</a></li>
                        <li><a href="?movie&genre=15">Romance</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a href="?tv">Télévision</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=20">TV Classique</a></li>
                        <li><a href="?tv&genre=21">TV Crime</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=27">TV réalité</a></li>
                        <li><a href="?tv&genre=30">TV Action</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=33">TV Drames</a></li>
                        <li><a href="?tv&genre=34">TV Horreur</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

    <!-- inclusion de jquery -->
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

    <!-- inclusion du script plugin jquery-accessibleMegaMenu -->
    <script src="js/jquery-accessibleMegaMenu.js"></script>
    
    <!-- initialise un sélecteur comme un menu GMA -->
    <script>
        $("nav:first").accessibleMegaMenu({
            /* préfixe pour les attributs d‘un ID unique, qui sont requis
               pour indiquer l‘appartenance à aria-owns, aria-controls et aria-labelledby */
            uuidPrefix: "menu_accessible",

            /* Classe CSS pour définir le style du GMA */
            menuClass: "nav-menu",

            /* Classe CSS pour un item de navigation de premier niveau */
            topNavItemClass: "nav-item",

            /* Classe CSS pour un panneau de sous-menu */
            panelClass: "sub-nav",

            /* Classe CSS pour un groupe d‘items dans un sous-menu */
            panelGroupClass: "sub-nav-group",

            /* Classe CSS pour la propriété hover */
            hoverClass: "hover",

            /* Classe CSS pour la propriété focus */
            focusClass: "focus",

            /* Classe CSS pour la propriété open */
            openClass: "open"
        });
    </script>
    </body>
    </html>
    

13-Pour aller plus loin...

Conseils sur la création de sites Web conformes aux WCAG : Web Accessibility Tutorials