Drupal Accessibility Checker
Prüfen Sie die Ausgabe, nicht den Editor
Views-Links, Medienfeld, Theme-Farben: drei Stellen in der Drupal-Ausgabe.
Prüfen nach dem Rendern
Wo Drupal-Befunde entstehen – und wo Sie sie beheben
Ein Checker sieht die fertige Seite. Diese Karte führt jeden sichtbaren Befund zurück zu Views, Medienfeld oder Theme – und trennt Inhaltsprüfung von Technikprüfung.
Views
bestimmt Linktext und Reihenfolge im Teaser
Medienfeld
liefert Bild, Alternativtext und Abmessungen
Twig + Theme
setzt Semantik, Fokus und Farbkontrast
Theme-Prüfpunkt Text, Hintergrund, Fokus und Tastaturzustände.
Konzeptansicht – kein aktueller Drupal- oder Editoria11y-Screenshot.
Editoria11y: Inhalt
- fehlende oder fragliche Alternativtexte
- allgemeine oder leere Linktexte
- Überschriften, Tabellen und redaktionelle Hinweise
Die Kernprüfungen laufen auf der gerenderten Seite im Browser.
Ergänzen: Technik
- Farbkontrast und sichtbarer Tastaturfokus
- Dialoge, Menüs und Zustände nach Interaktion
- Tastatur- und Screenreader-Test mit Urteil
Kontrast- und Entwicklerprüfungen führt Editoria11y im CSA-Zusatzmodul; alternativ nutzen Sie Scanner plus manuelle Tests.
Der schnelle Befundweg
„Weiterlesen“ führt meist zum Views-Feld. Ein fehlendes alt führt zum Bildfeld am Medium oder Inhalt. Kontrast, Fokus und HTML-Struktur führen zum Theme. So landet ein Bericht direkt bei der zuständigen Person.
Editoria11y in Drupal 10.3 oder 11 einrichten
composer require 'drupal/editoria11y:^3.0'
drush en editoria11y -y
drush pm:list --filter=editoria11y- 1
Unter
/admin/people/permissionserhält die Redaktionsrolle die Berechtigung „View Editoria11y Checker“. - 2
Sie öffnen angemeldet zentrale Seiten sowie mindestens ein Beispiel jedes Inhaltstyps. So sieht der Checker die tatsächlich gerenderte Ausgabe.
- 3
Unter
/admin/reports/editoria11ybündeln Sie die gespeicherten Seitenbefunde. Für den zentralen Bericht braucht die Rolle die passende Berichtsberechtigung.
Für älteren Drupal-Core wählen Sie auf der Projektseite die dort ausgewiesene kompatible Modulversion. Die 3.x-Linie verlangt laut Projektseite Drupal 10.3 oder 11.
Drei Reparaturorte, drei Gegenproben
- Views Link nennt sein Ziel
- Feld öffnen → „Rewrite Results“ → Titel-Token aus „Replacement Patterns“ wählen. Danach die Linkliste prüfen.
- Media Bild hat eine Textalternative
- Bildfeld und konkretes Medium prüfen. Inhalt tragend: präzises
alt; rein dekorativ: leeresalt="". - Theme Zustand bleibt erkennbar
- CSS und Twig an der ausgegebenen Komponente korrigieren. Danach Kontrast messen und den gesamten Weg mit Tastatur bedienen.
Aus dem Prüfbericht
Drei Befunde in der Drupal-Ausgabe
Kritisch „Weiterlesen“ auf jeder Teaser-Karte Regel link-name
Das Views-Feld schreibt in jeden Link denselben Text. Der Titel des Beitrags gehört in den Linktext, damit der Link sein Ziel nennt.
Kritisch Bilder aus dem Medienfeld ohne alt Regel image-alt
Ein img ohne alt-Attribut wird als Dateiname vorgelesen. Tragen Sie den Alternativtext im Medienfeld ein; für reine Dekoration bleibt alt leer.
Kritisch Der Hinweistext des Themes ist zu blass Regel color-contrast
Graue Schrift auf grauer Fläche erreicht 1,17:1. Das Farbtoken im Theme braucht für normalen Text mindestens 4,5:1.
Zum Mitnehmen
Die Drupal-Ausgabe, korrigiert
Zwei Änderungen im Template, eine im Theme-Stil.
Korrektur in 3 Schritten ansehen
Den Titel in den Views-Link schreiben
Im Views-Feld ersetzen Sie den festen Text durch den Titel des Beitrags. Der Link nennt dann sein Ziel auch außerhalb der Karte.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/beitrag/12">Weiterlesen</a>Nachher
<a href="/beitrag/12">Imkerkurs im Mai lesen</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jede Karte nennt dort ihren eigenen Titel.
Dem Bild im Medienfeld ein alt geben
Jedes img braucht ein alt-Attribut. Den Text tragen Sie im Medienfeld ein; reine Dekoration bekommt ein leeres alt.
KorrekturvergleichSchritt 2 · HTML Vorher
<img src="/sites/default/files/imkerin.jpg">Nachher
<img src="/sites/default/files/imkerin.jpg" alt="Imkerin hebt eine Wabe aus dem Bienenstock">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder im Browser aus. An jeder Stelle steht der Text statt eines Dateinamens.
Die Theme-Farbe des Hinweistexts aufhellen
Nur die Textfarbe ändert sich. Weiß erreicht auf dieser Fläche 5,31:1 und liegt damit über den geforderten 4,5:1.
KorrekturvergleichSchritt 3 · CSS Vorher
.node__meta { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.node__meta { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Geben Sie beide Farben in einen Kontrastrechner. Das Ergebnis liegt über 4,5:1.