Note de la rédaction : L'extension « Axe Coconut » n'est plus disponible.
L'équipe de l'axe-core , disponible sur Deque , a travaillé d'arrache-pied sur une série de mises à jour destinées à l'écosystème « axe » d'outils de test d'accessibilité. Passons en revue les dernières nouveautés afin que vous puissiez déterminer quels outils vous conviennent le mieux !
Découvrez Axe Coconut
Afin de permettre à tout le monde de tester facilement les dernières innovations d'axe-core, nous avons lancé une nouvelle extension Chrome gratuite, baptisée « axe Coconut ». Elle intègre nos dernières modifications de code pour le Shadow DOM (plus d'informations à ce sujet ci-dessous), et les règles expérimentales y sont également activées.
L'extension axe Coconut, conçue sur le même modèle que Chrome Canary ou Firefox Nightly, vous permettra de tester nos dernières API et règles avant leur publication sur des canaux plus stables, tels que notre extension axe pour Chrome classique.
Vous pouvez télécharger gratuitement axe Coconut depuis le Chrome Store et l'essayer sur tous les sites, y compris ceux utilisant Shadow DOM. Vous pouvez même l'utiliser en parallèle de notre extension Chrome axe habituelle : vous remarquerez qu'un onglet « DevTools », un logo et une fenêtre contextuelle « Action du navigateur » différents permettent de distinguer les deux versions. Nous serions ravis de recevoir vos commentaires à mesure que vous commencez à la tester, afin de pouvoir apporter les modifications nécessaires à nos API avant de mettre le code à la disposition de tous.
axe-core 3.0 alpha
Nous avons apporté des modifications importantes au moteur JavaScript d'axe-core pour la version 3.0.0, notamment la prise en charge de Shadow DOM et des composants Web ! Cette branche intègre également les mêmes améliorations que la version 2.4, notamment la prise en charge d'ARIA 1.1 et la localisation en japonais. Pour consulter la liste complète des mises à jour, rendez-vous sur notre journal des modifications.
Afin de vous permettre de nous faire part de vos commentaires sur nos nouvelles API Shadow DOM et sur les résultats des tests avant leur intégration dans la version stable 3.0.0, nous avons commencé à publier en avant-première une série de trois versions « alpha » sous le tag, @next.
Pour installer la dernière version préliminaire d'axe-core à l'aide de npm :
npm install axe-core@next
Cela vous permettra de tester l'accessibilité au sein des sous-arborescences Shadow DOM et entre celles-ci, couramment utilisées dans les composants Web, notamment dans la bibliothèque Polymer. Cette fonctionnalité nécessite des API personnalisées qui parcourent l'intégralité de l'arborescence DOM aplatie, plutôt que des API DOM telles que `document.querySelector`. Nous nous chargeons de cette gestion en interne, ce qui vous permet d'utiliser l'API familière ` axe-core ` pour tester l'intégralité de la page.
REMARQUE : afin de tester votre Shadow DOM et vos composants tiers, veillez à ne jamais utiliser l'option « Shadow DOM fermé », car cela empêcherait les extensions axe-core et aXe d'accéder au contenu du Shadow DOM.
Mais qu'est-ce que c'est que ce Shadow DOM ?
En bref : le Shadow DOM, qui s'inscrit dans le cadre de l'évolution récente des normes HTML vers les composants Web, permet d'encapsuler des parties de pages HTML à l'aide de JavaScript. Cette encapsulation élimine les conflits liés aux styles CSS, aux variables globales JavaScript et aux identifiants d'éléments. Cette nouvelle norme facilite la réutilisation de composants tiers. Si vous avez déjà essayé d'intégrer un widget jQuery UI un peu trop zélé, vous avez peut-être rencontré le genre de problème que le Shadow DOM vise à résoudre.
Parmi les autres exemples de Shadow DOM que vous avez peut-être déjà rencontrés, on peut citer les balises vidéo et les champs de saisie HTML5, qui contiennent plusieurs contrôles au sein d'un même élément : intégrer un
Shadow DOM as a standard provides developers with the same mechanism for encapsulation browsers have internally relied upon for years. But we can now create our own shadow trees for any HTML element, such as plain DIVs, canvas, or custom elements to name a few.
When you attach custom Shadow DOM to an element (called the host), it creates a boundary at the top of which is a ShadowRoot. The encapsulation of shadow roots means that DOM APIs such as document.querySelector have limited capabilities to pierce the boundary (there is the shadow piercing combinator >>> mais il présente des limites en termes de spécificité). Nous avons donc dû créer notre propre outil.
Heureusement, cette technique avait déjà fait l’objet de travaux antérieurs dans la bibliothèque « Accessibility Developer Tools » de Google, et nous avons bénéficié d’une aide précieuse de la part de nos collègues de Google, notamment Rob Dobson et Alice Boxhall. Ils utilisent désormais eux-mêmes « axe-core » dans leur outil Lighthouse et adopteront la version « shadow DOM » dès sa sortie.
Shadow DOM et sélecteurs de cadre dans les résultats d'axe-core
La différence la plus évidente lors de l'utilisation de ` axe-core 3x` réside dans les cibles de sélecteur renvoyées pour les nœuds dans les résultats des tests d'accessibilité, lorsque l'élément en question se trouve à l'intérieur d'une racine fantôme. Le format est un tableau JavaScript contenant soit des chaînes de caractères (DOM normal, avec ou sans iframes), soit des tableaux de chaînes de caractères (shadow DOM, avec ou sans iframes).
// CSS Selector in a simple document without iframes
['#myCoolNode']
// CSS Selector inside an iframe
[
'frame.someIframe', '#myCoolNode'
]
// Element inside the shadow DOM of a simple document without an iframe.
// Note the extra brackets []
[
[
'#hostNode, '.someElementInShadowTree'
]
]
En clair, d'après notre documentation API concernant l'objet « results » de la méthode axe-core :
nodes[n].target : tableau composé soit de chaînes de caractères, soit de tableaux de chaînes de caractères. Si un élément du tableau est une chaîne de caractères, il s'agit d'un sélecteur CSS. Si le tableau contient plusieurs éléments, chacun d'entre eux correspond à un niveau d'iframe ou de frame. S'il n'y a qu'une seule iframe ou frame, le tableau target doit comporter deux entrées. S'il y a trois niveaux d'iframe, le tableau target doit comporter quatre entrées.
Si l'élément du tableau est un tableau de chaînes de caractères, il pointe alors vers un élément d'un DOM fantôme et chaque élément (à l'exception du n-1e) de ce tableau correspond à un sélecteur pointant vers un élément DOM doté d'un DOM fantôme. Le dernier élément du tableau pointe vers le nœud final du DOM fantôme.
API principales du Shadow DOM et utilitaires de test
Le développement et les tests du moteur interne d'axe-core 3x impliquent l'utilisation de certaines de nos dernières API et de nos derniers outils de test. À moins que vous ne travailliez directement sur la bibliothèque principale, cela ne devrait pas vous concerner outre mesure. Toutefois, si vous souhaitez y contribuer, nous vous recommandons de consulter notre guide du développeur mis à jour afin de vous familiariser avec les modifications apportées.
Pour gérer le Shadow DOM, nous avons introduit la prise en charge des « nœuds virtuels » via une API. Un `virtualNode` dans ` axe-core ` est un objet JavaScript personnalisé représentant un nœud DOM, qui peut se trouver ou non à l'intérieur d'une limite Shadow. Ce nœud est organisé en une arborescence aplatie qui représente la hiérarchie exposée aux API d'accessibilité.
Un objet `virtualNode` contient le nœud HTML proprement dit, par exemple un élément `DIV` ; un tableau contenant tous les nœuds enfants du DOM virtuel ; ainsi qu'un `shadowId`, qui indique à quelle racine d'ombre appartient le nœud. Si cette valeur n'est pas définie, le nœud est alors un simple nœud DOM classique.
// VirtualNode
{
actualNode: div,
children: [virtualNodes],
shadowId: undefined
}
Nous transmettons désormais le nœud virtuel et le nœud DOM classique aux fonctions de correspondance de règles ainsi qu'aux fonctions d'évaluation des vérifications. Il existe quelques nouvelles API permettant d'interroger l'arborescence aplatie (composée) et d'en extraire un nœud ; nous les utilisons en interne lorsque la hiérarchie de l'arborescence d'accessibilité revêt une importance particulière.
Afin de faciliter la rédaction de tests pour les utilitaires, les vérifications et les règles qui doivent prendre en compte les `virtualNodes`, nous avons créé quelques utilitaires de test pour simplifier le processus. Il existe notamment un utilitaire permettant de vérifier la prise en charge du Shadow DOM, que nous utilisons pour ignorer les tests sur les plateformes qui ne prennent pas en charge le Shadow DOM, comme PhantomJS. Il existe également des utilitaires permettant de simuler un `checkContext` et de configurer des fixtures avec le Shadow DOM.
Pour plus d'informations, consultez le guide du développeur 3x et notre suite de tests automatisés.
axe-core 2.4
Dans la version 2.4 du moteur JavaScript « axe-core », nous avons publié plusieurs mises à jour concernant les règles d'accessibilité, notamment : la prise en charge de base d'ARIA 1.1, des corrections relatives aux listes déroulantes et au contraste des couleurs, et bien plus encore. Ces mises à jour sont disponibles à la fois dans les branches 2x et 3x ; vous pouvez donc en profiter, que vous utilisiez ou non la prise en charge expérimentale du Shadow DOM.
Grâce à notre partenaire Mitsue-Links, nous avons ajouté la localisation en japonais à notre infrastructure, en plus de celle en néerlandais. Nous avons également rédigé une nouvelle documentation concernant les règles et le débogage en CI.
La liste complète des modifications apportées dans la version 2.4 est disponible dans le journal des modifications d'axe-core , ainsi que dans le guide du développeur de la branche 2x sur GitHub.
Attributs ARIA 1.1
Voici une liste des attributs ARIA 1.1 pour lesquels nous avons constaté une prise en charge suffisamment répandue par les technologies d'assistance pour justifier leur inclusion dans axe-core à l'heure actuelle :
Nouveau
- aria-modal, avec les valeurs suivantes : ['true', 'false']
- aria-keyshortcuts : [chaîne de caractères]
- aria-placeholder : [chaîne de caractères]
- role=flux
- role=terme
- aria-colindex, aria-colspan, aria-rowindex, aria-rowspan
- aria-colcount, aria-rowcount
- aria-posinset, aria-setsize
- aria-orientation
Modifié
- aria-haspopup accepte désormais les valeurs suivantes : ['true', 'false', 'menu', 'listbox', 'tree', 'grid', 'dialog']
Pour nous faire part de vos commentaires ou poser des questions concernant aXe Coconut, axe-core 3x ou même axe-core 2x, n'hésitez pas à nous contacter à l'adresse axe@deque.com, sur notre dépôt Github ou sur le canal Gitteraxe-core .
