Entwicklung von Design-Systemen unter Berücksichtigung der Barrierefreiheit

Lasse deine Nutzer:innen nicht zurück - Lerne, wie man barrierefreie Benutzeroberflächen mit einem Design-System entwirft, das die Barrierefreiheit von Anfang an einbezieht und potenzielle Barrieren beseitigt.

Jairus Joer

Jairus Joer

Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:

DeepL Write
Wie wir maschinelles Lernen bei der Erstellung unserer Artikel einsetzen

Bei meinen Recherchen für das nächste Update von Aggregata bin ich erneut auf die Themen Design-Systeme und die Implementierung von Design-Token gestoßen. Falls du es verpasst hast, schau dir unseren letzten Artikel an: Warum wir Aggregata von Astro auf Ghost umziehen für unsere zukünftigen Veröffentlichungen.

Beim (erneuten) Lesen einiger beeindruckender Dokumentationen zu Design-Systemen von Unternehmen wie IBM, Nordhealth und Atlassian war ich fasziniert von ihrem Engagement für Barrierefreiheit und davon, wie sie es ihren Entwicklern ermöglichen, mit Hilfe von Design-Tokens barrierefreie und nahtlose Erfahrungen zu schaffen.

Deshalb werden wir uns heute mit der Schnittstelle von Design und Entwicklung beschäftigen und einen kleinen Prototyp eines Design-Systems mit Design-Token und barrierefreien Designfunktionen erstellen.

Aufbau einer barrierefreien Grundlage

Angenommen, das gewünschte Ergebnis ist eine ziemlich komplexe Webanwendung oder Website, dann möchtest du eine erweiterbare Grundlage schaffen, die schnelle Designaktualisierungen der Benutzeroberfläche ermöglicht, ohne dass eine größere Umgestaltung der Codebasis erforderlich ist.

Die Möglichkeit, Stile mit relativer Leichtigkeit zu aktualisieren, hinzuzufügen und zu entfernen, kann mit Design-Tokens erreicht werden. Du wirst Design-Token in Form von CSS-Variablen verwenden, um die Typografie und Farbe deiner Website im weiteren Verlauf zu verwalten.

Verwendung von Design-Token zur Verbesserung der Barrierefreiheit

Mit den CSS-Variablen als Grundlage kannst du damit beginnen, die Grundlage für die Design-Token zu schaffen, die du brauchst, um deine Anforderungen an die Benutzeroberfläche zu erfüllen. Auch wenn es verlockend ist, davon auszugehen, dass du Design-Token auf alle Parameter deines Designs anwenden kannst, solltest du später auf diesen Schritt zurückkommen.

Zunächst solltest du dich auf zwei Hauptmerkmale deines Designs konzentrieren: Typografie und Farbe. Beide spielen eine wichtige Rolle für das Erscheinungsbild deiner Website und sind die wahrscheinlichsten Kandidaten für Änderungen, wenn sich die Website weiterentwickelt.

Typografie

Halte es einfach. Definiere font-size: 100%; auf dem HTML-Root-Element und füge optional eine zweite Schriftgrößeneinstellung im body-Element hinzu, um die rem-Einheiten richtig zu verwenden. Die Verwendung anderer Einheiten als Prozentwerte führt zu Problemen bei der Skalierung und Lesbarkeit des Inhalts.

:root {
    font-size: 100%;
}

body {
    font-size: 1rem;
}

Von hier aus kannst du rem-Einheiten verwenden, um deinen Text innerhalb von Elementen richtig zu skalieren, oder du entscheidest dich für Fluid Typography, um deinen Text nahtlos an den Bildschirm anzupassen, auf dem er angezeigt wird. Tools wie das Fluid Typography Tool helfen dir, die richtige Schriftgröße für verschiedene Auflösungen zu berechnen.

:root {
    --text-small: 0.875rem;
    --text-p: 1rem;
    --text-h6: 1.25rem;
    --text-h5: 1.625rem;
    --text-h4: 2.125rem;
    --text-h3: 2.75rem;
    --text-h2: 3.5rem;
    --text-h1: 4.375rem;
}

body {
    font-size: var(--text-p, 1rem);
}

Wenn du mehr über barrierefreie Typografie im Web erfahren möchtest, empfehle ich dir, mit zwei aktuellen Artikeln über barrierefreie Typografie von Adrian Roselli und Mike Mai zu beginnen:

Berücksichtigung der Schriftartpräferenzen der Nutzer:innen

Die Zugänglichkeit von Text kann verbessert werden, indem die Schriftartpräferenzen der Nutzer:innen berücksichtigt werden. Während Überschriften und andere Markeninhalte aus Gründen der Markenkonsistenz in einer speziell ausgewählten Schriftart erscheinen können, ist es eine gute Idee, wichtige oder größere Textabschnitte in einer von Nutzer:innen ausgewählten Schriftart anzuzeigen.

:root {
	--font-sans: ui-sans-serif, system-ui, sans-serif;
}

body {
	font-family: var(--font-sans);
}

Ein zusätzlicher Vorteil der Auswahl von ui-sans-serif, system-ui oder sans-serif als Standard-Schriftfamilie ist, dass diese Änderung die anfängliche Übertragungsgröße der Website verringert, da die ausgewählte Schriftart garantiert auf dem Gerät der Nutzer:innen installiert ist.

Farbe

Farben können in ihren erforderlichen Definitionen für Seiten und Komponenten recht umfangreich sein. Aus diesem Grund verwendet dieser Prototyp die Konvention shadcn/ui, wenn es um Farb-Token geht, und verlässt sich auf die vordefinierten CSS-Farbpaletten von Tailwind.

Auch wenn die mitgelieferte Menge an Token recht kompakt ist, empfiehlt es sich, die Liste der verfügbaren Token bei der Entwicklung der Website zu erweitern. Für die Realisierung einer zufriedenstellenden Benutzeroberfläche ist die folgende Liste jedoch ausreichend.

:root {
    --background: #fafafa;
    --foreground: #09090b;

    --muted: #f4f4f5;
    --muted-foreground: #52525b;

    --card: var(--background);
    --card-foreground: var(--foreground);

    --popover: var(--background);
    --popover-foreground: var(--foreground);

    --border: #e4e4e7;

    --input: var(--border);

    --primary: var(--foreground);
    --primary-foreground: var(--background);

    --secondary: var(--muted);
    --secondary-foreground: var(--foreground);

    --accent: #4f46e5;
    --accent-foreground: var(--background);

    --destructive: #e11d48;
    --destructive-foreground: var(--background);

    --ring: var(--accent);

    --radius: 0.75rem;
}

Mit diesem Satz von Farb-Token möchtest du auch die Verwendung von Elevation in deiner Benutzeroberfläche begrenzen. Die Elevation selbst dient dazu, wichtige Informationen hervorzuheben, und sollte nicht übermäßig verwendet oder gestapelt werden.

Bevor du mit dem Theming unter Verwendung deiner definierten Farb-Token fortfährst, solltest du dir ansehen, wie du bestimmte Farb-Token als Referenz in Token wie --primary und --primary-foreground wiederverwendet hast, da du dein Theme auf diesem Ansatz aufbauen wirst.

Anpassungsfähige Farbthemen mit Media Queries

Media Queries wie prefers-color-scheme und prefers-contrast ermöglichen die Darstellung der Website in verschiedenen Farbschemata, wie z.B. im Dunkelmodus, und in verschiedenen Kontraststufen, um visuell eingeschränkten Nutzer:innen gerecht zu werden.

prefers-color-scheme erkennt das bevorzugte Theme der Nutzer:innen auf ihrem System und überschreibt die zuvor definierten Token mit angepassten Token für eine dunkle Darstellung der Website.

@media (prefers-color-scheme: dark) {
  --background: #09090b;
  --foreground: #fafafa;

  --muted: #18181b;
  --muted-foreground: #a1a1aa;

  --border: #27272a;

  --accent: #818cf8;

  --destructive: #fb7185;
}

Beachte, dass du nur die nicht referenzierten Werte neu definierst und nicht den gesamten Satz deiner Farbmusterstücke. Dies ist für den anfänglichen Satz von Farbmustern angemessen. Da die zuvor übergebenen Referenzwerte selbst Token sind, wirkt sich eine Änderung ihres Wertes auf alle Token aus, die auf diesen Wert verweisen.

prefers-contrast erkennt den bevorzugten Kontrast der Nutzer:innen auf ihrem System und überschreibt die zuvor definierten Token mit angepassten Token für eine kontrastreiche Darstellung deiner Website.

@media (prefers-contrast: more) {
	--muted: #e4e4e7;
	--muted-foreground: #3f3f46;

	--border: #a1a1aa;
}

Du kannst auch Media Queries verschachteln, um die Handhabung deines Themes zu vereinfachen. In diesem Fall werden die Optionen “Dunkler Modus” und “Hoher Kontrast” gepaart und dann abhängig von den Systemeinstellungen der Nutzer:innen außer Kraft gesetzt. Mit diesem Ansatz definierst du nur die Token neu, die du brauchst, und sparst dir das Refactoring.

@media (prefers-color-scheme: dark) {
	--background: #09090b;
	--foreground: #fafafa;

	--muted: #18181b;
	--muted-foreground: #a1a1aa;

	--border: #27272a;

	--accent: #818cf8;

	--destructive: #fb7185;

	@media (prefers-contrast: more) {
		--muted: #27272a;
		--muted-foreground:#d4d4d8;

		--border: #52525b;
	}
}

In dieser Demonstration wurden die Farbwerte vorab getestet, um die erwarteten Kontrastverhältnisse gemäß der WCAG-Norm zu erfüllen. Für die eigene Implementierung beachte bitte den WebAIM Contrast Checker für die richtige Verwendung von Farbe und Kontrast.

Implementierung von barrierefreien Design-Tokens

Wie du deine neuen Design-Token implementierst, hängt von vielen Faktoren ab und erfordert in der Regel Hilfsklassen und erste Einrichtungsschritte. Glücklicherweise sind der Verfügbarkeit von CSS-Frameworks keine Grenzen gesetzt, und du hast eine Fülle von Optionen, aus denen du wählen kannst:

  • Tailwind CSS bietet einen utilitaristischen Ansatz für jedes Design-System
  • Open Props bietet einen modular konfigurierbaren Satz von CSS-Variablen zur Auswahl
  • StyleX bietet die Erstellung optimierter Stile mit kollisionsfreiem atomarem CSS

In Awesome CSS Frameworks von troxler findest du weitere Optionen für CSS-Frameworks, oder du kannst deine eigene Strategie für die Implementierung von Design-Tokens definieren, die deinen speziellen Anforderungen entspricht.

Ein praktischerer Ansatz ist unsere Astro Boilerplate, die den demonstrierten Ansatz der Handhabung von Token in einem Design-System verwendet. In unserem Artikel Astro – Eine Einführung in dein nächstes Projekt skizzieren wir die Verwendung unseres Boilerplate-Projekts für dich.

Download Astro Boilerplate

Dokumentieren von Entscheidungen und Prozessen

Während das Design und die Entwicklung eines Design-Systems und seiner Token viel Vergnügen bereiten können, ist es wichtig, die Schritte zu dokumentieren, die unternommen wurden, um frühzeitig eine gemeinsame Basis für Entscheidungen und Prozesse zu finden.

Wenn eine Website oder ein Projekt wächst, wird die Dokumentation für neue Mitwirkende ebenso wichtig wie für die Beibehaltung oder Neubewertung aktueller Richtlinien, die in der Vergangenheit festgelegt wurden. Eine gut gepflegte Dokumentation sorgt dafür, dass Entscheidungen klar definiert und für alle zugänglich sind.

TL;DR

Entwickle barrierefreie Design-Systeme mit Design-Token für Farbe und Typografie. Biete Nutzer:innen einen dunklen Modus und Optionen mit hohem Kontrast an und verbessere die Lesbarkeit von Inhalten gemäß den etablierten Richtlinien für Barrierefreiheit im Internet.