Wie stelle ich meine Website auf barrierefrei um?
Barrierefreiheit entsteht in der Vorlage, die Aufbau und Aussehen jeder Seite bestimmt, in den Erweiterungen wie Formular, Galerie oder Shop und in dem, was Ihre Redaktion jeden Tag einstellt. Das CMS, also das Programm, mit dem Sie Ihre Seiten pflegen, liefert dafür die Werkzeuge. Ob Ihre Website die Anforderungen erfüllt, hängt davon ab, was darauf läuft. Hier steht, was die Hersteller verbreiteter Systeme selbst zusagen und welcher Teil bei Ihnen bleibt. Als Ziel nehmen Sie WCAG 2.2 auf der Stufe AA.
Vorlage, Erweiterungen und Redaktion bestimmen das Ergebnis
Die Vorlage, bei WordPress und Shopify Theme genannt, bei TYPO3 Sitepackage, legt fest, wie Menü, Überschriften, Farben und der sichtbare Fokus aussehen. Erweiterungen bringen eigenes HTML mit, das die Vorlage nicht prüft: ein Kontaktformular, ein Cookie-Banner, eine Bildergalerie. Und jede Seite, die Ihre Redaktion anlegt, braucht Alternativtexte, eine geordnete Überschriftenfolge und Linktexte, die für sich verständlich sind.
WordPress verlangt WCAG 2.2 AA vom eigenen Code und von Themes eine Grundprüfung
Nach den Programmierregeln von WordPress soll Code im WordPress-Umfeld, darunter der Kern und die offiziellen Plugins, WCAG 2.2 auf der Stufe AA erfüllen. Themes im offiziellen Verzeichnis können das Kennzeichen „accessibility-ready“ bekommen. Dafür prüft ein Mensch unter anderem einen Sprunglink zum Inhalt, die Bedienung per Tastatur, den Kontrast, die Überschriftenfolge, beschriftete Formularfelder und Alternativtexte. WordPress schreibt selbst dazu, dass „ready“ nicht heißt, dass das Theme die WCAG auf Stufe AA erfüllt. Plugins und Seitenbaukästen, die Sie dazu installieren, gehören nicht zu dieser Prüfung.
Drupal, TYPO3 und Joomla machen Zusagen für Kern, Standardvorlage und Erweiterungen
Drupal nennt für seinen Kern WCAG 2.2 auf der Stufe AA als Ziel und Olivero als Vorlage für öffentliche Seiten. Bei TYPO3 hat das Testzentrum BIK das Bootstrap Package an zehn Seiten der Demo-Installation gegen WCAG 2.1 und EN 301 549 geprüft; die Nachricht von TYPO3 dazu hält fest, dass die Redaktion die Inhalte jeden Tag barrierefrei halten muss. Das Joomla-Handbuch verlangt von Erweiterungen WCAG 2.2 AA. Läuft Ihre Website mit einer eigens gebauten Vorlage, gilt für sie keine dieser Zusagen; sie wird für sich geprüft.
Shopify verlangt von Themes einen Lighthouse-Wert ab 90, Wix prüft im Editor
Ein Theme im Shopify Theme Store braucht für Barrierefreiheit im Schnitt aus Startseite, Kollektionsseite und Produktseite einen Lighthouse-Wert von mindestens 90, am Desktop und am Telefon. Dazu verlangt Shopify ein alt-Attribut an jedem Bild und für Fließtext ein Kontrastverhältnis von 4,5:1. Lighthouse ist ein automatischer Test von Google; Prüfungen, die ein Mensch erledigen muss, zählen laut Google nicht in den Wert. Wix bietet im Editor den Accessibility Wizard, der die Website durchsucht und Funde auflistet. Daneben zeigt er Aufgaben, die er selbst nicht erkennen kann; die prüfen Sie von Hand.
Ihre Redaktion hält jede neue Seite auf dem Stand der Vorlage
Den Alternativtext für ein Produktfoto schreibt die Person, die es hochlädt: er sagt, was auf dem Bild für den Inhalt wichtig ist. Überschriften folgen der Gliederung des Textes, gewählt nach Ebene statt nach Schriftgröße. Ein Link sagt, wohin er führt. Videos bekommen Untertitel, Tonaufnahmen eine Abschrift. Text steht als Text auf der Seite, damit Vorleseprogramme und Vergrößerung ihn erreichen. PDF-Dateien zum Herunterladen brauchen dieselbe Sorgfalt wie die Seite selbst.
So gehen Sie es an
- Fragen Sie Ihre Agentur, mit welcher Vorlage und welchen Erweiterungen Ihre Website läuft und ob die Vorlage gegen WCAG 2.2 AA geprüft ist. Lassen Sie sich den Prüfbericht zeigen.
- Bedienen Sie Menü, Kontaktformular und Cookie-Banner einmal nur mit der Tabulatortaste. Wo der Fokus verschwindet oder hängen bleibt, notieren Sie die Stelle für Ihre Agentur.
- Machen Sie den Alternativtext in Ihrer Redaktion zur Pflicht, bevor ein Bild veröffentlicht wird.
- Lassen Sie die Website nach einem Wechsel der Vorlage oder einem großen Update neu prüfen.
Tipps aus der Praxis
- Bei einem Relaunch lassen Sie die Vorlage prüfen, bevor die Inhalte umziehen: ein Fehler in der Vorlage steckt danach in jeder Seite.
- Ein Seitenbaukasten innerhalb des CMS erzeugt eigenes HTML. Prüfen Sie seine Ausgabe gesondert, auch wenn das Theme geprüft ist.
- Lesen Sie die Seite Ihres Anbieters zur Barrierefreiheit: was er zusagt und was er ausdrücklich Ihnen überlässt.
Weiter im Prüfbereich Barrierefreiheit
- Warum braucht jedes Bild auf der Website einen Alternativtext?Alternativtexte machen Bilder für blinde Menschen und für die Google-Bildersuche lesbar. Fehlt das alt-Attribut, bleibt das Bild für beide unsichtbar.
- Welche Alternative brauchen reine Audio- und Videodateien auf der Website?Reine Audiodateien brauchen eine Textabschrift, stumme Videos eine Beschreibung. So erreicht der Inhalt auch Menschen, die schlecht hören oder sehen.
- Warum brauchen Videos auf der Website Untertitel?Untertitel machen Videos für gehörlose Menschen verständlich und für alle, die ohne Ton schauen. Unsere Prüfung testet, ob die Untertitel-Datei echt ist.
- Was ist eine Audiodeskription und wann braucht mein Video eine?Eine Audiodeskription beschreibt in Sprechpausen, was im Video zu sehen ist. Sie ist nötig, wenn wichtige Bildinhalte nicht im Ton vorkommen.
Dieser Artikel gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
