Accessibilité des boîtes de dialogue

Attribue aux boîtes de dialogue de l’éditeur les noms et rôles nécessaires aux lecteurs d’écran. Sans ce plugin, certaines sont annoncées comme des menus et leurs champs de texte n’ont pas de nom (« edit, blank ») ; avec lui, Insert Link est une boîte de dialogue nommée « Insert Link » et ses champs sont annoncés comme « URL » et « Text ». Il est activé par défaut et ne modifie pas l’apparence.

Activation

Cette fonctionnalité est fournie par le plugin dialoga11y.js (également inclus dans plugins/all_plugins.js). Il suffit de le charger : dialogA11y vaut par défaut true. Aucun bouton n’est nécessaire.

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Select some text and press Ctrl+K to open the link dialog.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar: "full" });   // dialogA11y: false turns it off
</script>

Options

Option	Valeur par défaut	Fonctionnement
dialogA11y	true	false désactive le plugin.

editor.applyDialogAccessibility() l’applique une fois à toutes les fenêtres contextuelles de la page, par exemple après l’ajout de champs par votre code dans une fenêtre ouverte.

Fonctionnement

Le plugin surveille les fenêtres contextuelles de l’éditeur sur la page (rte-dropdown-panel, rte-dialog-float et .rte-panel-general). Pour chacune qui possède une barre de titre (rte-dialog-header):

• Rôle. Une fenêtre contextuelle avec titre et champs de texte reçoit role="dialog" à la place du role="menu" attribué par le noyau, car un menu ne peut pas contenir de champs de texte. Une fenêtre avec titre qui ne liste que des commandes reste un menu. Une boîte de dialogue ne conserve pas l’attribut aria-orientation.
• Nom. Si la boîte de dialogue n’a pas encore de nom, elle reçoit un aria-label issu du texte du titre, sans raccourci final comme « (Ctrl+K) ».
• Libellés des champs. Chaque champ sans nom reçoit un aria-label, tiré en priorité du libellé visible à côté, afin que le nom prononcé corresponde à l’écran. Sans libellé visible, le nom provient du conteneur du champ (rte-dialog-line-ALT devient « Alternative text », rte-dialog-line-WIDTH « Width », etc.), puis de l’espace réservé, du texte voisin et enfin du nom de la boîte de dialogue.

Les fenêtres sans barre de titre, comme les sélecteurs de couleurs et de polices, restent inchangées. Seule exception : un menu sans titre contenant un champ de texte visible devient role="dialog".

Les boîtes de dialogue dans un cadre rte-dialog-outer, comme Insert Image, Insert Emoji et l’éditeur d’images (créés avec editor.createDialog()), restent inchangées : le noyau leur attribue déjà role="dialog", un aria-label et aria-modal="true".

L’arbre d’accessibilité des boîtes de dialogue vérifiées, tel que Playwright le rapporte, avec le plugin désactivé puis activé :

Boîte de dialogue	dialogA11y: false	Valeur par défaut
Insert Link (bouton de la barre d’outils)	role="menu", champs textbox, textbox	role="dialog", champs textbox "URL", textbox "Text"
Insert Link (Ctrl+K)	dialog "Insert Link", champs textbox, textbox	dialog "Insert Link", champs textbox "URL", textbox "Text"
Find and Replace	dialog "Find and Replace", champs textbox, textbox	dialog "Find and Replace", champs textbox "Find", textbox "Replace"

Balisage obtenu pour la boîte de dialogue Insert Link de la barre d’outils (styles et icônes omis) :

<rte-dropdown-panel role="dialog" aria-label="Insert Link" class="rte-panel-general rte-panel-insertlink">
  <rte-dialog-header><rte-dialog-header-text>Insert Link</rte-dialog-header-text></rte-dialog-header>
  …
  <rte-dialog-line-url …><rte-dialog-input-label>URL</rte-dialog-input-label><input type="text" aria-label="URL">…</rte-dialog-line-url>
  <rte-dialog-line-text …><rte-dialog-input-label>Text</rte-dialog-input-label><input type="text" aria-label="Text"></rte-dialog-line-text>
  …
</rte-dropdown-panel>

Ce que le plugin ne fait pas

La gestion du focus relève du noyau de l’éditeur. Nous l’avons vérifiée dans Insert Link avec le plugin désactivé puis activé, avec le même résultat :

• Le focus commence dans le champ URL (ouverture à la souris ou avec Ctrl+K).
• Tab et Maj+Tab parcourent URL, Text, Open in new tab, Cancel et Insert en restant dans la boîte de dialogue.
• Échap ferme la boîte de dialogue et rend le focus au bouton Insert Link de la barre d’outils.

Le plugin ne définit pas non plus aria-modal. Le noyau définit aria-modal="true" sur les boîtes de dialogue Insert Image, Insert Emoji et l’éditeur d’images, et aria-modal="false" sur Find and Replace, qui permet de continuer à travailler dans le document ; le panneau Insert Link de la barre d’outils n’a pas de aria-modal.

À savoir

• Rien n’est ajouté au HTML du document ; les attributs portent sur les boîtes de dialogue de l’éditeur lui-même.
• Les noms proviennent du titre et des libellés visibles : avec un module de langue, ils sont donc dans cette langue. Les noms de repli (« Alternative text », « Width »…) sont en anglais.
• Dans la version 2.6.12, ouvrir Insert Link avec Entrée ou Espace sur le bouton place le focus sur Cancel plutôt que dans le champ URL ; Ctrl+K et un clic de souris le placent dans le champ URL.

Voir aussi : déclaration d’accessibilité, vérificateur d’accessibilité, createDialog.