Websites barrierefrei gestalten

Wenn Sie Websites erstellen, sollten Sie die folgenden Tipps beachten, um sie für alle besser lesbar zu machen, auch für Menschen mit Behinderungen.

Alternativen Text hinzufügen

Verwenden Sie für Bilder, Logos, Zeichnungen und andere Grafiken alternativen Text (Alt-Text). Ohne einen solchen alternativen Text hören Nutzer von Screenreadern nur das Wort „Bild“. Einige Bilder enthalten automatisch einen alternativen Text. Prüfen Sie in diesem Fall, ob Sie diesen übernehmen oder gegebenenfalls ändern möchten.

Alt-Text für eingefügte Bilder hinzufügen oder bearbeiten

1. Wählen Sie das Bild oder Logo aus.
2. Gehen Sie zu „Weitere Bearbeitungsoptionen“   Alt-Text hinzufügen.
3. Geben Sie im Feld „Beschreibung“ den Alt-Text ein.

Hintergrundbildern Alt-Text hinzufügen oder bearbeiten

1. Öffnen Sie auf dem Computer eine Website in Google Sites.
2. Sie können einem Hintergrundbild in folgenden Bereichen Alt-Text hinzufügen:
   • In der Kopfzeile der Website: Klicken Sie links unten im Titel auf „Bild“ .
   • In einem Abschnitt: Klicken Sie rechts auf „Farben für Abschnitte“   „Bild“ .
3. Klicken Sie auf Alt-Text.
4. Geben Sie den alternativen Text in das Beschreibungsfeld ein.

Benutzerdefiniertem Logo des Designs oder Bannerbildern Alt-Text hinzufügen oder bearbeiten

So fügen Sie neuen benutzerdefinierten Designs Alt-Text hinzu:

1. Öffnen Sie auf dem Computer eine Website in Google Sites.
2. Wählen Sie rechts den Bereich Designs aus.
3. Wählen Sie unter „Benutzerdefiniert“ die Option „Design erstellen“  aus.
4. Wenn Sie ein Logo oder Bannerbild hochladen möchten, klicken Sie auf „Bild hinzufügen“   Hochladen.
5. Wenn Sie Alt-Text hinzufügen möchten, klicken Sie auf das hochgeladene Bild  Alt-Text.

Benutzerdefinierten Kopfzeilen des Designs Alt-Text hinzufügen oder bearbeiten

1. Öffnen Sie auf dem Computer eine Website in Google Sites.
2. Wählen Sie rechts den Bereich Designs aus.
3. Wählen Sie rechts oben im benutzerdefinierten Design unter „Benutzerdefiniert“ das Dreipunkt-Menü   Bearbeiten aus.
4. Klicken Sie unter „Bilder“ auf das Kopfzeilenbild  Alt-Text.
5. Geben Sie den alternativen Text in das Beschreibungsfeld ein.

Weitere Informationen zu benutzerdefinierten Designs

Kontrast mit hoher Farbtiefe nutzen

Ein hoher Farbkontrast hilft Nutzern, Texte und Bilder leichter lesen bzw. verstehen zu können. In den Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 wird für großen Text ein Mindestverhältnis von 4,5 : 1 und für anderen Text und für Bilder ein Verhältnis von 7 : 1 empfohlen. Vermeiden Sie beispielsweise hellgrauen Text auf weißem Hintergrund.

Mithilfe der Chrome-Entwicklertools können Sie Vorschläge zur Erhöhung des Farbkontrastes aufrufen und sie auf Ihre Website anwenden.

Aussagekräftigen Linktext verwenden

Screenreader können in Texten nach Links suchen. Daher ist die Verwendung von aussagekräftigen Linktexten hilfreich. Verwenden Sie als Linktext am besten den Titel der verlinkten Seite. Der Linktext für einen Link auf Ihre Profilseite könnte z. B. „Mein Profil“ lauten. Weniger hilfreich wäre „Hier klicken“ oder die komplette URL.

Textgröße und -Ausrichtung überprüfen

Damit Ihre Website einfach zu lesen ist, sollten Sie nach Möglichkeit linksbündigen Text mit großer Schrift verwenden. Im Blocksatz ausgerichteter Text ist wegen des zusätzlichen Abstands zwischen den Wörtern schwerer lesbar.

Formatierung durch Text unterstützen

Es reicht nicht aus, wichtige Informationen nur durch eine visuelle Formatierung hervorzuheben. Formatierungsänderungen wie Fettdruck oder Hervorhebungen werden von Screenreadern möglicherweise nicht angekündigt. Daher sollten Sie beispielsweise wichtigen Textstellen den Hinweis „Wichtig“ hinzufügen.

Nummerierte Listen und Aufzählungslisten verwenden

Google Docs und Google Präsentationen sind bei einigen Listen in der Lage, diese zu erkennen und automatisch so zu formatieren, dass sie barrierefrei sind. Wenn Sie z. B. in Ihrem Dokument eine neue Zeile beginnen, indem Sie eine 1 gefolgt von einem Punkt eingeben, wird diese Zeile automatisch zum ersten Eintrag einer nummerierten Liste. Hier erfahren Sie, wie Sie nummerierte Listen und Aufzählungslisten formatieren.