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 à :

imbriquer correctement les balises.
ouvrir et fermer correctement les balises.
ne pas dupliquer un attribut sur une même balise.
utiliser un attribut id unique au sein d'une même page.

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

Utiliser les balises de titre (h1, h2 etc), et ne pas omettre de niveau.
Baliser les listes en utilisant la structure "ul" ou "ol".
Spécifier la langue pour chaque page et indiquer chaque changement de langue à l'intérieure d'une page.
Utiliser la balise "th" pour les cellules de lignes et de colonnes d'en-tête dans les tableaux de données.

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

Spécifier la taille du texte et des contrôles de formulaire en "em","rem","%" ou autre mesures relatives (pas "pt" ni "px").
Pour les tableaux et "divs" contenant du texte, utiliser "em", "rem" ou "%" (pas "pt" ni "px").

Utiliser les balises des formulaires correctement

Placer les "label" adjacent au champ des formulaires, du côté conventionnel (à gauche pour les champs textes, à droite pour les boutons radio et les checkboxs).
Associer les "label" avec their element via the "for" and "id" attributes
Add a "submit" button to all forms including "quick-links" drop-downs.

2. Les "Landmark Roles"

Titre principal

<article_> ou
<div role="article_">

Contenu

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>

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 :

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 »).
Supprimer, toujours en JavaScript, cette classe lorsque le focus quitte l'ancre correspondante.
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é :

D'un lien menant à la racine du site (page d'accueil).
De la totalité des liens vers les pages séparant la racine du site de la page courante.
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.

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

Présentez les images décoratives via CSS, ou via des images avec alt vide (alt="").
Évitez des images texte et utiliser du texte HTML de préférence. Si vous devez utiliser une image texte (par ex. un logo) alors faites correspondre le texte alternatif au texte de l'image.
Donnez aux images utilisées comme lien un texte alternatif qui indique la destination du lien.
Décrivez les images qui contiennent des informations complexes dans le texte de la page et décrivez brièvement l'image dans le texte alternatif.

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

Assurer que le contenu soit logique lorsqu'il est lu dans l'ordre du code source. L'ordre de lecture dans les tableaux de disposition (si ceux-ci sont utilisés) est de gauche à droite, de haut en bas, ligne par ligne.
Faire du premier titre dans le contenu principal un titre de niveau 1 et que ce soit le premier titre sur la page (dans l'ordre du code source).
Fournir des titres de page qui reflètent l'en-tête de la page principale.
Placer les éléments de navigation dans des emplacements similaires sur toutes les pages.
Inclure un lien visible "aller au contenu" en haut de la page.
Méfiez-vous du bug IE- voir bug IE

7. Faire des liens qui identifient clairement leurs destinations

Donner des liens texte significatif et descriptif de la destination, même lorsque hors contexte, c'est-à-dire ne pas utiliser "cliquez ici", "plus", "rapport complet", etc
Inclure le type de fichier et la taille des fichiers téléchargeables, (par ex : PDF, 10MB)
Éviter d'ouvrir de nouvelles fenêtres, mais si on doit le faire, fournir un avertissement dans le lien.
Souligner les liens et faire ressortir le contraste des couleurs du texte environnant (à moins que les liens ne figurent dans le menu de navigation ou la liste des liens).

8. Utiliser des couleurs avec un contraste suffisant

Créer un contraste suffisant entre le texte et les couleurs de fond en spécifiant toujours color et backgroung-color dans la feuille de style.
Vérifier le contraste par rapport à l'algorithme de luminosité W3C
Ne pas utiliser la couleur seule pour transmettre le sens.

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

Inclure a: focus et a: active dans le CSS ainsi que a: hover pour faire fonctionner les effets de mise au point de mise au point en tablant sur les liens ainsi que lors de la souris sur eux.
Faire passer l'ordre de tabulation par une page suivre l'ordre naturel de lecture.
Autoriser toutes les interfaces Web, y compris les diaporamas, les lecteurs vidéo, les éléments Flash et les fonctionnalités de script à travailler aussi bien avec le clavier et la souris.

10. Utiliser des scripts avec attention

Assurer que les changements dynamiques sont captés par les lecteurs d'écran en ayant des changements déclenchés par onclick et en les exécutant rapidement.
Indiquer clairement aux utilisateurs de lecteurs d'écran les liens utilisés pour les modifications de contenu dynamique plutôt que de charger de nouvelles pages.

Par exemple, en incluant du texte d'aide ou des conseils dans le contenu du lien

11. Rendre les objets multimedia accessibles

Fournir des transcriptions et des légendes pour tous les fichiers vidéo et audio
Inclure un bouton de pause pour les diaporamas.

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 conteneur), 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

Applications pratiques

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

Mise en oeuvre

4.1. Les exigences en terme d'accessibilité

4.1.1. Composition

Élément séparateur

Vous êtes ici

4.1.2. Emplacement visuel et dans le code

4.2. Structure HTML

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

4.2.2. Paragraphe (balise <p>)

4.2.3. HTML5

Ressources

Accessibilité au clavier

Accessibilité du lecteur d'écran

Usage

HTML

JavaScript

CSS

Exemple complet

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

4.2.2. Paragraphe (balise `<p>`)