Project

General

Profile

Development #40923

Accessibilité : le champ d'autocomplétion (select2) n'est pas compatible avec les technologies d'assistance

Added by Marie Kuntz (absente) almost 3 years ago. Updated 10 months ago.

Status:
Fermé
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

Description

Le champ d'auto-complétion n'est pas compatible avec les technologies d'assistance, le design pattern Combobox est utilisé mais il n'est pas respecté :
• le role=combobox n’est pas au bon endroit, il devrait être sur la zone qu’on fait apparaitre et non sur le champ de formulaire qui permet de faire apparaitre le composant d’auto-complétion
• le composant qui qui permet d’afficher/masquer l’auto-complétion doit quant à lui respecter le motif de conception « disclosure »
• le champ de formulaire dans le composant d’auto-complétion n’a pas d’intitulé
• l’ordre de tabulation n’est pas cohérent : quand on clique sur le composant qui affiche et masque l’auto-complétion, on transporte bien le focus dans le composant d’auto-complétion, cependant ce composant se trouve tout à la fin du DOM, ce qui fait que l’ordre de tabulation n’est pas cohérent. Car si on souhaite sortir/fermer le composant d’auto-complétion, on retourne tout en haut de la page.

L'exemple suivant présente un exemple de système d'auto-complétion respectant le design pattern Combobox, il reste à adapter selon vos souhaits d'utilisation.

// Label du champ 
<label id="ville-label">
  Ville ou CP
</label>
// Zone de combobox
<div class="combobox-wrapper">
  <div role="combobox" 
       aria-expanded="false" 
       aria-owns="ville-listbox" 
       aria-haspopup="listbox" 
       id="ville-combobox">
// Input pour la saisie de l'autocomplétion
    <input type="text" 
           aria-autocomplete="both" 
           aria-controls="ville-listbox" 
           aria-labelledby="ville-label" 
           id="ville-input">
// 
    <button tabindex="-1" id="ville-combobox-arrow">
      <img src="imgs/arrow_drop_down_grey_27x27.png" alt="Déplier la liste des villes">
    </button>
  </div>
// Liste des options proposées en fonction de la sélection
  <ul aria-labelledby="ville-label" 
      role="listbox" 
      id="ville-listbox" 
      class="listbox hidden">
  </ul>
</div>

Ressource : https://www.w3.org/TR/wai-aria-practices-1.1/#combobox


Related issues

Related to Intégrations graphiques Publik - Development #36305: Améliorer l'accessibilité (RGAA) des thèmesNouveau20 September 2019

Actions

History

#1

Updated by Marie Kuntz (absente) almost 3 years ago

#3

Updated by Frédéric Péters almost 3 years ago

C'est select2 on ne peut rien faire d'immédiatement évident, il faudrait trouver un projet équivalent à jour côté accessibilité.

#4

Updated by Frédéric Péters almost 3 years ago

  • Subject changed from Accessibilité : le champ d'autocomplétion n'est pas compatible avec les technologies d'assistance to Accessibilité : le champ d'autocomplétion (select2) n'est pas compatible avec les technologies d'assistance
#5

Updated by Marie Kuntz (absente) about 1 year ago

  • Tags set to accessibilité
#6

Updated by Frédéric Péters 10 months ago

  • Status changed from Nouveau to Fermé

On a monté select2 à la dernière version ce qui a amené une série d'amélioration accessibilité.

Also available in: Atom PDF