Notice d'accessibilité interfaces riches et JavaScript

Les menus déroulants sont des menus dynamiques dans lesquels seuls les items de premier niveau sont affichés par défaut, mais où des panneaux déroulants associés aux items de premier niveau peuvent être affichés au survol et à la prise de focus des items de premier niveau.

Attention
Si les items de premier niveau ne sont pas des liens, et que leur seule fonction est de permettre l'affichage et le masquage des panneaux, alors le menu déroulant doit être considéré comme un menu en accordéon.
Dans cette situation, il peut être intéressant d'adapter le script proposé pour un accordéon classique, afin que le contenu des panneaux s'affiche également au survol de la souris.

Astuce
Si beaucoup d'éléments interactifs sont présents dans les panneaux déroulants (liens, éléments de formulaire, etc.), une bonne pratique d'accessibilité consiste à privilégier le comportement d'un accordéon.
Le fait de n'afficher les panneaux déroulants que sur action de l'utilisateur sur les items de premier niveau permet d'optimiser la navigation au clavier dans la page en limitant le nombre d'éléments susceptibles de recevoir le focus, par défaut.

Le code HTML de base pour un menu déroulant peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait au contenu des panneaux déroulants.

<ul id="menu">
	<li>
		<a href="#">Lien de premier niveau1 </a>
		<ul>
			<li><a href="#">Lien de second niveau 1</a></li>
			<li><a href="#">Lien de second niveau 2</a></li>
			<li><a href="#">Lien de second niveau 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Lien de premier niveau 2</a>
		<ul>
			<li><a href="#">Lien de second niveau 4</a></li>
			<li><a href="#">Lien de second niveau 5</a></li>
			<li><a href="#">Lien de second niveau 6</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Lien de premier niveau 3</a>
		<ul>
			<li><a href="#">Lien de second niveau 7</a></li>
			<li><a href="#">Lien de second niveau 8</a></li>
			<li><a href="#">Lien de second niveau 9</a></li>
		</ul>
	</li>
</ul>

Sans JavaScript, la totalité des items du menu (items de premier niveau et panneaux) sont affichés.

JavaScript doit gérer les points suivants :

1. Au chargement du script, les panneaux sont sortis de l'écran en CSS via position: absolute; et left: -999999px;.
2. Puis : lorsqu'un item de premier niveau prend le focus ou est survolé, le panneau associé à l'item concerné est affiché à l'écran ;lorsqu'un item de premier niveau perd le focus ou n'est plus survolé, le panneau associé à l'item concerné est à nouveau sorti de l'écran.

• Démonstration en ligne d'un menu déroulant accessible.
• Téléchargement de la démonstration (ZIP, 35 ko).

Les accordéons sont des modules dynamiques qui permettent d'optimiser l'affichage du contenu d'une page, dans un espace réduit. Ils utilisent un système de « plier/déplier », contrôlable par l'utilisateur, souvent au clic sur un titre ou un lien qui surplombent le bloc de contenu.

Le code HTML de base pour un accordéon dont les panneaux sont masqués par défaut peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait aux niveaux de titres.

<h1>Titre associé au premier panneau</h1>
<div id="panneau-1">
    <p>Contenu du premier panneau</p>
</div>
 
<h1>Titre associé au deuxième panneau</h1>
<div id="panneau-2">
    <p>Contenu du deuxième panneau</p>
</div>
 
<h1>Titre associé au troisième panneau</h1>
<div id="panneau-3">
    <p>Contenu du troisième panneau</p>
</div>

Sans JavaScript, l'ensemble du système est déplié (affiché).

<h1><a href="#panneau-1">Titre associé au premier panneau</a></h1>
<div id="panneau-1">
    <p>Contenu du premier panneau</p>
</div>

Sur cette base, les scripts doivent ensuite gérer les points suivants :

1. Les titres des panneaux sont agrémentés de liens qui permettront de plier ou déplier les panneaux.
2. Les panneaux sont masqués par défaut à l'aide de display: none; via CSS.
3. Actionner à la souris ou au clavier un lien-titre affiche et masque alternativement le panneau associé (display: none; pour le masquage et display: block; pour l'affichage).
4. L'attribut aria-expanded="false" est appliqué par défaut sur le lien-titre. La valeur de cet attribut change ensuite dynamiquement : true lorsque le contenu associé est affiché et false dans le cas contraire.
5. L'attribut aria-controls est appliqué sur le lien-titre. La valeur de cet attribut reprend celle de l'attribut id du panneau associé.

Le code ainsi obtenu avec JavaScript sera le suivant :

<h1><a href="#panneau-1" aria-expanded="false" aria-controls="panneau-1">Titre associé au premier panneau</a></h1>
<div id="panneau-1">
    <p>Contenu du premier panneau (masqué)</p>
</div>
 
<h1><a href="#panneau-2" aria-expanded="true" aria-controls="panneau-2">Titre associé au deuxième panneau</a></h1>
<div id="panneau-2">
    <p>Contenu du deuxième panneau (affiché)</p>
</div>
 
<h1><a href="#panneau-3" aria-expanded="false" aria-controls="panneau-3">Titre associé au troisième panneau</a></h1>
<div id="panneau-3">
    <p>Contenu du troisième panneau (masqué)</p>
</div>

• Démonstration en ligne d'un accordéon accessible.
• Téléchargement de la démonstration (ZIP, 35 ko).

Les onglets sont des modules dynamiques qui permettent d'optimiser l'affichage du contenu d'une page dans un espace réduit. Ils se présentent généralement sous la forme d'une liste de liens accolés, qui permettent d'afficher au clic du contenu relatif à l'onglet sélectionné. Un seul onglet peut être activé à la fois.

Le code HTML de base est constitué de liens internes qui pointent vers leurs panneaux respectifs.

<ul>
    <li><a href="#panneau-01">Premier onglet</a></li>
    <li><a href="#panneau-02">Deuxième onglet</a></li>
    <li><a href="#panneau-03">Troisième onglet</a></li>
</ul>
 
<div id="panneau-01">
    Contenu du premier panneau.
</div>
 
<div id="panneau-02">
    Contenu du deuxième panneau.
</div>
 
<div id="panneau-03">
    Contenu du troisième panneau.
</div>

Sans JavaScript, la totalité des panneaux sont affichés, et les onglets servent de liens d'accès direct au contenu du panneau associé.

Sur cette base, les scripts doivent ensuite gérer les points suivants :

• à l'exception du panneau actif, les panneaux sont masqués par défaut à l'aide de display: none; via CSS ;
• l'attribut role="tabpanel" est appliqué sur chacun des panneaux ;
• l'attribut role="tablist" est appliqué sur le conteneur des onglets ;
• l'attribut role="tab" est appliqué sur chacun des onglets ;
• l'attribut aria-controls est appliqué sur chacun des onglets, la valeur de cet attribut reprend celle de l'attribut id du panneau associé ;
• l'attribut aria-selected="false" est appliqué par défaut sur chaque onglet, à l'exception de l'onglet actif qui reçoit l'attribut aria-selected="true". La valeur de cet attribut change ensuite dynamiquement : true lorsque le contenu associé est affiché et false dans le cas contraire ;
• une balise <strong> est rajoutée systématiquement autour du contenu de l'onglet actif. Cette balise est supprimée dès que l'onglet n'est plus actif ;
• l'attribut tabindex="0" est appliqué sur chacun des panneaux afin de permettre à ces derniers de recevoir le focus. Dès qu'un onglet est sélectionné, le focus doit être positionné dynamiquement sur le panneau associé.

Le code ainsi obtenu avec JavaScript sera le suivant :

<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="panneau-01"><a href="#panneau-01"><strong>Premier onglet</strong></a></li>
    <li role="tab" aria-selected="false" aria-controls="panneau-02"><a href="#panneau-02">Deuxième onglet</a></li>
    <li role="tab" aria-selected="false" aria-controls="panneau-03"><a href="#panneau-03">Troisième onglet</a></li>
</ul>
 
<div id="panneau-01" role="tabpanel" tabindex="0">
    Contenu du premier panneau.
</div>
 
<div id="panneau-02" role="tabpanel" tabindex="0">
    Contenu du deuxième panneau.
</div>
 
<div id="panneau-03" role="tabpanel" tabindex="0">
    Contenu du troisième panneau.
</div>

• Démonstration en ligne d'un système de navigation par onglets.
• Téléchargement de la démonstration (ZIP, 35 ko).

Les carrousels (ou slideshows) sont des modules qui permettent l'affichage de panneaux de contenus défilants dans une zone réduite.

Ils sont généralement agrémentés d'un système de pagination, de flèches de navigation, et/ou encore d'un système de mise en pause et de relance du mouvement dans le cas d'un carrousel à défilement automatique.

Dans le cadre d'une mise en accessibilité, deux types de carrousels sont principalement à distinguer :

1. Les carrousels à défilement automatique.
2. Les carrousels à défilement manuel.

Le code HTML de base pour les deux types de carrousels peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait au contenu des panneaux.

<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1.
    </li>
    <li class="panneau" id="panneau-2">
        Contenu du panneau 2.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3.
    </li>
</ul>

Sans JavaScript, tous les panneaux sont affichés.

Remarque
Les recommandations à suivre lors de l'écriture du code JavaScript seront ensuite différentes selon le type de carrousel souhaité : défilement automatique ou non.

Les scripts doivent gérer les points suivants :

• un élément qui permet la mise en pause et la relance de l'animation du carrousel est intégré dans le DOM, avant le contenu des panneaux ;
• l'intitulé de cet élément change dynamiquement selon que le carrousel soit en position de lecture ou de pause ;
• les panneaux qui ne sont pas affichés à l'écran sont sortis de l'écran en CSS via position: absolute; et left: -999999px;. Ils ne sont pas masqués avec display: none; ;
• uis, si les panneaux contiennent des éléments interactifs, un script gère la navigation au clavier : seul le contenu du panneau actif est tabulable. Appliquer pour cela un tabindex="0", ou supprimer les attributs tabindex, sur l'ensemble des éléments interactifs contenus dans le panneau (liens, boutons, champs de formulaires, etc.) ;pour empêcher la prise de focus dans le contenu des panneaux non affichés à l'écran, un tabindex="-1" est appliqué sur l'ensemble des éléments interactifs contenus dans ces derniers ce comportement est appliqué à chaque fois qu'un nouveau panneau est affiché.

Le code ainsi obtenu avec JavaScript sera le suivant :

<button id="lecture-pause">Pause</button>
 
<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1 (masqué) avec <a href="#" tabindex="-1">un lien</a>.
    </li>
    <li class="panneau panneau-actif" id="panneau-2">
        Contenu du panneau 2 avec <a href="#">un lien</a>.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3 (masqué) avec <button tabindex="-1">un bouton</button>.
    </li>
</ul>

<button id="lecture-pause"><img src="images/pause.png" alt="Pause" /></button>

Attention
Le système de mise en pause (ici, le bouton « Lecture/Pause ») doit toujours être placé avant les éléments sur lesquels il agit, dans le DOM, quelle que soit sa position à l'écran.

Les scripts doivent gérer les points suivants :

• un élément qui permet d'afficher le panneau précédent est intégré dans le DOM, avant le contenu des panneaux ;
• un élément qui permet d'afficher le panneau suivant est intégré dans le DOM, après le contenu des panneaux ;
• les panneaux qui ne sont pas affichés à l'écran sont masqués à l'écran en CSS via display: none;.

Le code ainsi obtenu avec JavaScript sera le suivant :

<button id="precedent">Précédent</button>
 
<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1 (masqué).
    </li>
    <li class="panneau panneau-actif" id="panneau-2">
        Contenu du panneau 2.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3 (masqué).
    </li>
</ul>
 
<button id="suivant">Suivant</button>

<button id="precedent"><img src="images/precedent.png" alt="Précédent" /></button>
 [...]
 <button id="suivant"><img src="images/suivant.png" alt="Suivant" /></button>

Les pop-in sont des fenêtres qui apparaissent directement à l'intérieur de la fenêtre courante du navigateur, au-dessus de la page Web ou de l'application. Elles sont à opposer aux pop-up et pop-under, qui déclenchent respectivement l'ouverture de nouvelles fenêtres externes, par-dessus et par-dessous la fenêtre courante.

Il s'agit de fenêtres modales, c'est-à-dire de fenêtres qui prennent le contrôle de la page courante, tant qu'elles sont affichées à l'écran. Pour poursuivre sa navigation, l'utilisateur doit donc nécessairement effectuer une action dans la pop-in.

Le contenu des pop-in peut être intégré dans la page, indifféremment, de deux façons :

1. Soit le contenu est présent par défaut dans le DOM, mais masqué, avant d'être affiché dans la pop-in sur action de l'utilisateur. Il faut alors veiller à ce que l'ordre de lecture reste cohérent, lorsque les CSS sont désactivées (cf. recommandation Écrire le code HTML en suivant la logique de l'ordre de lecture dans la notice d'accessibilité HTML et CSS).
2. Soit le contenu est absent par défaut du DOM, avant d'être chargé dynamiquement dans la pop-in sur action de l'utilisateur. Il faut alors veiller à ce que le contenu soit supprimé à nouveau du DOM lorsque la pop-in se referme.

Selon le mode d'intégration privilégié, le comportement sera différent, lorsque JavaScript n'est pas activé :

1. Dans le premier cas, l'élément qui déclenche l'apparition de la pop-in devra pointer sur le contenu de la pop-in, présent par défaut dans le DOM.
2. Dans le second cas, l'élément qui déclenche l'apparition de la pop-in devra pointer sur une autre page où l'utilisateur pourra accéder au contenu de la pop-in.

Lorsqu'une pop-in est affichée à l'écran :

1. Le focus doit être placé au niveau du conteneur de la pop-in. Rajouter pour cela un tabindex="0" sur le conteneur, et y placer dynamiquement le focus en JavaScript.
2. L'utilisateur ne doit pas pouvoir tabuler sur le reste de la page, à l'arrière de la pop-in. Rajouter pour cela un tabindex="-1" sur tous les éléments tabulables du reste de la page.
3. La touche Echap du clavier doit permettre à l'utilisateur de fermer la pop-in.

Lorsqu'une pop-in est fermée :

1. Tous les tabindex="-1" rajoutés dynamiquement à l'ouverture doivent être supprimés du code source pour permettre à nouveau la navigation au clavier dans la page.
2. Le focus doit être replacé au niveau de l'élément qui a déclenché l'ouverture de la pop-in.

Les infobulles simulées sont des contenus informatifs qui apparaissent à l'écran au survol et à la prise de focus d'un élément. Elles peuvent également apparaître lorsque l'élément est activé.

Elles sont dites « simulées », car elles n'utilisent pas l'attribut title proposé par HTML, souvent pour des raisons esthétiques.

Le code HTML de base pour une infobulle simulée accessible est très simple :

<a href="#" aria-label="Contenu de l'infobulle simulée">Intitulé du lien</a>

Attention
Sans JavaScript, le contenu proposé dans l'infobulle ne sera pas accessible pour les personnes qui n'utilisent pas de lecteurs d'écran.
S'assurer qu'un moyen d'accéder à ce contenu reste présent (par exemple, en proposant le contenu sur la page cible du lien) ou que ce contenu soit affiché dans la page initiale, dans le cas où JavaScript est désactivé.

Lorsque l'élément est survolé ou que le focus est positionné sur ce dernier :

1. Un conteneur vide du type <span> ou <div> est créé dans le DOM. Ce conteneur servira d'infobulle.
2. La valeur de l'attribut aria-label de l'élément est dupliquée dans le conteneur nouvellement créé.
3. Les CSS sont utilisées pour positionner et styler l'infobulle tel qu'attendu.

Lorsque l'élément n'est plus survolé ou que le focus est perdu, le conteneur est supprimé du DOM.

Ce comportement peut éventuellement être appliqué lorsque l'élément est activé. La désactivation de l'élément aura alors pour conséquence de supprimer l'infobulle simulée du DOM.

• Démonstration en ligne d'une infobulle accessible.
• Téléchargement de la démonstration (ZIP, 35 ko).

Les checkboxes simulées sont des cases à cocher dites « simulées » car elles n'utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type="checkbox" />. Ce choix est souvent lié à des raisons esthétiques.

Le code HTML de base utilise les cases à cocher classiques :

<form action="index.html" method="post">
	<h2 id="question">Quel sport pratiquez-vous ?</h2>
 
	<ul id="reponses">
		<li class="choix">
			<label for="peche">
				<input type="checkbox" name="peche" id="peche" />
				La pêche
			</label>
		</li>
		<li class="choix">
			<label for="polo">
				<input type="checkbox" name="polo" id="polo" />
				Le polo
			</label>
		</li>
		<li class="choix">
			<label for="diabolo">
				<input type="checkbox" name="diabolo" id="diabolo" />
				Le diabolo
			</label>
		</li>
	</ul>
 
	<input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l'utilisateur.

Avec JavaScript, le comportement des checkboxes simulées doit être le même que celui des cases à cocher classiques.

• les <label> et leur contenu sont remplacés par du texte, celui qui était initialement associé aux <input type="checkbox" /> ;
• une image qui représente une case non cochée est rajoutée avant chaque étiquette. Les caractéristiques techniques de cette image sont les suivantes : un attribut aria-hidden="true" est appliqué sur l'image pour la masquer aux utilisateurs de lecteurs d'écran ;l'attribut alt de l'image décrit l'état de la case à cocher, par exemple, alt="Non coché : " ;
• l'attribut role="group" est appliqué sur le conteneur des cases à cocher ; il s'agit du <ul> dans l'exemple proposé ;
• l'attribut role="checkbox" est appliqué sur chacune des cases à cocher ; il s'agit des <li> dans l'exemple proposé ;
• l'attribut aria-checked="false" est appliqué sur chacune des cases à cocher par défaut. La valeur de cet attribut change ensuite dynamiquement : true lorsque la case est cochée et false dans le cas contraire ;
• les cases peuvent être cochées à la fois au clic et à la pression sur la touche Espace, lorsque le focus est positionné sur une case à cocher ;
• l'attribut tabindex="0" est appliqué sur chacune des cases à cocher simulées afin de permettre à ces dernières de recevoir le focus ;
• enfin, si les cases à cocher sont précédées d'une question, d'une indication, ou d'une quelconque mention importante à la compréhension de la fonction de ces dernières, l'attribut aria-labelledby est appliqué sur le conteneur des cases à cocher. La valeur de cet attribut reprend la valeur de l‘id associé à la question, l'indication, etc.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form method="post" action="index.html">
    <h2 id="question">Quel sport pratiquez-vous ?</h2>
 
    <ul id="reponses" role="group" aria-labelledby="question">
        <li class="choix" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : ">
            La pêche            
        </li>
        <li class="choix" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : ">
            Le polo            
        </li>
        <li class="choix" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : ">
            Le diabolo            
        </li>
    </ul>
 
    <input type="submit" value="Transmettre les informations">
</form>

• Démonstration en ligne de cases à cocher (checkboxes) simulées accessibles.
• Téléchargement de la démonstration (ZIP, 38 ko).

Les boutons radio dits « simulés » n'utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type="radio" />. Ce choix est souvent lié à des raisons esthétiques.

Contrairement aux checkboxes qui autorisent des choix multiples, un seul bouton radio peut être activé à la fois par groupe de boutons radio.

Le code HTML de base utilise les boutons radio classiques :

<form action="index.html" method="post">
    <h2 id="question">Quelle est la couleur du cheval blanc d'Henri IV ?</h2>
 
    <ul id="reponses">
        <li class="choix">
            <label for="jaune">
                <input type="radio" name="couleur-cheval-henri-iv" id="jaune" />
                Jaune
            </label>
        </li>
        <li class="choix">
            <label for="vert">
                <input type="radio" name="couleur-cheval-henri-iv" id="vert" />
                Vert
            </label>
        </li>
        <li class="choix">
            <label for="blanc">
                <input type="radio" name="couleur-cheval-henri-iv" id="blanc" />
                Blanc
            </label>
        </li>
    </ul>
 
    <input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l'utilisateur.

Avec JavaScript, le comportement des boutons radio simulés doit être le même que celui des boutons radio classiques.

Les scripts doivent gérer les points suivants :

• les <label> et leur contenu sont remplacés par du texte, celui qui était initialement associé aux <input type="radio" /> ;
• une image qui représente un bouton radio coché est rajoutée avant chaque étiquette. Les caractéristiques techniques de cette image sont les suivantes : un attribut aria-hidden="true" est appliqué sur l'image pour la masquer aux utilisateurs de lecteurs d'écran ;l'attribut alt de l'image décrit l'état du bouton radio, par exemple, alt="Non coché : " ;
• l'attribut role="radiogroup" est appliqué sur le conteneur des boutons radio ; il s'agit du <ul> dans l'exemple proposé ;
• l'attribut role="radio" est appliqué sur chacun des boutons radio ; il s'agit des <li> dans l'exemple proposé ;
• l'attribut aria-checked="false" est appliqué sur chacun des boutons radio par défaut. La valeur de cet attribut change ensuite dynamiquement : true lorsque le bouton radio est coché et false dans le cas contraire ;
• les boutons radio peuvent être cochés à la fois au clic et à la pression sur la touche Espace, lorsque le focus est positionné sur un bouton radio ;
• par défaut, l'attribut tabindex="0" est appliqué sur le premier et le dernier bouton radio du groupe, afin de permettre l'entrée du focus dans le groupe de boutons radio à la fois dans l'ordre de lecture classique et dans l'ordre inverse. L'attribut tabindex="-1" est appliqué sur les autres boutons radio afin d'en interdire par défaut l'accès au clavier ;
• dès lors qu'un bouton radio est coché, l'attribut tabindex de ce bouton passe à 0 tandis que la valeur du tabindex passe à -1 pour le reste des boutons du groupe ;
• lorsque le focus est positionné sur l'un des boutons radio : appuyer sur la touche Flèche haut ou Flèche gauche déplace le focus et coche le bouton radio précédent. Si le focus était positionné au niveau du premier bouton du groupe au moment de l'action, c'est le dernier bouton du groupe qui est coché ;appuyer sur la touche Flèche bas ou Flèche droite déplace le focus et coche le bouton radio suivant. Si le focus était positionné au niveau du dernier bouton du groupe au moment de l'action, c'est le premier bouton du groupe qui est coché ;
• enfin, si les cases à cocher sont précédées d'une question, d'une indication, ou d'une quelconque mention importante à la compréhension de la fonction de ces dernières, l'attribut aria-labelledby est appliqué sur le conteneur des cases à cocher. La valeur de cet attribut reprend la valeur de l‘id associé à la question, l'indication, etc.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form method="post" action="index.html">
    <h2 id="question">Quelle est la couleur du cheval blanc d'Henri IV ?</h2>
 
    <ul id="reponses" role="radiogroup" aria-labelledby="question">
        <li class="choix" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Jaune
        </li>
        <li class="choix" role="radio" aria-checked="false" tabindex="-1">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Vert            
        </li>
        <li class="choix" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Blanc            
        </li>
    </ul>
 
    <input type="submit" value="Transmettre les informations">
</form>

• Démonstration en ligne de boutons radio simulés accessibles.
• Téléchargement de la démonstration (ZIP, 38 ko).

Les listes déroulantes dites « simulées » n'utilisent que partiellement les éléments de formulaires proposés par défaut par HTML, à savoir les champs <select> et les balises <option>. Elles exploitent une astuce CSS, qui permet ensuite de customiser en partie les listes obtenues.

Remarque
Il existe d'autres techniques plus avancées pour simuler totalement des listes déroulantes, qui permettent notamment un contrôle très fin de l'apparence des listes de choix. Ces techniques sont beaucoup plus lourdes que la solution proposée ici, elles ne sont pas abordées dans ce document.

Le code HTML de base utilise une liste déroulante classique :

<form action="index.html" method="post">
    <label for="couleur-yeux">
        Quelle est la couleur de vos yeux ?
        <select name="couleur-yeux" id="couleur-yeux">
            <option value="noirs">Noirs</option>
            <option value="bleus">Bleus</option>
            <option value="verts">Verts</option>
            <option value="marrons">Marrons</option>
            <option value="autres">Autres</option>
        </select>
    </label>
 
    <input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l'utilisateur.

Avec JavaScript, le comportement des listes déroulantes simulées doit être le même que celui des listes déroulantes classiques.

La méthode consiste, dans les grandes lignes, à respecter les étapes suivantes :

1. La propriété CSS opacity: 0; est appliquée sur la balise <select> lorsque JavaScript est activé. Cette propriété a pour effet de rendre la liste invisible par défaut, au détail près que les options continuent d'apparaître au clic sur le <select>, qui conserve sa place à l'écran, puisqu'il est seulement rendu invisible en jouant sur l'opacité.
2. Un conteneur vide est créé dans le DOM, juste après le <select>. Par exemple un <span>. Ce conteneur est ensuite peuplé dynamiquement en JavaScript, avec la valeur courante de la liste déroulante. Le script est appelé à chaque fois que l'état de la liste déroulante change.
3. Le <select> invisible est positionné en CSS juste au-dessus du conteneur créé, de manière à ce qu'un clic sur le conteneur déclenche l'ouverture de la liste déroulante.

Plus précisément, les scripts doivent gérer les points suivants :

• la propriété CSS opacity: 0; est appliquée sur le <select> ;
• un conteneur vide est ajouté dans le DOM juste après le <select>, dans l'exemple, un <span> est utilisé ;
• l'attribut aria-hidden="true" est appliqué sur ce conteneur, afin de le masquer aux utilisateurs de lecteurs d'écran, qui auront eux accès au <select> invisible ;
• le conteneur ne prend jamais le focus, mais une classe est rajoutée sur ce dernier via l'attribut class, dès lors que le focus est positionné sur le <select>. Cette classe est supprimée dès que le <select> perd le focus. CSS utilise cette classe pour simuler visuellement la prise de focus sur le conteneur ;
• une image est intégrée dans le conteneur par l'intermédiaire d'une balise <img /> avec attribut alt vide, pour indiquer aux utilisateurs qu'il s'agit d'une liste déroulante. Une bonne pratique d'accessibilité consiste à utiliser une flèche orientée vers le bas pour cet élément ;
• dès que l'état de la liste change, la valeur du conteneur est mise à jour. Elle reprend la valeur de l'option sélectionnée dans la liste déroulante ;
• le script qui peuple le conteneur est toujours appelé une fois par défaut, au chargement de la page.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form method="post" action="index.html">
    <label for="couleur-yeux">
        Quelle est la couleur de vos yeux ?
        <div class="conteneur-liste">
            <select id="couleur-yeux" name="couleur-yeux">
                <option value="noirs">Noirs</option>
                <option value="bleus">Bleus</option>
                <option value="verts">Verts</option>
                <option value="marrons">Marrons</option>
                <option value="autres">Autres</option>
            </select>
            <span class="conteneur-choix" aria-hidden="true">Noirs<img alt="" src="images/fleche.png"></span>
        </div>
    </label>
 
    <input type="submit" value="Transmettre les informations">
</form>

• Démonstration en ligne d'une liste déroulante simulée accessible.
• Téléchargement de la démonstration (ZIP, 38 ko).

Les sliders sont des champs de formulaires qui permettent de sélectionner une valeur précise à l'intérieur d'une gamme de valeurs définie au préalable. Ils prennent habituellement l'apparence d'un curseur à déplacer le long d'un axe, entre une première valeur minimale et une seconde valeur maximale.

Parfois, le contrôle du curseur est libre au sein de cet axe, parfois, il est contraint à une série de valeurs prédéfinies.

Ils sont dits « simulés » lorsqu'ils n'utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type="range" />. Ce choix est souvent lié à des raisons esthétiques.

Le code HTML de base utilise un slider HTML5 classique :

<form action="index.html" method="post">
    <label for="qualite-sommeil" id="label-qualite-sommeil">
        Êtes-vous satisfait(e) de la qualité de votre sommeil ?
        (nombre entier, de 1 pour "Très insatisfait(e)" à 5 pour "Très satisfait")
    </label>
    <input type="range" id="qualite-sommeil" name="qualite-sommeil" step="1" value="3" min="1" max="5" />
 
    <input type="submit" value="Transmettre les informations" />
</form>

Attention
Il est très important d'indiquer à l'utilisateur le format des données attendues.
En l'absence de support de HTML5 par le navigateur de ce dernier, et si JavaScript n'est pas activé, un champ de texte sera affiché par défaut. Sans indications, l'utilisateur ne pourra pas connaître l'étendue des valeurs autorisées.

Sans JavaScript, un formulaire classique est proposé à l'utilisateur.

Avec JavaScript, le comportement des sliders simulées doit être le même que celui des sliders classiques.

La méthode consiste, dans les grandes lignes, à respecter les étapes suivantes :

1. Le slider classique est masqué en JavaScript.
2. Un conteneur vide est créé dans le DOM, à la place du slider initial. Il servira à contenir les éléments suivants. Une fois stylé en CSS, il symbolisera l'axe du slider.
3. Un deuxième élément vide est créé dans le DOM, enfant de l'élément précédent. Il servira quant à lui à symboliser le curseur, une fois stylé en CSS.
4. JavaScript intervient ensuite pour rajouter des rôles ARIA et gérer le comportement du slider simulé.

Plus précisément, les scripts doivent gérer les points suivants :

• la propriété CSS display: none; est appliquée sur le <input type="range" /> ;
• un conteneur vide est ajouté dans le DOM juste après le <input type="range" /> ; dans l'exemple, un <div> est utilisé ;
• un élément vide est ajouté dans le DOM à l'intérieur du conteneur nouvellement créé ; dans l'exemple, un <span> est utilisé, il s'agit du curseur ;
• si le curseur n'est pas un élément tabulable par défaut, l'attribut tabindex="0" est appliqué sur ce dernier ;
• l'attribut role="slider" est appliqué sur le curseur ;
• l'attribut aria-labelledby est appliqué sur le curseur, la valeur de cet attribut reprend celle de l'attribut id de l'étiquette associée au slider ;
• l'attribut aria-valuemin est appliqué sur le curseur, la valeur de cet attribut reprend la valeur minimale autorisée pour le curseur ;
• l'attribut aria-valuemax est appliqué sur le curseur, la valeur de cet attribut reprend la valeur maximale autorisée pour le curseur ;
• l'attribut aria-valuenow est appliqué sur le curseur, la valeur de cet attribut reprend la valeur courante du curseur et est mise à jour dès lors que le curseur change de position ;
• si besoin, l'attribut aria-valuetext est appliqué sur le curseur, la valeur de cet attribut exprime la valeur courante du curseur, mais dans un format adapté à l'internaute. Dans l'exemple, cet attribut peut par exemple être renseigné tel que aria-valuetext="Très satisfaisant(e)" lorsque aria-valuenow="5". C'est la première valeur, plus compréhensible, qui sera restituée aux utilisateurs d'aides techniques, si elle est disponible. La valeur de cet attribut est mise à jour dès lors que le curseur change de position ;
• par rapport à l'axe, le curseur ne peut jamais être positionné avant la valeur minimale, ni après la valeur maximale ;
• si un pas est défini, la position du curseur doit toujours respecter ce pas. Par exemple, si un pas de 1 est défini, et que la position de départ est à 10, il ne doit pas être possible d'obtenir une valeur non entière à l'aide du curseur ;
• le curseur peut être déplacé le long de l'axe, par simple glisser-déposer à la souris, ou par simple glisser-relâcher au doigt ;
• le curseur peut également être déplacé au clavier. Lorsque le focus est positionné sur ce dernier : la pression des touches Flèche droit ou Flèche haut augmente la valeur du slider, d'une valeur de pas ;la pression des touches Flèche gauche ou Flèche bas diminue la valeur du slider, d'une valeur de pas ;la pression de la touche Origine déplace le curseur au niveau de la valeur minimale du slider ;la pression de la touche Fin déplace le curseur au niveau de la valeur maximale du slider ;la pression de la touche Page précédente augmente la valeur du slider, d'une valeur arbitraire, mais supérieure à la valeur de pas ;la pression de la touche Page suivante diminue la valeur du slider, d'une valeur arbitraire, supérieure à la valeur de pas, et identique à celle obtenue lors de la pression du la touche Page précédente.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form action="index.html" method="post">
    <label for="qualite-sommeil" id="label-qualite-sommeil">
        Êtes-vous satisfait(e) de la qualité de votre sommeil ?
        (nombre entier, de 1 pour "Très insatisfait(e)" à 5 pour "Très satisfait")
    </label>
    <input style="display: none;" type="range" id="qualite-sommeil" name="qualite-sommeil" step="1" value="3" min="1" max="5" />
    <div id="conteneur-slider">
        <span id="curseur-slider" role="slider" tabindex="0" aria-labelledby="label-qualite-sommeil" aria-valuemin="1" aria-valuemax="5" aria-valuenow="5" aria-valuetext="Très satisfaisant(e)"></span>
    </div>
 
    <input type="submit" value="Transmettre les informations" />
</form>

• Démonstration en ligne de sliders simulés, par le projet canadien BOEW (Boîte à Outils de l'Expérience Web).