7
votes

TinyMCE Accessibilité: étiquette pour

Une de nos applications Web vient de passer à 508 tests de conformité. Nous utilisons TinyMCE Version 3 pour le développement de contenu et je comprends que cela a généralement une bonne accessibilité. Cependant, l'une de nos pages contient 3 instances de TinyMCE ou plus chacune précédée d'un étiquette indiquant ce que l'instance TinyMCE est pour mais on nous dit que ce sont des étiquettes "implicites" quand elles devraient être "explicites" étiquettes (c'est-à-dire avec l'attribut pour ). Le problème est que TinyMCE Les instances ne sont que des iframes avec un assortiment complexe de "contrôles" de HTML personnalisés, alors que dans la mesure où je sais que l'étiquette / la technique ne fonctionne que avec des éléments de forme traditionnels. Quelle est la meilleure stratégie pour atteindre une étiquette «explicite» pour une instance TinyMCE?

Merci!

Modifier

Solutions explorées à l'aide de étiquette + pour qui ne fonctionne pas: pointant sur l'étiquette au début textarea , pointant l'étiquette sur le iframe généré .

Une solution possible que j'explore est englobant chaque instance TinyMCE avec un LEDGEND + Tableau mais la teste de la sorte avec les mâchoires 9.0 Il ne semble pas faire de différence à moins que Le champs contient des éléments de formulaire (par exemple, entrée , type = texte ) et la mâchoire est en mode formulaires.


                        
                        
                            
                                                                    html
                                                                    accessibility
                                                                    tinymce
                                                                    section508
                                                            
                        
                                                    
                            
                            
                                0 commentaires



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Si je lisais le  Spécifications  droite, le  pour  La propriété doit en effet indiquer un autre  Control  sur la même page, comme vous le souhaitez déjà. 

 Par conséquent, je pense que la seule option valide est de pointer le document  pour  attribuer sur le   </ code> élément qui remplace TimesyMCE. Cela a le plus de sens, voir que cet élément est envoyé au serveur lorsque l'édition est terminée. </ P>                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">2 commentaires</small>
                                        <div class="comments mt-3">
                                                                                            <p class="answer-comment">
                                                    Merci @pekka, j'avais essayé de pointer l'étiquette au Texarea, mais je pense que cela ne fonctionne pas car la Textarea est faite invisible (mâchoires, par exemple, ne lit généralement pas l'affichage: aucune ou visibilité: éléments cachés).                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    @Stephen Ouais, je pense que vous êtes un peu vissé avec ceci :) Je suppose que vous pourriez le faire indiquer l'ID de l'iframe quand TinyMCE l'a remplacé, mais ce n'est pas valide comme tel. Peut-être encore mieux que l'alternative, je ne peux pas juger que                                                </p>
                                                <hr>
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    5<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Il existe une norme émergente pour ce type de problème: Aria (applications Internet riches accessibles). C'est toujours un brouillon de travail, mais le soutien commence à apparaître dans les lecteurs d'écran récents (Jaws 9, versions récentes de NVDA) lorsqu'il est utilisé avec des navigateurs récents (c.-à-d. 9, Firefox 3.6 (partielle) et 4.0, chrome). <p> Ce cas particulier, jetez un coup d'œil à <a href="http://www.w3.org/tr/2010/wd-wai-aria-20100916/states_and_properties#aria-label" rel="noreferrer"> Aria-label </a> et <a href="http://www.w3.org/tr/2010/wd-wai-aria-20100916/states_and_properties#aria-labelledby" rel="noreferrer"> Aria-labelledby  a >. Ce sont des attributs qui seraient ajoutés à l'élément corporel du widget de TinyMce - ou à l'IFRAME, selon les deux que les deux se concentrent réellement lorsque l'utilisateur saisit des données. Ainsi:  P> <pre><body aria-label="Edit document">
</pre></a>. Ainsi, dans le document parent:  p> <pr> xxx  pré> <p> et dans le document TinyMCE:  p> <pr> xxx  pré> <p> </p><p> L'attribut aria-caché empêchera L'étiquette du document parent d'être lu et l'attribut Aria-label dans le document enfant (qui n'est pas visible) prendra sa place. Voila, un widget étiqueté visiblement et audible sans lecture redondante.  P> </p><p> Si vous utilisez Aria-caché de cette façon, faites très attention que le bit que vous cachez (ou un équivalent) est toujours disponible pour Lire quelque part d'autre.  P> </p><p> Cette solution ne fonctionnera que pour les personnes utilisant des navigateurs Web et des lecteurs d'écran qui soutiennent ARIA. Les personnes avec des lecteurs d'écran plus âgés ou des navigateurs auront de la chance, ce qui est longuement discuté dans l'article récent sur une liste d'une liste, <a href="http://www.alistapart.com/articles/Le-accessieux-of-%20wai-aria%20/%20" rel=" noreferrer "> l'accessibilité de Wai Aria </a>. L'auteur fait une bonne affaire pour préférer des solutions HTML sémantiques traditionnelles dans la mesure du possible; Mais dans votre cas, je ne pense pas avoir une autre option. À tout le moins, l'ajout d'attributs Aria vous permettra de prétendre raisonnablement que vous avez effectué votre diligence raisonnable et faisait un effort de bonne foi pour le rendre aussi accessible que possible.  P> </p><p> bonne chance!  P>  Note aux futurs lecteurs: Les liens vers la spécification ARIA donnée ici font référence au projet de travail de septembre 2010. Si cela fait plus de quelques mois depuis lors, recherchez des spécifications plus récentes.  P>  P></p></pr></p></pr></p></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    0<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Utilisation des informations Martin fournies concernant l'attribut <code> Aria-étiquette  code>, j'ai écrit la ligne de code suivante qui fonctionne pour Tinycme 4: <pr> xxx  pré> <p> Il utilise le Fonction de rappel déclenchée après l'initialisation de l'éditeur.  P> </p><p> Il doit y avoir une étiquette  code> ciblée à l'élément d'origine sur lequel TinyMCE appelle, dans mon cas un <code> textarea . EG:  P> <pre><label for="id_of_textarea">Shiny wysiwyg editor"</label><textarea id="id_of_textarea"></textarea>
</pre></code></p></pr></code></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                    
            </div>
            <div class="col-lg-3 col-md-12 col-12 col-sm-12" >
                <div class="related">
		    <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                    <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p>
                                            <a href="/question/google-chrome-uncaught-promis-domexception-lors-de-la-lecture-audio" class="">
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        </a>
                        <hr>
                                            <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class="">
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        </a>
                        <hr>
                                            <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class="">
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        </a>
                        <hr>
                                            <a href="/question/comment-puis-je-d-eacute-finir-un-format-pour-les-nombres-d-39-entr-eacute-e-dans-blazor" class="">
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor                        </a>
                        <hr>
                                    </div>
                <div class="">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-5975820494937925"
                         data-ad-slot="4267220326"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                         (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>

            <script  type="text/javascript"  src="/js/purecookie.js"></script>        </div>

        <div class="container col-lg-8 col-md-12 ads-footer">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5975820494937925"
                 data-ad-slot="5580301997"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>

    </body>
    <footer>
        <div class="row col-lg-12 col-md-12 text-muted">
            © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>.
        </div>
    </footer>




</html>