Barrierefreies Webdesign
Wie du deine Webseite mit Tastatur bedienbar machst
Ich muss sagen, dass ich vor dem Thema „Barrierefreies Webdesign“ oder neudeutsch „WebAccessibility“ unglaublichen Respekt habe. Es ist nicht nur komplex, sondern auch kompliziert und vor allem: sehr umfangreich.
Deshalb bleibt mir als Einzelunternehmerin nichts anderes übrig, als einen sehr pragmatischen Ansatz gemäß dem Pareto-Prinzip zu verfolgen und dieser lautet:
Mach deine Webseite mit möglichst einfachen Mitteln
so barrierefrei wie möglich.
Was ist mit „Barrierefreiheit“ gemeint?
Konkret geht es um eine vereinfachte Bedienung und um die Zugänglichkeit zu Texten, Bildern, Formularen, etc. auf verschiedene Arten, d.h. über mehr als einen sensorischen Kanal. Informationen müssen also z.B. schriftlich und über Sprachausgabe zur Verfügung gestellte werden.
Wem bringt das was?
Barrierefreiheit bringt eigentlich uns allen etwas, denn es macht Produkte, Webseiten, uvm. verständlicher und besser bedienbar.
Die Zielgruppen sind u.a.
- Sehbehinderte & Blinde
- Hörbeeinträchtigte
- Menschen mit motorischen Einschränkungen (z.B. auch Verletzungen)
- kognitiv Beeinträchtigte
- ältere Menschen
- etc.
Wenn du also deine Webseite so gestaltest, dass die obigen Zielgruppen nicht ausgeschlossen werden, dann hast du damit auch deine Kundenbasis erweitert.
Folgende Themen sind u.a. wichtig:
- Kontrast der verwendeten Farben
- ausreichend große Schriftgrößen (vor allem auch auf der mobilen Version)
- ausreichend große Schaltflächen (vor allem auch auf der mobilen Version)
- Alternative Texte für Bilder
- Titel für Links & Buttons
- Barrierefreie Formulare
- Sinnvolle Fehlermeldungen
- Einfache Texte die Fachbegriffe vermeiden und/oder diese erklären
- ordentliche HTML Struktur bei den Überschriften
- Tastaturnavigation, d.h. Bedienbarkeit ohne Maus
- etc.
Barrierefreiheit bedeutet natürlich noch viel mehr. Hier kannst du dich umfassend informieren: https://www.sozialministerium.at/Themen/Soziales/Menschen-mit-Behinderungen/Barrierefreiheit.html
Barrierefreiheit zahlt sich auch für SEO aus
Wenn du dir die Mühe machst, deine Webseite etwas barrierefreier zu gestalten, dann hast du einen weiteren Benefit:
Du zahlst damit auch auf dein SEO-Konto ein, denn viele Optimierungen bringen dich in beiden Disziplinen voran. Wenn man will, kann man es auch so sehen: Google ist ja nichts anderes als ein „blinder“ User – ident mit jenen, die einen Screenreader benutzen und die Webseite nur „vorlesend“ erfassen.
Mach dich also daran, deine Überschriften-Struktur, deine Bildtitel uvm. zu optimieren. Wenn du dabei Hilfe brauchst, stehe ich dir gerne mit Rat und Tat zur Seite!
Ist deine Webseite ohne Maus bedienbar?
Mach den Test:
Rufe deine Webseite auf, leg die Maus zur Seite und navigiere durch deine Webseite NUR mit der Tastatur – konkret mit der Tabulatortaste. Siehst du, welcher Link aktiv ist?
Wenn ja: Alles bestens, du bist hier fertig.
Wenn nein, dann „kann“ deine Webseite das noch nicht. Aber man kann es ihr lernen, und zwar mit einem relativ simplen CSS-Code-Schnipsel.
Du kannst diesen im Theme-Customizer unter „zusätzliches CSS“ einfach reinkopieren. Und danach wiederholst du den Test.
Eine Anmerkung: Wenn du Submenüs verwendest, dann kann es sein, dass diese nicht angesprochen werden. Wenn du Hilfe brauchst, melde dich gerne bei mir.
Hier ist der Code:
CSS
a:focus,
button:focus {
outline: 2px solid rgba(0, 0, 0, 0.6)!important;
outline-offset: 3px;
}
/*Die folgenden Code-Zeilen sind nur für Divi-User relevant*/
#main-header #et-top-navigation nav>ul>li>a {
padding-bottom: 0;
}
#main-header #et-top-navigation nav>ul>li {
padding-bottom: 33px;
}
SEO selber machen
Du möchtest besser bei Google gefunden werden, möchtest aber kein Geld für teure Werbeanzeigen ausgeben und dein SEO lieber selber machen?
Dann ist mein neuer Selbstlernkurs „SEO verstehen & umsetzen“ genau das Richtige für dich.
Du kannst ihn mit oder ohne persönliche Unterstützung durch mich buchen.
Hi, ich bin Astrid.
Ich bin spezialisiert auf WordPress und Divi und helfe dir, die DSGVO mit Hausverstand umzusetzen.
Melde dich zum Newsletter an!
Melde dich zu meinem Newsletter an, wenn du in puncto WordPress, Content, Technik und Datenschutz informiert bleiben möchtest.
