Crashkurs digitale barrierefreiheit

33
Crashkurs Barrierefreiheit Domingos de Oliveira www.netz-barrierefrei.de Twitter @domingos2 BarCamp Bonn 2016

Transcript of Crashkurs digitale barrierefreiheit

Page 1: Crashkurs digitale barrierefreiheit

Crashkurs Barrierefreiheit Domingos de Oliveira

www.netz-barrierefrei.deTwitter @domingos2 BarCamp Bonn 2016

Page 2: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Überblick• Barrierefreiheit und

Behinderung• Texte• Bilder• Multimedia• Weitere Tipps

Die größten Barrieren und wie man sie beseitigt.

Page 3: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Wie viele Behinderte gibt es?

• Ca. 1,1 Millionen Sehbehinderte• Ca. 15 Mio. Schwerhörige und

Gehörlose• ca. 7,5 Mio. funktionale Analphabeten• Hohe Zahl von Menschen mit kognitiven

Einschränkungen (ADHS, Dyslexie, Legasthemie, dementielle Erkrankungen…) - damit einher gehen Gedächtnisprobleme, Konzentrations- und Lernprobleme, Unsicherheit bei Technik…

Page 4: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Barrierefreiheit?• Barrierefreiheit heißt Usability für die

größtmögliche Gruppe an Menschen. • Nicht jeder braucht Barrierefreiheit,

aber alle profitieren davon.

Page 5: Crashkurs digitale barrierefreiheit

Text

Lesbarkeit und Erkennbarkeit

Page 6: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Text – zu klein oder zu großDu siehst zwar, dass da Text steht, aber gut lesbar ist das nicht oder? Wäre doch wesentlich einfacher, wenn der Text ein wenig größer wäre.

Da ist es doch wesentlich leichter, großen Text zu lesen. Leider machen sich viele Nutzer nicht die Mühe, die Textgröße anzupassen.

• Zu kleiner Text ist schlecht lesbar.

• Zu großer Text kann für Sehbehinderte mit Gesichtsfeld-Ausfällen schwierig sein.

• Auf mobilen Geräten ist der Inhalt oft nicht erkennbar (mangelnde Responsivität).

• Der Text lässt sich nicht ausreichend vergrößern, um auf kleinen Displays noch gut lesbar zu sein.

• Alle Texte – auch in Bildern oder Buttons – sollten ausreichend groß sein, um z.B. auf einem kleinen Smartphone noch gut lesbar zu sein.

Page 7: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Textfluss"Für 10 Prozent der Bevölkerung ist Barrierefreiheit absolut unentbehrlich -für 30-40 Prozent ist sie notwendig -und für 100 Prozent der Gesellschaft ist eine barrierefreie Umgebung komfortabel und ein Qualitätsmerkmal"

 "Für 10 Prozent der Bevölkerung ist Barrierefreiheit absolut unentbehrlich -  für 30-40 Prozent ist sie notwendig -  und für 100 Prozent der Gesellschaft ist eine barrierefreie Umgebung komfortabel und ein Qualitätsmerkmal"

• Blocksatz erschwert die Orintierung in lngen Texten.

• Optimal ist der linksbündige Flattersatz, die ungleichen Zeilenlängen erleichtern das Auffinden verlorener Stellen.

Page 8: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Exotische SchriftenWas zur Hölle steht hier geschrieben?

Was zur Hölle steht hier geschrieben?

• Serifenschriften und exotische Schriften verschlechtern die Lesbarkeit.

• Verwenden Sie durchgängig eine gut lesbare Schrift wie Arial, Calibri und Ähnliches.

• Ihr könnt auch Schriftarten verwenden, die diesen Schriften ähnlich sind.

Page 9: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Zu geringer Kontrast"Für 10 Prozent der Bevölkerung ist Barrierefreiheit absolut unentbehrlich -  für 30-40 Prozent ist sie notwendig - und für 100 Prozent der Gesellschaft ist eine barrierefreie Umgebung komfortabel und ein Qualitätsmerkmal.“

• Die Schriftfarbe bietet nicht ausreichend Kontrast zum Hintergrund.

• Störend sind auch Hintergrund-Effekte wie Farbverläufe und Hintergrundbilder.

Page 10: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Störende Effekte• Störend sind zum

Beispiel Schrifteffekte wie Lauf- und Blinkschrift oder diagonal oder horizontal verlaufender Text

• Störend sind auch dynamische Elemente wie endlos flackernde Flash- und GIF-Animationen, Bewegung auf dem Screen zieht das Auge automatisch an und stört so die Konzentration.

Page 11: Crashkurs digitale barrierefreiheit

Text

Verständlichkeit

Page 12: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

TextlängeSoziale Barrierefreiheit – wir schaffen das!31. Januar 2016Barrierefreiheit & ZugänglichkeitUnd wieder geht ein langer Tag mit einem Open Transfer Camp Inklusion zu Ende. Es lohnt sich immer wieder, an dieser Veranstaltung teilzunehmen. An dieser Stelle ein herzlicher Dank an das Orga-Team der Stiftung Bürgermut, das wie immer einen tollen Job gemacht hat.Meine Session war wie immer fantastisch besucht – aber Scherz beiseite, ich hoffe, ich habe ein paar Leute zur digitalen Barrierefreiheit bekehrt.Mein Ausflug nach München hat mich wieder mal an die Wichtigkeit sozialer Barrierefreiheit erinnert. Natürlich ist es wichtig, digitale Barrierefreiheit sicherzustellen. Es ist aber vielleicht noch wichtiger, soziale Barrierefreiheit zuschaffen. Was meine ich damit?Wenn ich in einer fremden Stadt unterwegs bin, nutze ich normalerweise Taxis – die Kosten kann ich zumeist meinem Auftraggeber aufs Auge drücken. Die Nutzung öffentlicher Verkehrsmittel ist für einen Blinden sehr stressig. Zunächst muss er überhaupt erst Mal den Haltepunkt finden, also den Busbahnhof oder die S-Bahn-Haltestelle. Dann muss er herausfinden, ob es die richtige Richtung ist. Eingestiegen ist es manchmal schwierig, die Durchsagen zu verstehen, ich behelfe mir dabei, vorher die Zahl der Haltestellen herauszufinden, die zwischen Abfahrt und Ziel liegen und ggf. nachzufragen.In München habe ich das anders gemacht. Ich habe ein Jahr dort gelebt und es erschien mir absurd, dort ein Taxi zu nehmen. Andererseits ist das schon wieder acht Jahre her und die Gegend, zu der es ging, habe ich nie bewusst betreten.Obwohl ich mich rudimentär auskannte, musste ich mich durchfragen: Durchfragen zur Straßenbahn-Haltestelle, durchfragen zum Hotel, Durchfragen zum Veranstaltungsort. Lustigerweise kannte ich am Ende als Blinder den Weg zum Veranstaltungsort besser als meine sehenden Kollegen.Nun muss man wissen, dass es für Blinde oft schwierig ist, nach Hilfe zu fragen. Erstmal müssen sie überhaupt einen Menschen erwischen, was in einer belebten Straße gar nicht einfach ist. Dann gibt es Leute, die keine Lust zu helfen haben.Nun gibt es Leute, die niemandem helfen würden und Leute, die keine Lust haben, Blinden zu helfen. Ich glaube aber, dass die Mehrheit der Leute durchaus bereit ist, anderen Menschen zu helfen. Sie würden gerne helfen, wissen aber nicht, was sie tun können bzw. wo die Person Probleme hat.Soziale Barrierefreiheit heißt, bei Nicht-Behinderten ein Bewusstsein dafür zu schaffen, wo es konkrete Barrieren gibt und was man tun kann, um sie zu beseitigen. Das gilt nicht nur für Nicht-Behinderte. Bei vielen Körperbehinderten herrscht Ahnungslosigkeit über die Bedürfnisse Sinnes- oder Lernbehinderter. Das mag auch umgekehrt so sein, das kann ich nicht einschätzen.Die Sensiblisierung für Barrieren ist ein wichtiges Thema, was auch in allen Sessions angeklungen ist, die ich besucht habe. Es gibt keinen Zauberweg für diese Aufgabe. Vor allem müssen Behinderte stärker in die Mitte der Gesellschaft und ein Stück Öffentlichkeitsarbeit in eigener Sache leisten.Wichtig ist außerdem, dass mehr Öffentlichkeitsarbeit dazu stattfindet. Ich habe mir einen Google Alert zum Thema Leichte Sprache gesetzt. Es gibt fast täglich Berichte in Lokalzeitunngen über Projekte oder Broschüren in Leichter Sprache. Im Fernsehen wird hingegen in Sendungen ohne expliziten Behinderungsbezug selten etwas über Behinderte berichtet, was über die übliche Opfer-Schematik hinausgeht. Auch die Öffentlich-Rechtlichen machen da keine gute Figur.Last not least muss man aus den Spezialveranstaltungen heraus und auf Veranstaltungen mit anderen Schwerpunkten gehen. Es gibt ja mittlerweile recht wenige Veranstaltungen mit dem Thema digitale Barrierefreiheit, von dem her haben die Experten mehr Zeit, auf Konferenzen ohne expliziten Behinderungsbezug zu gehen. es gibt z.B. unheimlich viele Konferenzen mit dem Thema Online-Marketing. Warum nicht einmal dort hingehen und den Personen mitteilen, wie schlecht zugänglich ihr Marketing für Sinnesbehinderte ist? Die Barrierefreiheits-Community könnte unheimlich viel zum Thema Usability oder Mensch-Maschine-Interaktion beitragen. Wir haben Sprachausgaben, Spracheingaben oder Eye-Tracking benutzt, lange bevor das iPhone das Licht der Welt erblickte.Ich will aber nicht verschweigen, dass es schon viele gute Ansätze gibt. OpenStreetMap versucht, barrierefreie Orte zu markieren, es gibt viele Behinderte, die in Schulen gehen, um Aufklärungsarbeit zu leisten. Oftmals kommt es nur darauf an, gute Aktionen weiter zu verbreiten und mehr Leute zu gewinnen, die dabei mitmachen.Last not least müssen wir bei allen Menschen das Bewusstsein dafür stärken, dass wir alle einmal auf Hilfe angewiesen sind – und das nichts Schlimmes daran ist, nach Hilfe zu fragen oder sie anzunehmen. Ich höre immer wieder, wie Blinde Hilfeangebote relativ schroff abgewiesen haben oder das ein Hilfeangebot als tödliche Beleidigung aufgefasst wurde. Das ist in gewisser Weise verständlich, aber auch schizophren. Man beschwert sich, wenn man ungefragt Hilfe bekommt , dann beschwert man sich, wenn mankeine Hilfe angeboten bekommt. Blinde müssen lernen, Hilfe richtig zu erbitten und auch richtig abzulehnen. Es kommt darauf an, konkrete Fragen zu stellen, freundlich zu sein und nicht die Hilflosigkeit in Person zu spielen, denn zu komplexe Anforderungen überfordern die Leute oftmals. Und man sollte nicht beleidigt sein, wenn die Hilfe nicht oder nicht in der Form kommt, wie man sie gerne hätte. Die Leute sind nicht dazu da, uns von A nach B zu bringen, damit müssen wir leben lernen.

• Unnötig lange und schlecht strukturierte Texte überfordern Lese-Unerfahrene und führen zu Leseabbrüchen.

• Ein Text hat dann die optimale Länge wenn ihr nichts mehr wegkürzen könnt, ohne den Informationsgehalt zu verringern.

Page 13: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Text – visuelle Struktur • Unredigierte Texte weisen zu lange

Sätze, Absätze und eine schlechte Informationsstruktur auf.

• Es fehlen Überschriften und in Listen strukturierte Informationen.

Page 14: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Text – informationelle Struktur

• Ein Gedanke pro Satz, ein Gedankengang pro Absatz

• Texte sauber strukturieren – first things first, das Wichtige an den Anfang stellen (siehe journalistische W-Fragen)

• Zwischenüberschriften, Listen und andere Hilfen verwenden, um den Text visuell zu strukturieren

• Bei umfangreichen Texten Inhaltsverzeichnisse wie bei der Wikipedia anlegen

Page 15: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Text – sprachliche Verständlichkeit

• Fachbegriffe vermeiden oder erklären, evtl. nötiges Vorwissen verlinken

• Texte und Absätze kurz halten• Gedanken strukturieren und für den Leser

Unwichtiges weglassen, auch wenn es dir weh tut.

Page 16: Crashkurs digitale barrierefreiheit

Multimedia

Page 17: Crashkurs digitale barrierefreiheit

Bilder - Aufnahmequalität • Unscharfe Bilder sind

auf für Sehbehinderte schlecht erkennbar

• Sieht man ohnehin unscharf, wird das durch unscharfe Bilder leider nicht ausgeglichen.

• Bilder sollten von Anfang an gut aufgenommen bzw. entsprechend ausgewählt werden.#bcbn16 @domingos2

Page 18: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Bilder - unübersichtlich• Bilder mit zu

vielen Elementen oder unklarem Fokus können die Erkennbarkeit für Sehbehinderte verschlechtern.

• Für Sehbehinderte ist es schwer, größere Flächen auf einen Blick zu erfassen.

Page 19: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Bilder auswählen • Die Bilder vernünftig zuschneiden bzw. so

auswählen, dass das Bildobjekt gut zu erkennen und vom Hintergrund zu unterscheiden ist.

• Einen klaren Fokus auf das Bildobjekt legen.

• einfache Bilder mit wenigen Elementen bevorzugen

• kontraststarke vor kontrastarmen Bildern bevorzugen

Page 20: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Bilder beschreiben• Blinde und stark

Sehbehinderte brauchen eine Beschreibung des Bildes.

• Mit den meisten Redaktionssystemen kann man den Alternativtext sowie Titel und Bildbeschreibung angeben.

• -> Beispiel: Die Grafik zeigt zwei Hullkurven sowie Icons zur Audiobearbeitung.

Page 21: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Bildbeschreibungen• Der Alternativtext wird Blinden vorgelesen.• Der Titel erscheint, wenn man mit der

Maus über das Bild fährt.Die Bildunterschrift ist für alle lesbar und wird zumeist direkt unter dem Bild angezeigt.

• Die Bildbeschreibung sollte dem Nicht-Sehenden vermitteln, was auf dem Bild zu sehen ist: „Der Eifelturm bei Nacht“, „Hans-Dieter bohrt in der Nase“ – auf Details muss man nur eingehen, wenn sie im konkreten Zusammenhang wichtig sind.

Page 22: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Audio/Video· Unzureichende

Soundqualität erschwert die Verständlichkeit für Schwerhörige/in lauten Umgebungen.

· Zu schwach oder stark ausgeleuchtete sowie verwackelte Videos erschweren die Erkennbarkeit.

· Flackern, plötzliche Lautstärkeänderungen usw. stören Autisten.

· Text in Videos wird von Blinden nicht wahrgenommen und ist für Sehbehinderte schlecht lesbar.

Page 23: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Ausreichende Aufnahmequalität

• Die Aufnahmequalität sollte ausreichend sein, damit das Video auch auf einem Smartphone noch gut erkenn- und anhörbar ist. Verlasst euch nicht zu sehr auf die Nachbearbeitung.

• Vermeidet unnötige Effekte und Störungen bei der Aufnahme.

• Beseitigt soweit möglich Störungen in der Nachbearbeitung. Alle Textinhalte sollten auch auditiv ausgegeben werden.

• Untertitel für Gehörlose und Audiokommentare für Blinde sorgen für eine breitere Zielgruppe eurer Videos.

Page 24: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Untertitel• Für Schwerhörige

und Gehörlose sollten Untertitel eingebaut werden,

• YouTube erlaubt die Erstellung von Untertiteln direkt im Video-Editor.

Page 25: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Audiodeskription• Die Audiodeskription

ist eine Beschreibung des visuellen Filminhalts für Blinde, die Inhalte werden von einer Stimme auf dem Off beschrieben.

• Das ist vor allem nötig für Inhalte mit geringem Sprachanteil. Ist das nicht möglich, solltet ihr wichtige Bereiche des Filmes verbal beschreiben.

Page 26: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Audio - Texttranskript• Für Gehörlose und Eilige sollten

Audios in Text transkribiert werden, z.B. mit Unterstützung einer Sprachumwandlungs-Software.

• Das Textranskript ist eine vollständige Verschriftlichung des Audio-Inhalts.

Page 27: Crashkurs digitale barrierefreiheit

Testen

Page 28: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Automatisch• Es gibt verschiedene

automatische Testtolls im Internet, z.B. Wave von WebAIM.

• Die Tests richten sich vor allem an Entwickler und setzen teils viel Kenntnis voraus, für Laien liefern sie erste Anhaltspunkte.

• Nur ein Teil der Anforderungen kann durch automatische Tests überprüft werden. Der Test erkennt zum Beispiel, ob ein Alternativtext eingefügt wurde, aber nicht, ob dieser sinnvoll ist.

• Der AccessMonitor erleichtert die Fehlersuche in Wordpress.

Page 29: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Händisch testen• Es gibt diverse

Testverfahren, die mit moderaten Technikkenntnissen durchgeführt werden können.

• Dazu gehört der BITV-Test.

Page 30: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Tests mit lebenden Objekten

• Ihr könnt natürlich auch versuchen, echte Personen für eure Tests zu gewinnen.

• Sie schauen sich die Inhalte natürlich aus ihrer persönlichen Perspektive an, können aber wertvolle Verbesserungshinweise liefern.

• Überlegt euch, ob und was ihr den Testern im Gegenzug anbieten könnt.

Page 31: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Allgemeine Tipps• klare visuelle Achsen

schaffen Übersichtlichkeit für Sehbehinderte

• Weniger schadet nie, vollgeladene Webseiten sind out und erhöhen die Wahrscheinlichkeit, dass eines derElemente nicht barrierefrei ist

• CAPTCHAs sind so gut wie nie. Sie überfordern auch viele Behinderte (Beispiel Amazon, eBay…). barrierefrei.

• Dynamische und interaktive Bereiche sind besonders problemanfällig und sollten besonders geprüft werden.

Page 32: Crashkurs digitale barrierefreiheit

#bcbn16 @domingos2

Die Systemwahl• Die großen Open-Source-

Redaktionssysteme wie Wordpress, Drupal und Joomla! Sind sowohl im Frontend als auch im Backend relativ barrierefrei und nehmen einem daher viel Arbeit ab. Ählniches gilt für große Frameworks wie Jquery.

• Im Zweifelsfall achten große internationale Player eher auf Barrierefreiheit als Systeme mit geringer Verbreitung oder mit kommerziellem Hintergrund.

• Ausnahmen bestätigen die Regel – daher im Vorfeld recherchieren. Wer keine Infos zur Barrierefreiheit seines Systems bereit hält, hat sich sehr wahrscheinlich auch nicht mit dieser Frage beschäftigt.

Page 33: Crashkurs digitale barrierefreiheit

Danke

Fragen?!