Les différences entre RGAA 2 et RGAA 3

Le , par Aurélien Levy - Accessibilité

Avertissement : cet article a été publié en 2015. Son contenu n'est peut-être plus d'actualité.

Comme nous l’avons déjà dit précédemment nous avons eu la chance d’être amené à auditer des sites au regard RGAA 3 et cela dès sa version bêta pour certains de nos clients.

Par ailleurs, nombre d’entre eux tels que le Conseil Général du Pas de Calais, la DILA, Sciences Po et le Service d’Information du Gouvernement avaient déjà entrepris une démarche basée sur le RGAA 2. Il s’est donc posé la question du différentiel entre le deux versions du référentiel afin notamment de pouvoir :

  • estimer une charge d’audit différentiel
  • connaître et se former aux nouveautés spécifiques RGAA 3
  • intégrer ces évolutions dans les prochains développements

Lors de l’appel à commentaire, le RGAA 3 affichait bien une liste de quelques différences. Néanmoins, après l’avoir utilisée nous nous sommes rapidement rendu compte que cette liste était loin d’être exhaustive notamment car la correspondance RGAA 2 / RGAA 3 a été réalisée au niveau des critères du RGAA 3 et non au niveau des tests. Cela explique une première série de différences non répertoriées jusqu’alors.

Ensuite, alors que dans le RGAA 2 la liste des tests contenait toutes les informations nécessaires à l’évaluation, le RGAA 3 présente trois documents pour mener cette évaluation : la liste détaillée des critères, le glossaire et les notes techniques. Ces deux derniers apportent également leur lot de différences non signalées.

Nous nous sommes donc attelé à produire liste des nouveautés en espérant qu’elle soit le plus exhaustif possible.

Quelques Statistiques

D’un point de vue global, sur les 335 tests constitutifs du RGAA 3, nous avons recensé :

  • 69 nouveaux tests
  • 156 tests avec des conditions d’applications ou un champ d’application modifiés par rapport au RGAA 2.

Tests supprimés

Que vous utilisiez ou non HTML 5, les tests associés à certains éléments ou attributs non repris dans la spécification HTML5 ont été supprimés du RGAA 3 :

  • 4 éléments : applet, frame, acronym, embed (partiellement pour ce dernier)
  • 1 attribut : summary

De nouveaux éléments et attributs pris en compte

Inversement, toute une série d’éléments et attributs sont maintenant pris en compte et font partie du champ d’application des nouveaux tests :

  • 26 éléments : video, audio, canvas, svg, input type=“search”, input type=“tel”, input type=“email”, input type=“number”, input type=“tel”, input type=“url”, input type=“date”, input type=“range”, input type=“color”, input type=“time”, datalist, keygen, output, progress, meter, main, footer, nav, header, track, figure, desc
  • 10 attributs: role, aria-label, aria-labelledby, aria-describedby, aria-invalid, aria-required, required, aria-level, aria-hidden, dir

Quelques exemples des nouvelles obligations

Parmi les obligations spécifiques au RGAA3, nous attirons votre attention sur la liste suivante. Nous l’avons constituée de manière à mettre plus en évidence certaines informations présentes dans le glossaire et les notes techniques et/ou en prenant en compte les aspects ayant un fort impact sur les développements.

  • Ne plus utiliser de pour titrer un tableau de donnée
  • Ne plus utiliser d’attribut title vide
  • Ne plus utiliser d’attribut title identique au libellé (sauf image lien)
  • Utiliser des boutons permettant de contrôler le niveau sonore et l’affichage des sous-titres au clavier / souris dans les lecteurs vidéos
  • Utiliser un role presentation sur tableau de mise en forme
  • Utiliser des liens / boutons dans la page permettant d’accéder aux alternatives des scripts non accessibles sans que l’utilisateur ait besoin de désactiver javascript
  • Ne pas utiliser des font-size en pixel
  • Utiliser l’élément pour indiquer la présence d’erreur de saisie dans un formulaire</li> <li>Utiliser les motifs de conceptions quand vous utilisez de l’ARIA sur un élément d’interface correspondant à un motif de conception</li> <li>Vérifier la restitution dans la base de référence (min 3 technologies d’assistances, 2 navigateurs, 2 systèmes d’exploitation) quand vous utilisez de l’ARIA, <svg> ou <canvas></li> </ul> <h3 id="quelques-exemples-des-nouvelles-possibilités">Quelques exemples des nouvelles possibilités</h3> <p>Nous attirons ici votre attention sur un ensemble de nouvelles possibilités offertes aux concepteurs et qui permette d’être conforme au RGAA 3. De la même manière que dans la section précédente, nous avons constitué cette liste de manière à mettre plus en évidence certaines informations présentes dans le glossaire et les notes techniques et/ou en prenant en compte les aspects ayant un fort impact sur les développements.</p> <ul> <li>Indiquer l’existence d’une description longue adjacente d’image dans l’attribut alt</li> <li>Utiliser le contexte d’une image lien pour fournir un intitulé pertinent (<p>, <li>, <hx> précédant, etc.)</li> <li>Utiliser role heading et aria-level pour structurer les titres de hiérarchies</li> <li>Utiliser aria-label pour donner un intitulé au lien ou champs de formulaire</li> <li>Utiliser required ou aria-required pour indiquer un champ de saisie obligatoire</li> <li>Utiliser role list et listitem pour structurer des listes</li> <li>Utiliser rem pour définir vos tailles de caractères</li> <li>Utiliser une image de fond et du texte caché pour styler un lien ou un bouton</li> <li>Utiliser un élément <meta> avec une valeur à 0 pour faire une redirection</li> <li>Utiliser une version epub accessible pour une pdf, docx, odt non accessible</li> </ul> <h3 id="détails-des-différences-rgaa-2--rgaa-3">Détails des différences RGAA 2 / RGAA 3</h3> <p>Les listes précédentes ont été constituées à partir du travail détaillé que nous avons effectué sur la grille des tests du RGAA 3. C’est pourquoi, pour avoir les détails des nouveautés du RGAA 3, nous vous proposons de télécharger la grille détaillée des différences du RGAA 3 au format xlsx (Licence CC-BY-SA).</p> <p>Ce fichier a également été transmis à la DISIC, en charge du RGAA 3. Nous espérons qu’il sera repris dans les annexes officielles du RGAA 3 afin de faciliter le travail d’évaluation et de transition entre les versions. En attendant, ces informations seront bien évidement intégrées à nos différentes formations RGAA.</p> </div> </article> </div> </main> <footer role="contentinfo" id="footer"> <div class="footer--int wrapper"> <ul> <li> <a href="../../equipe/">Équipe</a> </li> <li> <a href="../../expertises/">Expertises</a> </li> <li> <a href="../../formation/">Formation</a> </li> <li> <a href="../../contact/">Contact</a> </li> <li> <a href="../../blog/">Blog</a> </li> <li><a href="../../references/">Références</a></li> </ul> <ul> <li><a href="../../mentions-legales/">Mentions légales</a></li> <li><a href="../../plan-du-site/">Plan du site</a></li> <li class="footer--int__rs"><a href="https://www.linkedin.com/company/temesis/"><span class="invisible">Linkedin Temesis</span> <svg aria-hidden="true" focusable="false" width="14" height="14" fill="#fff"> <use xlink:href="../../assets/images/sprite.svg#linkedin"></use> </svg> </a></li> <li class="footer--int__rs"><a href="https://twitter.com/temesis"><span class="invisible">Twitter Temesis</span> <svg aria-hidden="true" focusable="false" width="14" height="14" fill="#fff"> <use xlink:href="../../assets/images/sprite.svg#twitter"></use> </svg> </a></li> </ul> <div class="qualiopi"> <a href="../../mentions-legales/#certification-qualiopi"><img width="140" height="75" loading="lazy" src="../../assets/images/qualiopi.webp" alt="Qualiopi – Processus certifié – République française"></a> <p>La certification qualité a été délivrée au titre de la catégorie d’action suivante : actions de formation.</p> </div> <div class="logo"> <span class="invisible">Temesis</span> <svg aria-hidden="true" focusable="false" width="179" height="40" > <use xlink:href="../../assets/images/sprite.svg#logo-text"></use> </svg> </div> <div class="txt"> <p>© 2024 Temesis - SAS au Capital de 1000 €</p><p>91 avenue de la République - 75011 Paris - France - <a href="tel:+33170957070">+33 (0)1 70 95 70 70</a></p><p>Prestataire d’actions de compétences, déclaré sous le numéro 11 75 62210 75 auprès du préfet de région d’Île-de-France. Cet enregistrement ne vaut pas agrément de l'État.</p><p>Temesis fait partie du groupe <a href="https://www.ctrla.fr/">Ctrl-a</a>, pour un web juste et utile.</p> </div> <ul> <li><a href="../../declaration-ecoconception/">Déclaration d’écoconception</a></li> <li><a href="../../declaration-accessibilite/">Accessibilité : totalement conforme</a></li> </ul> </div> </footer> <div id="navbar" class="nav-bar" role="dialog" aria-hidden="true" aria-modal="true" aria-label="menu"> <div role="document"> <button type="button" class="close-menu" id="closeMenu"> <span class="invisible">fermer le menu</span> <svg aria-hidden="true" focusable="false" width="32" height="31" > <use xlink:href="../../assets/images/sprite.svg#close"></use> </svg> </button> <ul> <li> <a href="../../equipe/" class="link">Équipe</a> </li> <li> <a href="../../expertises/" class="link">Expertises</a> </li> <li> <a href="../../formation/" class="link active" aria-current="true">Formation</a> </li> <li> <a href="../../contact/" class="link">Contact</a> </li> <li> <a href="../../blog/" class="link">Blog</a> </li> </ul> </div> </div> <script> document.documentElement.className = 'js'; document.getElementById("openMenu").addEventListener("click", e => { document.getElementById("navbar").setAttribute("aria-hidden", !1), document.getElementById("skip").setAttribute("aria-hidden", !0), document.getElementById("banner").setAttribute("aria-hidden", !0), document.getElementById("main").setAttribute("aria-hidden", !0), document.getElementById("footer").setAttribute("aria-hidden", !0), document.getElementById("navbar").addEventListener("transitionend", e => { "navbar" === e.target.id && document.getElementById("closeMenu").focus() }) }); document.getElementById("closeMenu").addEventListener("click", e => { document.getElementById("navbar").setAttribute("aria-hidden", !0), document.getElementById("skip").setAttribute("aria-hidden", !1), document.getElementById("banner").setAttribute("aria-hidden", !1), document.getElementById("main").setAttribute("aria-hidden", !1), document.getElementById("footer").setAttribute("aria-hidden", !1), document.getElementById("openMenu").focus() }); const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', modal = document.querySelector("#navbar"), firstFocusableElement = modal.querySelectorAll(focusableElements)[0], focusableContent = modal.querySelectorAll(focusableElements), lastFocusableElement = focusableContent[focusableContent.length - 1]; document.addEventListener("keydown", function(e) { ("Tab" === e.key || 9 === e.keyCode) && (e.shiftKey ? document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), e.preventDefault()) : document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), e.preventDefault())), 27 == event.keyCode && document.getElementById("closeMenu").click() }), firstFocusableElement.focus(); </script> </body> </html>