Die digitale Barrierefreiheit ist schon lange ein Kernthema der Webentwicklung und gewinnt durch gesetzliche Bestimmungen wie das Barrierefreiheitsstärkungsgesetz weiter an Bedeutung. Webseitenbetreiber:innen werden vermehrt verpflichtet ihre Angebote möglichst barrierearm zu konzipieren oder umzugestalten. Ein wichtiger Bestandteil der barrierefreien Gestaltung von Webseiten ist dabei die Bedienbarkeit per Tastatur.

Fokustraps

Wie Tastaturzugänglichkeit Barrieren reduziert

Gemäß WCAG müssen alle Funktionen einer Webseite per Tastatur zugänglich sein, ohne dass weitere Eingabemethoden benötigt werden. Besonders Nutzer:innen, die z.B. durch motorische Beeinträchtigungen keine Maus- oder Touch-Eingaben nutzen können, sind darauf angewiesen.

Bei der Navigation per Tastatur werden Tastaturbefehle verwendet, um sich durch die Inhalte der Seite zu bewegen. Dabei wird beispielsweise wiederholt die TAB-Taste gedrückt, um der Reihe nach Seiteninhalte zu "fokussieren". Durch eine klare Seitenstruktur und eine sinnvolle Fokus-Reihenfolge werden somit Barrieren für Nutzer:innen im Web verringert.

Was sind Focustraps und wie helfen Sie bei der Barrierefreiheit?

Heutzutage bestehen Websites allerdings aus hunderten von fokussierbaren Elementen. Manche dieser Elemente, wie zum Beispiel Kalender-Widgets und interaktive Formulare, sind sehr komplex. Eine Focustrap hilft Tastaturnutzer:innen, indem sie die Anzahl der per TAB selektierbaren Elemente einschränkt und den Tastaturfokus so in einem Bereich der Seite "gefangen hält."

Durch wiederholtes Drücken der Tab-Taste kann es sein, dass Nutzer:innen einen Seitenbereich aus Versehen verlässt. Besonders bei der Benutzung eines Screen-Readers kann das schnell zur Verwirrung sorgen, wenn nicht sofort ersichtlich ist, wie man in den vorherigen Bereich zurückkommt. Durch die Einschränkung des “tabbaren” Bereichs kann dieses Risiko verringert und so die Nutzung der Seite vereinfacht werden.

Erstellung einer Focustrap mit VueJS

Die Erstellung von Focustraps ist für komplexere Seiteninhalte also durchaus sinnvoll und mit VueJS auch sehr einfach. Wir erstellen im folgenden Beispiel mit VueJS und VueUse eine Focustrap. VueUse ist eine Sammlung praktischer VueJS Composables, die eine Vielzahl an Aufgaben in der Webentwicklung vereinfachen.

Für die Integration installieren wir In einem bestehenden VueJS-Projekt die VueUse-Abhängigkeiten über npm:

npm i @vueuse/core @vueuse/integrations focus-trap@^7

Die Verwendung in einer VueJS-Komponente benötigt dann nur noch wenige Zeilen:

<script setup>

import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';

import { ref } from 'vue';

const target = ref();

const { activate, deactivate } = useFocusTrap(target);

</script>

<template>

<button @click="activate()">Focustrap aktivieren</button>

<form ref="target">

<label for="email">E-Mail:</label>

<input type="email" id="email" name="email" />

<button type="submit">Absenden</button>

<button @click="deactivate()">Focustrap verlassen</button>

</form>

</template>

Über die target-Ref wird das Ziel der Focustrap angegeben, also das Element, in dem der Fokus gefangen werden soll. In diesem Fall ist das Zielelement ein <form>. Das Element wird an die useFocusTrap-Composable übergeben, welches activate- und deactivate-Methoden zurückgibt, über die die Focustrap aktiviert oder deaktiviert werden kann. Diese binden wir per @click an zwei Buttons in unserem Template. Und damit ist die Integration abgeschlossen.

Damit eine Focustrap aktiviert werden kann, müssen das Zielelement und die fokussierbaren Kindelemente im DOM vorhanden und fokussierbar sein. Das kann ein Problem sein, wenn die Sichtbarkeit des Elementes dynamisch ist, zum Beispiel durch v-if- oder v-show-Direktiven. In diesem Fall muss abgewartet werden, bis das Framework die Einblendung des Elementes abgeschlossen hat. Dafür kann in VueJS die nextTick-Methode verwendet werden. Wenn die Änderung der Sichtbarkeit des Zielelementes angepasst wird, startet VueJS einen neuen Render-Zyklus. Die nextTick-Methode gibt ein Promise zurück, welches aufgelöst wird, sobald der aktuelle Render-Zyklus und damit auch die Einblendung des Zielelementes abgeschlossen ist. Im Anschluss kann dann die Focustrap wie zuvor beschrieben aktiviert werden.

Fazit zu VueJS-Focustraps

Focustraps erleichtern die Nutzbarkeit einer Seite für Tastatur-Nutzer:innen erheblich, besonders wenn auf der Seite komplexere Elemente vorkommen. Sie stellen sicher, dass der Nutzer das aktuelle Element nicht aus Versehen verlässt. VueJS und VueUse ermöglichen die Einbindung einer Focustrap in wenigen Zeilen.

Wichtig ist bei der Implementation allerdings, dass die Nutzer:innen den gefangenen Fokus eigenständig wieder freigeben können und die Sichtbarkeit der Elemente beim Aktivieren der Focustrap berücksichtigt wird. Damit wird sichergestellt, dass User:innen einen barrierefreien Zugang zu Webanwendungen erhalten.