#vuecember2020 #a11y #frontend #vuejs

vue-axe

vue-axe überprüft die Zugänglichkeit von Vue.js-Anwendungen auf Basis von axe-core, einer Testing Library, welche das eigene Projekt gegen die Empfehlungen für Barrierefreiheit der „Web Content Accessibility Guidelines“ (WCAG) prüft. Bekannte Tools wie Lighthouse, webhint oder Accessibility Insights for Web arbeiten mit axe-core unter der Haube.

Das Besondere an vue-axe ist, dass sich die eigene Applikation bereits während der Entwicklungsphase auf Zugänglichkeit prüfen lässt: einfach via npm/yarn einbinden und die Checks ganz bequem per Konsole ausführen.

Installation & Verwendung

# npm
$ npm install -D axe-core vue-axe

# yarn
$ yarn add -D axe-core vue-axe

Dann zur main.js hinzufügen

// src/main.js
if (process.env.NODE_ENV === 'development') %7B
   const VueAxe = require('vue-axe').default
   Vue.use(VueAxe)
%7D

Verwendung mit nuxt.js

// plugins/axe.js
import Vue from 'vue'

if (process.env.NODE_ENV === 'development') %7B
   const VueAxe = require('vue-axe').default
   Vue.use(VueAxe)
%7D
// nuxt.config.js
plugins: [
   %7B src: '~/plugins/axe.js', mode: 'client' %7D
]

Wer Storybook benutzt, kann auch dort sehr einfach das entsprechende Accessibility-Addon einbinden. Dann erhält man die Überprüfung auch auf Komponenten-Ebene direkt in Storybook.

vue-axe ermöglicht somit die Validierung auf Barrierefreiheit als Teil der üblichen Unit-Tests. Das ist zwar extrem komfortabel, sollte aber nur als zusätzlicher Baustein zur Qualitätssicherung und realen User Tests gesehen werden.

Details zur Installation, Verwendung und Konfiguration: https://github.com/vue-a11y/vue-axe

Das Thema Accessibility und vor allem warum alle Nutzer:innen davon profitieren, haben wir in einem gesonderten Artikel beleuchtet.