Accessibilité TinyMCE: Label Pour

Une de nos applications Web vient d'être soumise à des tests de conformité 508. Nous utilisons TinyMCE version 3 pour le développement de contenu et je comprends qu'il a généralement une bonne accessibilité. Cependant, une de nos pages contient 3 instances TinyMCE ou plus, chacune précédée d'un label indiquant à quoi sert l'instance TinyMCE mais on nous dit que ce sont des étiquettes "implicites" quand elles devraient être des étiquettes "explicites" (ie avec l'attribut for). Le problème est que les instances de TinyMCE ne sont que des iframes avec un assortiment complexe de "contrôles" html personnalisés, alors que pour autant que je sache, l'étiquette/pour la technique ne fonctionne qu'avec les éléments de formulaire traditionnels. Quelle est la meilleure stratégie pour obtenir une étiquette "explicite" pour une instance de TinyMCE?Accessibilité TinyMCE: Label Pour

Merci!

Modifier

Solutions examinées à l'aide label + for qui ne fonctionne pas: pointer le label au textarea initial, pointant le label au produit iframe.

Une solution possible j'explore est englobant chaque cas TinyMCE avec un ledgend + fieldset mais tester cela avec JAWS 9.0, il ne semble pas faire de différence à moins que le fieldset contient des éléments de forme (par exemple input, type=text) et JAWS est en mode formulaire.

Source

2010-11-23 Stephen Swensen

Si je lis le specs droit, la propriété for doit en effet point à un autre contrôle sur la même page, comme vous dites déjà. Par conséquent, je pense que la seule option valide est de pointer l'attribut for à l'élément <textarea> que TinyMCE remplace. C'est le plus logique, vu que cet élément est envoyé au serveur lorsque l'édition est terminée.

Source

2010-11-23 17:07:40

Merci @Pekka, j'avais essayé pointant vers l'étiquette au textarea, mais je pense que cela ne fonctionne pas parce que le textarea est rendu invisible (JAWS, par exemple, ne lit généralement pas display: none ou visibility: hidden elements). –

@Stephen ouais, je pense que vous êtes un peu foutu avec ce :) Je suppose que vous pourriez faire pointer vers id de l'iframe lorsque TinyMCE l'a remplacé, mais ce n'est pas valide en tant que tel. Peut-être encore mieux que l'alternative, je ne peux pas juger cela –

Il existe une norme émergente pour exactement ce type de problème: ARIA (Accessible Rich Internet Applications). C'est encore un brouillon de travail, mais le support commence à apparaître dans les récents lecteurs d'écran (JAWS 9, versions récentes de NVDA) lorsqu'il est utilisé avec les navigateurs récents (IE 9, Firefox 3.6 (partiel) et 4.0, Chrome). Dans ce cas particulier, consultez aria-label et aria-labelledby. Ce sont des attributs qui seraient ajoutés à l'élément BODY dans le widget de TinyMCE - ou à l'IFRAME, celui des deux qui prend réellement le focus lorsque l'utilisateur entre des données. Ainsi:

<body aria-label="Edit document">

L'attribut aria-label spécifie simplement une chaîne qui sert de label. L'aria-labelledby (notez les deux L, selon l'orthographe britannique) fonctionne comme l'élément traditionnel LABEL à l'envers. Autrement dit, vous nourrir un ID:

<body aria-labelledby="edit-label">

Et vous auriez ce quelque part ailleurs dans le code:

<label id="edit-label">Edit document</label>

Il ne doit pas nécessairement être un élément LABEL, vous pouvez utiliser un SPAN ou autre, mais LABEL semble sémantiquement approprié.

Les attributs ARIA ne seront pas validés sous HTML 4 ou DTD XHTML. Cependant, ils vont valider sous HTML 5 (lui-même encore en développement).Si la validation est importante pour vous sous une DTD plus ancienne, vous pouvez ajouter les attributs par programmation en utilisant JavaScript lorsque la page a été chargée.

Idéalement, si vous avez déjà une étiquette visible pour le widget, vous devriez utiliser aria-labelledby pour éviter la redondance. Cependant, je n'ai aucune idée si cela fonctionnera au-delà des limites du document. C'est-à-dire, si le BODY est dans un IFRAME, et l'étiquette visible est définie dans le document parent d'IFRAME, je ne sais pas si cela fonctionnera. Le navigateur/lecteur d'écran peut traiter les deux comme des documents distincts qui ne se parlent pas. Vous devrez expérimenter pour le savoir. Mais s'il s'avère qu'ils ne fonctionnent pas, essayez http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden. Ainsi, dans le document parent:

<label aria-hidden="true">Edit document</label>

Et dans le document TinyMCE:

<body aria-label="Edit document">

L'attribut caché aria-empêchera l'étiquette dans le document parent d'être lu, et l'attribut label aria dans le document enfant (qui n'est pas visible) prendra sa place. Voila, un widget étiqueté de manière visible et audible sans aucune lecture redondante. Si vous utilisez aria-hidden de cette façon, faites très attention à ce que le bit que vous cachez (ou un équivalent) soit toujours disponible pour lire quelque part ailleurs.

Cette solution ne fonctionne que pour les personnes utilisant des navigateurs Web et des lecteurs d'écran prenant en charge ARIA. Les personnes avec des lecteurs d'écran ou des navigateurs plus âgés n'auront pas de chance, ce qui est longuement discuté dans l'article récent sur A List Apart, The Accessibility of WAI ARIA. L'auteur présente un bon argument en faveur de la préférence pour les solutions HTML sémantiques traditionnelles chaque fois que cela est possible; mais dans votre cas, je ne pense pas que vous ayez d'autre choix. À tout le moins, l'ajout d'attributs ARIA vous permettra raisonnablement d'affirmer que vous avez fait preuve de diligence raisonnable et que vous avez fait un effort de bonne foi pour le rendre aussi accessible que possible.

Bonne chance! Note à l'intention des futurs lecteurs: Les liens vers la spécification ARIA donnés ici renvoient à l'avant-projet de septembre 2010. Si cela fait plus de quelques mois, vérifiez les spécifications les plus récentes.

Source

2010-12-12 20:31:27

En utilisant les informations Will Martin fournies au sujet du aria-label attribut, j'ai écrit la ligne suivante de code qui fonctionne pour TinyCME 4:

tinymce.init({ 
    … 
    init_instance_callback: function(editor) { 
     jQuery(editor.getBody()).attr('aria-label', jQuery('label[for="' + editor.id + '"]').text()) 
    } 
});

Il utilise la fonction de rappel déclenchée après l'initialisation de l'éditeur.

Il doit y avoir un label destiné à l'élément d'origine sur lequel TinyMCE est appelé, dans mon cas un textarea. par exemple .:

<label for="id_of_textarea">Shiny wysiwyg editor"</label><textarea id="id_of_textarea"></textarea>

Le contenu de l'étiquette (texte) est ajouté comme attribut label air à l'étiquette de corps à l'intérieur du TinyMCE-iframe.

OSX est screenreader returing propperly l'étiquette lors de la sélection du TinyMCE

d'inspiration de TinyMCE: How bind on event after its initialized

Source

2017-12-19 09:14:24 Pit

Répondre

Questions connexes