path: root/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html

---
title: Contrôles DHTML personnalisés navigables au clavier
slug: Contrôles_DHTML_personnalisés_navigables_au_clavier
tags:
  - AJAX
  - Accessibilité
  - DHTML
translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
---
<p> </p>
<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier" name="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3>
<p>Un nombre croissant d'applications Web utilise <a href="fr/JavaScript">JavaScript</a> pour imiter des contrôles (
 <i>
  widgets</i>
 ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <code>&lt;div&gt;</code> et autres <code>&lt;span&gt;</code> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.</p>
<p>Prenons un exemple concret : la plupart des menus <a href="fr/DHTML">DHTML</a> ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <code>&lt;a&gt;</code>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.</p>
<p>Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : <a href="fr/ARIA/Applications_riches_Internet_accessibles">ARIA : Applications riches Internet accessibles</a>.</p>
<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex" name="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3>
<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p>
<p>Le tableau qui suit décrit le nouveau comportement de <code>tabindex</code> :</p>
<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Attribut <code>tabindex</code></th>
   <th>Focus disponible à la souris ou par JavaScript via <code>element.focus()</code></th>
   <th>Navigable avec tabulation</th>
  </tr>
  <tr>
   <td>non présent</td>
   <td>Suit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).</td>
   <td>Suit le comportement par défaut de l'élément.</td>
  </tr>
  <tr>
   <td>Négatif<br>
    (par exemple <code>tabindex="-1"</code>)</td>
   <td>Oui</td>
   <td>Non, l'auteur doit donner le focus avec <code>element.focus()</code> suite à l'utilisation des flèches ou d'autres touches.</td>
  </tr>
  <tr>
   <td>Zéro<br>
    (par exemple <code>tabindex="0"</code>)</td>
   <td>Oui</td>
   <td>Dans l'ordre de tabulation relativement à la position de l'élément dans le document.</td>
  </tr>
  <tr>
   <td>Positif<br>
    (par exemple <code>tabindex="33"</code>)</td>
   <td>Oui</td>
   <td>La valeur <code>tabindex</code> change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant <code>tabindex="0"</code> ou qui sont naturellement
    <i>
     tabulables</i>
    .</td>
  </tr>
 </tbody>
</table>
<h3 id="Utilisation_du_nouveau_syst.C3.A8me" name="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3>
<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code>&lt;div&gt;&gt;</code> ou <code>&lt;span&gt;</code> le représentant. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code>&lt;span&gt;</code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p>
<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox (
 <i>
  nightlies</i>
 ). Le travail pour le faire fonctionner dans IE est encore en cours.</p>
<p>N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.</p>
<h3 id="Astuces_d.27.C3.A9criture" name="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3>
<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus" name="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4>
<p>Les attributs de gestion d'évènements <code>onfocus</code> et <code>onblur</code> peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface <a href="fr/DOM">DOM</a> standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable <a href="fr/JavaScript">JavaScript</a> pour le suivre.</p>
<p>Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.</p>
<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex" name="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4>
<p>Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.</p>
<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus" name="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4>
<p>N'utilisez pas <code>createEvent()</code>, <code>initEvent()</code> et <code>dispatchEvent()</code> pour donner le focus à un élément, parce que les évènements DOM <code>focus</code> sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :</p>
<pre class="eval">setTimeout("gFocusItem.focus();",0);  // gFocusItem doit être une variable globale
</pre>
<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus" name="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4>
<p>Il ne sera pas possible d'utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement <code>onfocus</code>. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez <code>this.style.backgroundColor = "gray";</code>.</p>
<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation" name="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4>
<p>IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme <code>this.style.backgroundColor = "gray";</code> ou ajoutez une bordure pointillée via <code>this.style.border = "1px dotted invert"</code>. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de &lt;tt&gt;1px&lt;/tt&gt; au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).</p>
<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress" name="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4>
<p>IE ne déclenchera pas les évènements <code>keypress</code> pour les touches non alphanumériques.</p>
<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur" name="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4>
<p>Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :</p>
<pre class="eval">&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;
</pre>
<p>Si <code>handleKeyDown()</code> renvoie <code>false</code>, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.</p>
<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment" name="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4>
<p>Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez <code>onclick="faireQuelqueChose()"</code> vous aurez aussi besoin de <code>onkeydown="return event.keyCode != 13 || faireQuelqueChose();"</code> afin de permettre à la touche Entrée d'activer cet élément.</p>
<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript" name="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4>
<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a class="external" href="http://whatwg.org/">WHATWG</a>).</p>
<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant" name="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4>
<p>Malheureusement, <code>onkeydown</code> peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.</p>
<p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}</p>