Hilfe-CenterDigitale Barrierefreiheit
Ein Überblick über die Zugänglichkeit von Blöcken auf Tilda Websites und die Funktionen innerhalb der Blöcke zur Verbesserung der Zugänglichkeit
Die meisten Blöcke in der Blockbibliothek von Tilda sind bereits für die Nutzung durch Menschen mit ständigen, vorübergehenden oder situationsbedingten Behinderungen optimiert. In diesem Artikel erläutern wir, welche Möglichkeiten es gibt und welche Einstellungen Sie eventuell vornehmen sollten, um die Barrierefreiheit Ihrer Website zu verbessern.
Eine kurze Checkliste zur Verbesserung der Zugänglichkeit von Websites
- 1Prüfen Sie, ob SEO-Titel für Überschriftenblöcke gesetzt sind
- 2Legen Sie Alt-Texte für Bilder fest und stellen Sie sicher, dass diese den Inhalt des Bildes erkennen lassen.
- 3Prüfen Sie, ob sich die Menüblöcke auf der Kopfseite und die Fußzeile auf der Fußzeilenseite befinden
- 4Prüfen Sie in den Inhaltseinstellungen für die Blöcke mit Online-Formularen, ob jedes Feld eine Feldüberschrift hat und ob die Erfolgsmeldung nach dem Absenden des Formulars angegeben ist
- 5Überprüfen Sie den Kontrast der Schriftarten auf der Website und stellen Sie sicher, dass die Texte nicht vor einem Hintergrund mit ähnlicher Farbe oder Bildsprache stehen, der die Lesbarkeit beeinträchtigt.
- 6Prüfen Sie, ob die Projektsprache in den Site-Einstellungen → Mehr eingestellt ist.
- 7Prüfen Sie die Zugänglichkeitsrichtlinien für Elemente in Zero Block
Bildschirmleser-Optimierung
Ein Bildschirmlesegerät ist eine Software, die das, was auf dem Bildschirm angezeigt wird, vorliest. Häufig sind Bildschirmlesegeräte bereits vorinstalliert und werden über die Einstellungen für Barrierefreiheit im Betriebssystem verwendet.
Tilda Blöcke sind entweder automatisch für die Verwendung mit Bildschirmlesegeräten optimiert oder enthalten die notwendigen Einstellungen, um Inhalte so zu markieren, dass sie vom Bildschirmlesegerät korrekt wiedergegeben werden.
Tilda Blöcke sind entweder automatisch für die Verwendung mit Bildschirmlesegeräten optimiert oder enthalten die notwendigen Einstellungen, um Inhalte so zu markieren, dass sie vom Bildschirmlesegerät korrekt wiedergegeben werden.
H1-H6 Titeltags
Wenn der Inhalt der Website eine klare Struktur hat, können Sie H1-, H2und H3-Tags für Überschriften setzen. Überschriften auf verschiedenen Ebenen helfen dem Bildschirmleser, die Struktur der Seite besser zu interpretieren und mit der Tastatur zwischen den Inhalten zu wechseln.
Sie können H1-H3-Tags in den Einstellungen eines jeden Blocks setzen, der einen Titel unter "SEO: Title Tag". In anderen Blöcken, z. B. in Zwischenüberschriften für Karten, können Sie Überschriften anderer Ebenen bis zu H6 festlegen.
Sie können H1-H3-Tags in den Einstellungen eines jeden Blocks setzen, der einen Titel unter "SEO: Title Tag". In anderen Blöcken, z. B. in Zwischenüberschriften für Karten, können Sie Überschriften anderer Ebenen bis zu H6 festlegen.
Wichtig! Auf jeder Seite darf nur ein einziger H1-Tag stehen. Sie können eine beliebige Anzahl von Tags anderer Ebenen verwenden, solange die Hierarchie eingehalten wird (z. B. keine H2-Titel innerhalb von H3).
Alternativer Text (Alt) für Bilder
Der Alternativtext für Bilder ist für Bildschirmlesegeräte lesbar, so dass es sich lohnt, ihn so einzustellen, dass sehbehinderte Menschen verstehen können, worum es in dem Bild geht. Der Alternativtext wird auch bei anderen Einschränkungen der Zugänglichkeit angezeigt, z. B. bei langsamen Verbindungen.
Um den Alternativtext für ein Bild einzustellen, öffnen Sie die Registerkarte "Inhalt" des Blocks und klicken Sie auf die drei Punkte neben dem hochgeladenen Bild.
Um den Alternativtext für ein Bild einzustellen, öffnen Sie die Registerkarte "Inhalt" des Blocks und klicken Sie auf die drei Punkte neben dem hochgeladenen Bild.
Wenn das Bild nur dekorativ ist, z. B. als Hintergrund für ein Element auf der Seite, braucht es möglicherweise keinen alternativen Text, berücksichtigen Sie dies.
Um ein Alt-Tag für Bilder in Blöcken aus der Kategorie "Galerie" hinzuzufügen, öffnen Sie die Registerkarte "Inhalt" und klicken Sie auf "Text" neben dem hochgeladenen Bild. Geben Sie dann im Feld "Image alt for SEO" die Bildbeschreibung an.
So geben Sie den Alt-Text für ein Bild auf der Registerkarte Inhalt eines Blocks an Tilda
Um die Zugänglichkeit zu verbessern, sollte der alternative Text den Inhalt des Bildes genau wiedergeben und Besucher ansprechen, die das Bild aus dem einen oder anderen Grund nicht sehen können.
Nehmen wir dieses Foto als Beispiel:
Schlechte Beispiele für Alt-Texte:
"Hund"
"Pudel".
Ein gutes Beispiel für einen Alt-Text:
"Ein Pudelwelpe sitzt auf dem Gras im Hinterhof eines Backsteinhauses".
Schlechte Beispiele für Alt-Texte:
"Hund"
"Pudel".
Ein gutes Beispiel für einen Alt-Text:
"Ein Pudelwelpe sitzt auf dem Gras im Hinterhof eines Backsteinhauses".
Tipps für die Gestaltung von Fußzeilen und Kopfzeilen
Blöcke in der Kopf- und Fußzeile werden automatisch so gekennzeichnet, dass der Bildschirmleser erkennen kann, dass sich der Besucher gerade in einem solchen Block befindet. In der Kopfzeile können Sie beispielsweise das Lesen aller Menüpunkte überspringen und direkt zum Hauptinhalt der Seite übergehen.
Blöcke, die die Kopf- und Fußzeile enthalten, müssen sich zwangsläufig auf separaten Kopf- und Fußzeilenseiten befinden, um eine korrekte Markierung zu gewährleisten.
Blöcke, die die Kopf- und Fußzeile enthalten, müssen sich zwangsläufig auf separaten Kopf- und Fußzeilenseiten befinden, um eine korrekte Markierung zu gewährleisten.
Um sie richtig einzurichten, sehen Sie sich dieses Video-Tutorial an oder lesen Sie den Artikel Kopf- und Fußzeilen im Hilfe-Center.
Tipps zum Ausfüllen von Online-Formularen
Die meisten Eingabefelder in Blöcken aus der Kategorie "Formulare" sind für den Screenreader zugänglich. Erfolgs- oder Fehlermeldungen werden vom Bildschirmleser ausgegeben.
Achten Sie auch darauf, die Titel der Eingabefelder anzugeben, damit für jedes Feld klar ist, was genau eingegeben werden muss.
Achten Sie auch darauf, die Titel der Eingabefelder anzugeben, damit für jedes Feld klar ist, was genau eingegeben werden muss.
Wie Sie Formularfelder und Popup-Meldungen über das erfolgreiche Ausfüllen von Formularen anpassen können, erfahren Sie in unserem Video-Tutorial zur Einrichtung von Online-Formularen.
Tipps zu Kontrast und Schriftgröße
Ein ausreichender Schriftkontrast hilft den Besuchern, den Text auf der Website besser wahrzunehmen. Es ist nicht nur wichtig, die Kontrastrichtlinien zu befolgen, weil Sie möglicherweise sehbehinderte Besucher haben, sondern der richtige Kontrast verbessert die Benutzererfahrung im Allgemeinen.
Es gibt im Web einen Standard zur Bestimmung des Hintergrund- und Textkontrasts, der auf den WCAG (Web Content Accessibility Guidelines) basiert. Nach diesem Standard ist der Kontrast definiert als die Anzahl der Helligkeitsunterschiede zwischen der hellsten und der dunkelsten Farbe und wird als Verhältnis dieser Helligkeit angegeben: 3:1, 4.5:1, 10:1. Je niedriger der Wert ist, desto geringer ist der Kontrast (das maximale Kontrastverhältnis beträgt 21:1).
Um die Website für Sehbehinderte zugänglich zu machen, sollten Sie den Kontrast von Schriftarten erhöhen; einige spezifische Wertebereiche für Elemente sind unten beschrieben.
Sie können das Werkzeug für den Hintergrundkontrast und die Schriftfarbe verwenden, um den Kontrastwert abzuleiten und ihn mit den unten aufgeführten Werten zu vergleichen. Kopieren Sie dazu einfach die Hintergrund- und Farbwerte aus vorgefertigten Blöcken oder Zero Block, fügen Sie sie zu dem unten angegebenen Dienst hinzu und erhalten Sie das Kontrastverhältnis.
Es gibt im Web einen Standard zur Bestimmung des Hintergrund- und Textkontrasts, der auf den WCAG (Web Content Accessibility Guidelines) basiert. Nach diesem Standard ist der Kontrast definiert als die Anzahl der Helligkeitsunterschiede zwischen der hellsten und der dunkelsten Farbe und wird als Verhältnis dieser Helligkeit angegeben: 3:1, 4.5:1, 10:1. Je niedriger der Wert ist, desto geringer ist der Kontrast (das maximale Kontrastverhältnis beträgt 21:1).
Um die Website für Sehbehinderte zugänglich zu machen, sollten Sie den Kontrast von Schriftarten erhöhen; einige spezifische Wertebereiche für Elemente sind unten beschrieben.
Sie können das Werkzeug für den Hintergrundkontrast und die Schriftfarbe verwenden, um den Kontrastwert abzuleiten und ihn mit den unten aufgeführten Werten zu vergleichen. Kopieren Sie dazu einfach die Hintergrund- und Farbwerte aus vorgefertigten Blöcken oder Zero Block, fügen Sie sie zu dem unten angegebenen Dienst hinzu und erhalten Sie das Kontrastverhältnis.
Bei normalem Text beträgt der Mindestkontrast 4,5:1, damit der Text erkennbar ist. Werte von 7:1 und mehr bedeuten bereits, dass der Text einen erhöhten Kontrast aufweist (in den Standardkategorien - AAA).
Für größere Texte (wie Überschriften) beträgt der Mindestkontrastwert 3:1. Ab 4,5:1 gilt der Text als erhöht, d. h. für die Nutzung durch Menschen mit Sehbehinderungen geeignet.
Für Nicht-Text-Elemente (Schaltflächen, Navigationssteuerungen usw.) ist es notwendig und ausreichend, ein Kontrastverhältnis von mehr als 3:1 einzuhalten.
Für größere Texte (wie Überschriften) beträgt der Mindestkontrastwert 3:1. Ab 4,5:1 gilt der Text als erhöht, d. h. für die Nutzung durch Menschen mit Sehbehinderungen geeignet.
Für Nicht-Text-Elemente (Schaltflächen, Navigationssteuerungen usw.) ist es notwendig und ausreichend, ein Kontrastverhältnis von mehr als 3:1 einzuhalten.
Sie können auch den Online-Dienst Wave (Web Accessibility Evaluation Tools) verwenden, um den Kontrast und die Zugänglichkeit einer Seite zu prüfen. Er zeigt mögliche Probleme mit dem Kontrast und der Zugänglichkeit von Website-Elementen visuell auf. Allerdings können nicht alle Empfehlungen dieses Dienstes relevant und korrekt sein, insbesondere erfordern nicht alle Elemente möglicherweise alternativen Text.
Wie man die Sprache der Website festlegt
Um die Zugänglichkeit zu verbessern, sollten Sie die Sprache der Website unter Website-Einstellungen → Mehr angeben. Dadurch kann die Software von Drittanbietern besser mit der Website interagieren.
Navigieren zwischen Website-Blöcken mit der Tastatur
Bei einigen Arten von Einschränkungen ist es bequemer, die Tastatur zu benutzen, um durch den Inhalt der Website zu navigieren. Die Blöcke von Tilda wurden speziell zur Unterstützung der Tastaturnavigation entwickelt:
- Beim Navigieren mit der Tastatur gibt es einen farbigen Fokusrahmen, um zu erkennen, mit welchem Element gerade interagiert wird
- Blöcke mit Menüs, Untermenüs, Formularen, Kacheln, Videoplayern, Registerkarten, Schiebereglern werden automatisch beschriftet, so dass sie mit der Tastatur navigiert werden können
Zugänglichkeitstipps für Zero Block
Die Arbeiten an der Zugänglichkeit aller Elemente von Zero Block sind noch nicht abgeschlossen. Es ist jedoch wichtig, die unten beschriebenen allgemeinen Leitlinien zu befolgen.
Halten Sie die Ebenen in der richtigen Reihenfolge. Für Besucher, die über die Tastatur mit der Seite interagieren, ist die richtige Reihenfolge der Fokuspunkte wichtig.
Wenn Sie sich mit der Tabulatortaste durch die Elemente bewegen, werden die Elemente in der Reihenfolge ausgewählt, in der sie im Seitenlayout erscheinen. Um sicherzustellen, dass diese Reihenfolge korrekt ist, müssen Sie die Elemente in der richtigen Reihenfolge anordnen. Die Navigation erfolgt in der umgekehrten Reihenfolge, wie sie in den Ebenen angegeben ist, also vom letzten zum ersten Element.
Wenn Sie sich mit der Tabulatortaste durch die Elemente bewegen, werden die Elemente in der Reihenfolge ausgewählt, in der sie im Seitenlayout erscheinen. Um sicherzustellen, dass diese Reihenfolge korrekt ist, müssen Sie die Elemente in der richtigen Reihenfolge anordnen. Die Navigation erfolgt in der umgekehrten Reihenfolge, wie sie in den Ebenen angegeben ist, also vom letzten zum ersten Element.
Lassen Sie keine leeren Elemente übrig, vor allem wenn sie eine semantische Funktion haben, wie z. B. der H1-Tag. Fügen Sie Links, SEO-Tags und Text innerhalb von Elementen ein. Verwenden Sie für Bilder, die nicht dekorativ sind, einen alternativen Text (alt).
