Barrierefreie Inhalte gestalten

Gut zugängliche Inhalte haben eine klare Reihenfolge. Überschriften zeigen die Gliederung, Alternativtexte vermitteln den Zweck von Bildern und Links benennen ihr Ziel. Die Redaktion kann vieles davon direkt beim Bearbeiten der Seite festlegen.

Für: Redaktion · Version: ConcreteCMS 9.5.7

Inhalte in eine sinnvolle Reihenfolge bringen

Bestimmen Sie vor dem Bearbeiten, welche Information zuerst benötigt wird. Stellen Sie diese Information an den Anfang. Ordnen Sie die folgenden Blöcke so an, dass Text, Bilder und Handlungsaufforderungen auch ohne ihre räumliche Anordnung verständlich bleiben.

Verweisen Sie nicht nur auf „den blauen Kasten rechts“. Auf einem schmalen Bildschirm kann er unter dem Text stehen. Benennen Sie den Abschnitt und setzen Sie bei Bedarf einen internen Link. Wie Sie Blöcke verschieben, beschreibt Blöcke hinzufügen und anordnen.

Überschriften auszeichnen

Öffnen Sie die Seite als angemeldeter Benutzer mit Bearbeitungsrecht im Bearbeitungsmodus. Bearbeiten Sie den betreffenden Inhalt-Block. Markieren Sie die Zeile und wählen Sie im Editor unter Format die passende Überschrift.

Der Seitentitel ist auf dieser Website bereits die Hauptüberschrift. Beginnen Sie im Artikeltext deshalb gewöhnlich mit Überschrift 2. Verwenden Sie Überschrift 3 für einen untergeordneten Abschnitt. Wählen Sie die Ebene nach der Gliederung und nicht nach der Schriftgröße. Fett formatierter Fließtext ist keine Überschrift.

Formatmenü im Inhaltseditor mit Überschrift 2, 3 und 4

Abbildung 1: Das Formatmenü des Editors bietet Überschrift 2, 3 und 4 für die Gliederung des Inhalts.

Lesen Sie nach dem Speichern nur die Überschriften. Die Abfolge soll die Aufgabe der Seite erkennen lassen. „Anreise mit öffentlichen Verkehrsmitteln“ beschreibt einen Abschnitt genauer als „Weitere Informationen“.

Formulieren Sie Links so, dass ihr Ziel auch außerhalb des Satzes erkennbar ist. „Teilnahmebedingungen herunterladen (PDF)“ ist verständlicher als „Hier klicken“. Prüfen Sie bei verlinkten Bildern und Symbolen, ob ihr zugänglicher Name das Ziel oder die Aktion benennt. Interne Links setzen Sie über die native Seitenauswahl; Texte gliedern und interne Links setzen zeigt die Bedienung.

Wählen Sie im Editor die Listenfunktion für Aufzählungen und Abläufe. Eingetippte Bindestriche und Leerzeichen erzeugen keine verlässliche Listenstruktur. Vermitteln Sie Warnungen auch im Text; Farbe allein genügt nicht. Ob Fokusmarkierung und Kontrast des Themes ausreichen, muss die technische Prüfung klären.

Bilder nach ihrem Zweck beschreiben

Öffnen Sie als angemeldeter Benutzer mit Bearbeitungsrecht den betreffenden Bild-Block. Tragen Sie unter Alternativtext ein, welche Information das Bild an dieser Stelle vermittelt. Das Feld Titel ersetzt den Alternativtext nicht.

  • Ein Informationsbild benötigt einen Alternativtext mit seiner relevanten Aussage.
  • Ein rein dekoratives Bild kann einen leeren Alternativtext haben.
  • Eine komplexe Grafik benötigt zusätzlich eine ausführlichere Beschreibung im umgebenden Text oder eine geeignete Datendarstellung.

Beginnen Sie nicht automatisch mit „Bild von …“. Bei einem Screenshot benennen Sie die entscheidende Einstellung. Die Handlungsschritte müssen trotzdem im Text stehen.

Bilddialog mit getrennten Feldern für Alternativtext und Titel

Abbildung 2: Der Bilddialog bietet für die konkrete Verwendung ein eigenes Feld Alternativtext; das Feld Titel ist davon getrennt.

Wenn das Bild zugleich ein Link ist, muss seine Bezeichnung auch den Linkzweck vermitteln. Ein Dateiname reicht dafür nicht. Die Auswahl und Verlinkung erklärt Bilder und Downloads einfügen.

Datentabellen mit Kopfzeilen anlegen

Verwenden Sie Tabellen für zusammengehörende Daten, etwa Wochentage und Öffnungszeiten. Ordnen Sie Bild und Text mit den vorgesehenen Bereichen oder Containern an. Leere Tabellenzellen als Layoutmittel erschweren die Lesereihenfolge und die Darstellung auf kleinen Bildschirmen.

  1. Öffnen Sie die Seite als angemeldeter Benutzer mit Bearbeitungsrecht im Bearbeitungsmodus und bearbeiten Sie den Inhalt-Block.
  2. Klicken Sie im Editor auf Tabelle. Im Dialog Tabellen-Eigenschaften tragen Sie die benötigte Zahl von Zeilen und Spalten ein.
  3. Wählen Sie unter Kopfzeile für eine Tabelle mit Spaltenbezeichnungen Erste Zeile.
  4. Tragen Sie unter Überschrift bei Bedarf einen kurzen Titel ein, zum Beispiel „Öffnungszeiten im Überblick“.
  5. Bestätigen Sie mit OK und tragen Sie die Daten in die Zellen ein.

Vermeiden Sie unnötig feste Breiten und komplex verbundene Zellen.

Tabellen-Eigenschaften mit Kopfzeile Erste Zeile und Tabellenüberschrift

Abbildung 3: Im Dialog Tabellen-Eigenschaften legt „Erste Zeile“ die Spaltenüberschriften fest; das Feld „Überschrift“ benennt die Tabelle.

Ordnen Sie nach dem Befüllen jede Angabe einer verständlichen Kopfzeile zu. Lassen Sie Tabellen mit mehreren Überschriftenebenen oder verbundenen Zellen gesondert auf ihre Struktur kontrollieren.

Formulare, Videos und Dokumente einbeziehen

Beschriften Sie jedes Formularfeld sichtbar und eindeutig. Ein Platzhalter im leeren Feld ersetzt die Beschriftung nicht. Kennzeichnen Sie Pflichtangaben verständlich. Fehlermeldungen sollen das betroffene Feld und die nötige Korrektur benennen. Testen Sie das Formular mit der Tastatur und senden Sie es einmal mit leeren Pflichtfeldern ab. Ein Formular erstellen und Anfragen bearbeiten erklärt die Einrichtung.

Planen Sie für Videos verständliche Untertitel und die zum Inhalt passenden weiteren Alternativen. Wichtige Angaben dürfen nicht ausschließlich in einem unbeschrifteten Video oder Bild stehen. Ein Download braucht einen aussagekräftigen Link und ein zugängliches Dokument. Prüfen Sie bei PDFs insbesondere Textauswahl, Dokumentstruktur und Lesereihenfolge mit geeigneten Werkzeugen. Die Dateiverwaltung organisiert Dateien, macht deren Inhalt aber nicht automatisch barrierefrei.

Die veröffentlichte Seite kontrollieren

Rufen Sie die veröffentlichte Seite ohne Anmeldung auf. Gehen Sie den wichtigsten Nutzungsweg in dieser Reihenfolge durch:

  1. Lesen Sie Seitentitel und Zwischenüberschriften. Die Gliederung muss den Inhalt verständlich ordnen.
  2. Gehen Sie mit Tab und Umschalt+Tab durch Links und Bedienelemente. Kontrollieren Sie die sichtbare Fokusmarkierung, die Reihenfolge und die Bedienung ohne Maus.
  3. Vergrößern Sie die Ansicht und öffnen Sie die Seite auf einem schmalen Bildschirm. Texte und Bedienelemente müssen erreichbar bleiben.
  4. Öffnen Sie interne Links und Downloads. Kontrollieren Sie Ziel, Inhalt und Rückweg.
  5. Kontrollieren Sie Alternativtexte, Tabellenköpfe und Fehlermeldungen. Beziehen Sie bei Bedarf Screenreader-Nutzer in die Beurteilung ein.

Die Grenzen redaktioneller Kontrollen beachten

Diese Kontrollen finden typische Hindernisse, ersetzen aber keine vollständige Prüfung nach WCAG 2.2 AA. Probleme können im Theme, in einem Blocktyp oder in einem eingebundenen Dienst liegen. Halten Sie bei einem Hindernis fest, welches Element betroffen ist, was Sie erwartet haben und wie sich der Fehler wiederholen lässt. Die Administration oder Entwicklung kann den technischen Teil daraufhin gezielt bearbeiten.

Weiterlesen

Quelle: Concrete CMS Dokumentation (EN) · Stand: ConcreteCMS 9.5.7