AcceDe Web 2.2
Cela fait un petit moment que nous ne vous avons pas informés sur ce blog des évolutions apportées aux notices d’accessibilité « AcceDe Web ». (Nos dernières nouvelles datant du billet « AcceDe Web 2.1 ».)
Nous vous proposons donc ci-dessous un récapitulatif des évolutions apportées au projet depuis août 2016.
Puis, nous vous proposons aussi, à la fin de ce billet, les évolutions envisagées pour cette année 2019.
Évolutions majeures
Vous trouverez ci-après la liste exhaustive des évolutions importantes apportées au projet.
Traduction des contenus masqués
Une fiche « 3.3. Veiller à traduire les contenus masqués » a été ajoutée à la notice HTML, CSS et JavaScript.
aria-current
Les deux fiches suivantes concernant l’utilisation du récent attribut aria-current ont été ajoutées dans la notice HTML, CSS et JavaScript :
- 1.7. Identifier la position courante dans les systèmes de navigation avec
aria-current. - 7.9. Identifier l’étape courante des formulaires à étapes multiples avec
aria-current="step".
Technique de masquage
Auparavant, dans la thématique « 5. Liens et boutons », nous mettions en avant une technique de masquage de contenus pour rendre les liens et les boutons explicites.
Cette technique de masquage consistait à cacher des contenus en les sortant de l’écran via les déclarations CSS « position: absolute; » et « left: -99999px; ».
Bien que cette technique reste compatible avec l’accessibilité et ses référentiels (WCAG et RGAA), nous avons décidé de l’écarter de la notice car elle génère dans quelques rares cas particuliers des effets de bord non-désirés (notamment sur iOS et VoiceOver).
Par conséquent, désormais, de manière générale et sauf cas rares, nous recommandons plutôt l’utilisation de l’attribut aria-label pour rendre explicites les liens et les boutons.
Liens d’évitement
Les contenus de la fiche « Mettre en place des liens d’évitement » ont été retravaillés en profondeur.
En particulier les exemples de code CSS d’affichage et masquage de ces liens d’évitement.
Menu déroulant
Une fiche « Menu déroulant » a été ajoutée dans la notice des principaux composants d’interface riche.
Accordéon
La fiche « Accordéons » a été mise à jour pour coller aux récentes évolutions du Design Pattern « Accordion (Sections With Show/Hide Functionality) » des « WAI-ARIA Authoring Practices 1.1 ».
À noter que ces évolutions ont entraîné une simplification importante de ce composant d’interface riche. En particulier concernant ses interactions au clavier.
Onglets
La fiche « Onglets » a été mise à jour pour coller aux récentes évolutions du Design Pattern « Tabs ».
À noter que nous avons également enrichi cette fiche d’une capture d’écran présentant un exemple graphique d’un système d’onglets.
Boutons radio et cases à cocher simulés en ARIA
Les fiches « Boutons radio simulés en ARIA » et « Cases à cocher simulées en ARIA » ont été mises à jour pour coller aux récentes évolutions de leur Design Pattern respectif « Radio Group » et « Checkbox ».
Évolutions mineures
Vous trouverez ci-après une liste non exhaustive des légères évolutions apportées au projet.
Signalement des ouvertures de nouvelle fenêtre
La fiche « Signaler chaque lien et bouton déclenchant l’ouverture d’une nouvelle fenêtre » de la notice pour la conception fonctionnelle et graphique a été déportée dans ses recommandations additionnelles.
Pour en connaître les raisons, nous vous invitons à prendre connaissance des commentaires de cette même fiche.
Images et icônes informatives
L’exemple de la partie « Icônes informatives » de la fiche « 6.1. Gérer l’alternative des polices d’icônes (Icon Fonts) » a été mis à jour. Car finalement, après réflexion, le précédent n’était pas très adapté.
Par conséquent, ce changement d’exemple a également été reporté sur les fiches « 6.2. Gérer l’alternative des SVG (images vectorielles) » et « 6.3. Gérer l’attribut alt des balises <img> et <input type="image"> ».
Identification des principales zones de la page
La fiche « Identifier les principales zones de la page avec l’attribut id ou une ancre nommée » a été supprimée des recommandations additionnelles de la notice HTML, CSS et JavaScript. Elle ne fait donc plus partie du projet.
La raison étant qu’elle était en réalité déjà couverte par la fiche « 12.2. Mettre en place des liens d’évitement ».
Encarts « Aller plus loin »
Plusieurs encarts « Aller plus loin » ont été mis à jour (ajout de ressources et suppression de liens morts).
Encarts « Composants »
Certains encarts « Composants » de la notice des principaux composants d’interface riche ont été mis à jour :
- Suppression de ressources ne respectant plus le composant d’interface riche en question.
- Ajout de ressources le respectant.
Captures d’écran
Plusieurs captures d’écran illustrant les fiches de la notice pour la conception fonctionnelle et graphique ont été remplacées en vue de les moderniser.
Évolutions prévues en 2019
De nombreuses et importantes évolutions sont prévues pour AcceDe Web courant 2019 !
Nous pensons notamment à :
- La mise à jour des trois fiches concernant les fenêtres modales de la notice des principaux composants d’interface riche.
- L’ajout dans cette même notice d’une fiche « Menu Hamburger ».
- L’ajout d’une ou plusieurs fiche(s) concernant les « Live Regions ». Pour en savoir plus à ce sujet et en attendant, nous vous invitons à prendre ou reprendre connaissance de l’article « ARIA Live Regions #AdvisoryTechnique ».
- L’intégration de tous les nouveaux critères des WCAG 2.1 que vous pouvez retrouver sur la page « New Features in WCAG 2.1 ».
Enfin, nous avons le plaisir de vous annoncer que nous allons prochainement publier une mise à jour complète de la version anglaise du projet qui reflétera la version française actuelle !
D’ici là, n’hésitez surtout pas à continuer de participer à ce projet collaboratif soit en commentant directement les fiches soit en nous écrivant à l’adresse contact@atalan.fr.
Vos commentaires
-
Merci de continuer à faire vivre ces notices qui sont (et qui, du coup, restent) une excellente ressources !
-
Bonjour Delphine,
Merci pour ce gentil commentaire !
Sébastien.
-
