Barrierefreiheit
Diese Seite richtet sich an Entwickler, die dafür verantwortlich sind, dass eine Website für alle nutzbar ist, einschließlich Menschen, die einen Screenreader, eine Tastatur, hohe Vergrößerung oder hohen Kontrast verwenden. Auf einer Exponential-Website hängt die Barrierefreiheit vor allem von Ihrem Design und Ihren Templates ab und zum Teil vom Inhaltsmodell, das gute Praxis für Redakteure zum Standard machen kann.
Inhalt
- Wo das Produkt steht
- Was das Inhaltsmodell tun kann
- Templates und Designs
- Formulare
- Testen
- Redakteure
- Checkliste
Wo das Produkt steht
Die eigene Einschätzung des Projekts steht in Standards zur Barrierefreiheit: Gegenüber WCAG 2.2 Stufe AA und WAI-ARIA 1.2 erfüllt das Produkt die Anforderungen teilweise: Die Administration admin4 wurde nach AA-Kriterien gebaut und getestet, die klassische Administration teilweise korrigiert, und die öffentlichen Designs und der Online Editor sind nicht geprüft. EN 301 549 und Section 508 sind nicht verifiziert. Für eine öffentliche Website bedeutet das: Ihr Design ist das, was ein Audit beurteilt; planen Sie es in Ihren eigenen Templates ein und testen Sie es selbst.
Was das Inhaltsmodell tun kann
| Entscheidung | Wirkung |
|---|---|
| Bildattribute mit Alternativtext ist erforderlich | Redakteure können kein Bild ohne Text speichern (Bilder und Bildvarianten) |
| Verknüpfte oder eingebettete Bildobjekte statt Bilder in vielen Feldern | ein Alternativtext, an einer Stelle aktuell gehalten |
| Rich Text statt vieler kleiner Felder | echte Überschriften, Listen und Tabellen statt optischer Nachahmungen (Rich Text) |
| Ein kleiner Satz eigener Tags mit barrierefreien Templates | Infokästen, Zitate und Handlungsaufrufe überall mit korrektem Markup |
Ein Attribut title für das <h1> der Seite | eine Überschrift je Seite aus den Inhalten |
| Eine Sprache je Übersetzung | das Pagelayout kann das Attribut lang der Seite aus der Inhaltssprache setzen (Übersetzungen und Sprachen) |
Templates und Designs
Die Hilfe für Designer behandelt jedes Thema mit Beispielen:
| Thema | Seite |
|---|---|
| Die Grundlagen für ein Theme | Grundlagen der Barrierefreiheit für Themes |
| Landmarks und Überschriften | Landmarks und Überschriften |
| Sprunglinks | Sprunglinks |
| Tastatur und Fokus | Tastatur und Fokus |
| Farbkontrast | Farbkontrast |
| Reduzierte Bewegung | Reduzierte Bewegung |
| Sprachen mit Schreibrichtung von rechts nach links | Designs für Rechts-nach-links |
Regeln, die für jedes Exponential-Design gelten: CSS in Stylesheets mit Tokens und einem Wert für den Dunkelmodus je Farb-Token, kein Inline-CSS, kein Inline-JavaScript (Kein Inline-CSS). Auch Blöcke von Layouts sind Templates: Prüfen Sie ihr Markup wie jedes andere (Layout-Blöcke gestalten).
Formulare
Die mitgelieferten Collect- und Benutzer-Templates geben Eingabefelder ohne IDs aus; geben Sie Ihren Kopien IDs, damit
Beschriftungen funktionieren, zeigen Sie Prüfmeldungen neben dem Feld und als Text, und verwenden Sie autocomplete in
Anmelde- und Registrierungsformularen (Barrierefreie Formulare,
Templates für Benutzer und Anmeldung,
Formulare und Informationssammlung).
Testen
- Nur Tastatur: Jeder Link, jedes Menü, jedes Formular und jeder Dialog ist erreichbar und bedienbar, der Fokus ist immer sichtbar.
- Zoom: Bei 200 % und bei geringer Breite überlappt nichts und nichts scrollt seitlich (Testen bei Zoomstufen).
- Kontrast: Text mindestens 4,5:1, im hellen und im dunklen Modus.
- Ein Screenreader auf den wichtigsten Templates: Startseite, eine Liste, eine Full View, ein Formular, Suche.
- Automatische Prüfungen helfen, fehlende Beschriftungen und Alternativtexte zu finden; sie ersetzen die manuellen Tests nicht.
- Ihre eigenen Prüfungen am Design: Checkliste: Barrierefreiheit.
Redakteure
Barrierefreie Templates können trotzdem nicht barrierefreie Inhalte erhalten. Weisen Sie Redakteure in Alternativtexte, aussagekräftige Linktexte, die Reihenfolge der Überschriften in Rich Text und Untertitel für Videos ein. Der Kurs für Redakteure enthält das Material (Editors 101); Trainer, die Barrierefreiheit unterrichten, finden es in Train the Trainer, Modul 5.
Checkliste
- To do: Bildattribute verlangen einen Alternativtext; dekorative Bilder haben im Template ein leeres
alt. - To do: Ein
<h1>je Seite, Überschriften in Reihenfolge, Landmarks vorhanden, ein Sprunglink zuerst. - To do: Jedes Formularfeld hat eine Beschriftung; Fehler werden als Text angekündigt.
- To do: Tastatur, Zoom und Kontrast auf den wichtigsten Templates im hellen und dunklen Modus getestet.
- To do: Das
langjeder Seite entspricht ihrer Inhaltssprache. - To do: Redakteure eingewiesen.
Verwandte Seiten
- Standards zur Barrierefreiheit
- Checkliste für den Projektstart
- Designer: hier beginnen
- Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.
Werden Sie Exponential-Partner
Partner teilen ihre Informationen, stellen Mittel bereit, geben Beiträge zurück und entwickeln die Produkte mit uns, und so wächst Exponential. Eine Partner-Website und ein Dashboard sind für Mitte 2027 geplant: Werden Sie noch heute Partner, damit wir schneller wachsen und neue Funktionen früher liefern.