Barrieren im digitalen Raum<\/h2>\n\n\n\n
Menschen mit Behinderungen treffen auf unterschiedliche Barrieren:<\/p>\n\n\n\n
- Visuelle Barrieren:
- keine Alternativen f\u00fcr Informationen, die visuell vermittelt werden, z.B. Inhalt von Grafiken, Video-Tutorials<\/li><\/ul>
- schlechte Farbkontraste<\/li><\/ul><\/li>
- Auditive Barrieren:
- keine Alternativen f\u00fcr gesprochene Informationen, z.B. Testimonials als mp3-Dateien, Podcasts<\/li><\/ul>
- (zu) komplexe Sprache: Geb\u00e4rdensprache als Muttersprache vieler geh\u00f6rloser Menschen funktioniert ganz anders als Laut- und Schriftsprache. Diese ist deshalb eine schwierige Fremdsprache f\u00fcr viele Geh\u00f6rlose.<\/li><\/ul><\/li>
- Motorische Barrieren:
- schlechte Tastaturbedienbarkeit, z.B. Buttons oder Navigationen, die ausschliesslich mithilfe einer Maus bedient werden k\u00f6nnen. Nicht alle Nutzenden k\u00f6nnen eine Maus bedienen (Amputationen, Erkrankungen, L\u00e4hmungen, Tremor, etc.) oder den Cursor wahrnehmen (blind, stark sehbehindert). Sehr viele assistierende Technologien und Werkzeuge nutzen die Tastaturschnittstelle. Ist die Tastaturbedienbarkeit sichergestellt, funktionieren auch sie.<\/li><\/ul><\/li>
- Kognitive und neurologische Barrieren
- sich bewegende Objekte, z.B. News-Ticker, Animationen in Endlosschlaufe<\/li><\/ul>
- Komplexit\u00e4t in Sprache und Struktur<\/li><\/ul><\/li><\/ul>\n\n\n\n
Digitale Angebote sind immer ein Zusammenspiel von Design, Programmierung und Webredaktion. Alle drei Partner tragen ihren Teil dazu bei, Barrieren abzubauen bzw. sie gar nicht erst entstehen zu lassen. Ein paar Beispiele dazu:<\/p>\n\n\n\n
- Im Design<\/strong> gilt es z.B. auf Mindestkontrastanforderungen zu achten, so dass auch Menschen mit Farbenfehlsichtigkeit (\u00abfarbenblind\u00bb) alle Inhalte wahrnehmen k\u00f6nnen. Ausserdem wird sichergestellt, dass keine Informationen nur \u00fcber Farbe vermittelt werden.<\/li>
- In der Programmierung<\/strong> ist z.B. die Bedienbarkeit interaktiver Elemente wichtig, so dass Schalter (Buttons), Dropdowns, Filter, etc. auch mithilfe der eigenen Tastatur \u2013 ohne Maus \u2013 verwendet werden k\u00f6nnen. Ausserdem wird sichergestellt, dass Screenreader-User alle Informationen erhalten, die auch sehenden Menschen zur Verf\u00fcgung stehen.<\/li>
- Webredaktorinnen und Webredaktoren<\/strong> k\u00fcmmern sich um die Barrierefreiheit des Contents: Sie setzen z.B. \u00dcberschriften korrekt, erfassen Alternativtexte f\u00fcr Bilder, bieten Videos seh- und h\u00f6rbehindertengerecht an, stellen sicher, dass Podcasts auch als Transkript vorhanden sind, usw.<\/li><\/ul>\n\n\n\n
Goldene Regeln f\u00fcr mehr Accessibility<\/h2>\n\n\n\n
Sobald wir uns die folgenden Regeln zu Herzen nehmen, k\u00f6nnen wir alle zu mehr Barrierefreiheit im digitalen Raum beitragen.<\/p>\n\n\n\n
- \u00dcberschriften: Formatiere \u00dcberschriften als \u00dcberschriften<\/li>
- Listen: Formatiere Listen als Listen<\/li>
- Links: Schreib selbstsprechende Links (\u00abWeiter zum Login\u00bb statt \u00abWeiter\u00bb, \u00abMehr zum Studiengang Geb\u00e4rdendolmetschen\u00bb statt \u00abMehr dazu\u00bb)<\/li>
- Bilder: Beurteile deine Grafiken: dekorativ oder sinntragend?
- dekorativ: Markiere sie als \u00abdekorativ\u00bb<\/li><\/ul>
- sinntragend: Erstelle einen Alternativtext, der die Essenz der Grafik \u00e4quivalent wiedergibt<\/li><\/ul><\/li>
- Farbe: Stell sicher, dass die Kontraste ausreichen. Vermittle nichts nur durch Farbe<\/li>
- Tastaturbedienbarkeit: Stell die Tastaturbedienbarkeit sicher.<\/li>
- Fokussichtbarkeit: Stell die Fokussichtbarkeit sicher.<\/li><\/ul>\n\n\n\n
Wer diese sieben Merkpunkte bereits verinnerlicht hat, wagt sich an die folgenden:<\/p>\n\n\n\n
- Informative Texte: Schreib verst\u00e4ndlich und informativ (Fehlermeldungen, Labels, Anweisungen, Informationen)<\/li>
- Seitentitel: Stelle sicher, dass jede Webseite einen informativen, einzigartigen Titel tr\u00e4gt. Diese Information ist die erste, die an Screenreader \u00fcbermittelt wird. Der sog. Page title enth\u00e4lt auch die Information \u00fcber die Seitenbetreiberin (in unserem Fall die ETH).<\/li>
- Leerzeilen: Vermeide Leerzeilen (nutze stattdessen die Abstandsformatierungen)<\/li>
- Tabellen: Gib Tabellen eine Kopfzeile (besser zwei) und nutze Tabellen nicht zum Layouten<\/li>
- Generell:
- Achte auf logisch korrekte Reihenfolgen und Hierarchien<\/li><\/ul>
- Mach so klar wie m\u00f6glich, welche Eingaben von den Nutzerinnen und Nutzern erwartet werden.<\/li><\/ul>
- Setze klare Labels und Anweisungen, welche immer sichtbar bleiben.<\/li><\/ul>
- Erkl\u00e4re das Problem bei Fehleingaben und warne vor wichtigen Aktionen.<\/li><\/ul><\/li><\/ul>\n\n\n\n
Allen, die mehr \u00fcber das Thema erfahren m\u00f6chten, sei als Einstieg der Kurs Digitale Barrierefreiheit<\/a> empfohlen sowie die folgenden Webseiten:<\/p>\n\n\n\n
- Erkl\u00e4re das Problem bei Fehleingaben und warne vor wichtigen Aktionen.<\/li><\/ul><\/li><\/ul>\n\n\n\n
- Setze klare Labels und Anweisungen, welche immer sichtbar bleiben.<\/li><\/ul>
- Mach so klar wie m\u00f6glich, welche Eingaben von den Nutzerinnen und Nutzern erwartet werden.<\/li><\/ul>
- Achte auf logisch korrekte Reihenfolgen und Hierarchien<\/li><\/ul>
- dekorativ: Markiere sie als \u00abdekorativ\u00bb<\/li><\/ul>
- In der Programmierung<\/strong> ist z.B. die Bedienbarkeit interaktiver Elemente wichtig, so dass Schalter (Buttons), Dropdowns, Filter, etc. auch mithilfe der eigenen Tastatur \u2013 ohne Maus \u2013 verwendet werden k\u00f6nnen. Ausserdem wird sichergestellt, dass Screenreader-User alle Informationen erhalten, die auch sehenden Menschen zur Verf\u00fcgung stehen.<\/li>
- Im Design<\/strong> gilt es z.B. auf Mindestkontrastanforderungen zu achten, so dass auch Menschen mit Farbenfehlsichtigkeit (\u00abfarbenblind\u00bb) alle Inhalte wahrnehmen k\u00f6nnen. Ausserdem wird sichergestellt, dass keine Informationen nur \u00fcber Farbe vermittelt werden.<\/li>
- Komplexit\u00e4t in Sprache und Struktur<\/li><\/ul><\/li><\/ul>\n\n\n\n
- sich bewegende Objekte, z.B. News-Ticker, Animationen in Endlosschlaufe<\/li><\/ul>
- keine Alternativen f\u00fcr gesprochene Informationen, z.B. Testimonials als mp3-Dateien, Podcasts<\/li><\/ul>
- keine Alternativen f\u00fcr Informationen, die visuell vermittelt werden, z.B. Inhalt von Grafiken, Video-Tutorials<\/li><\/ul>
![\"Manu](\"https:\/\/blogs.ethz.ch\/id\/files\/2022\/03\/nl_id_img_272_460.jpg\")
<\/a>