Barrierefreiheit im Web. Humboldt-Universität zu Berlin Computer- und Medienservice Katrin Lányi

Transkript

1 Barrierefreiheit im Web Humboldt-Universität zu Berlin Computer- und Medienservice Katrin Lányi

2 Warum das Thema so wichtig ist Statistisch gesehen sind Menschen mit Behinderungen überdurchschnittlich häufig im Internet. Es ist für sie das Tor zur Welt. Was bei der Planung von Gebäuden zur Selbstverständlichkeit geworden ist der behindertengerechte Eingang muss auch aufs Web übertragen werden. Der Hürdenlauf im Internet umfasst schwer verständliche Inhalte kompliziert gestaltete Seiten schwer lesbare Formulare nicht zugängliche multimediale Inhalte zu geringe Kontraste zu kleine Buttons Browserunverträglichkeiten Geräteunverträglichkeiten

3 Begriffsdefinition Barrierefreiheit bezeichnet im deutschen Sprachgebrauch eine Gestaltung der Umwelt in der Weise, dass sie von Menschen mit Behinderung in derselben Weise genutzt werden kann wie von Menschen ohne Behinderung. Im außerdeutschen Sprachgebrauch wird dieser Zustand eher als Zugänglichkeit (engl.: Accessibility) bezeichnet. (Wikipedia) Barrierefreies Internet sind Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können. Barrierefreiheit schließt also sowohl Menschen mit und ohne Behinderungen als auch Benutzer mit technischen oder altersbedingten Einschränkungen sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen.

4 Rechtslage Gesetz zur Gleichstellung behinderter Menschen (Behindertengleichstellungsgesetz - BGG) vom : 3 Behinderung: Menschen sind behindert, wenn ihre körperliche Funktion, geistige Fähigkeit oder seelische Gesundheit mit hoher Wahrscheinlichkeit länger als sechs Monate von dem für das Lebensalter typischen Zustand abweichen und daher ihre Teilhabe am Leben in der Gesellschaft beeinträchtigt ist. 4 Barrierefreiheit: Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind. 11 Barrierefreie Informationstechnik: Träger öffentlicher Gewalt [ ] gestalten ihre Internetauftritte und -angebote sowie die von ihnen zur Verfügung gestellten grafischen Programmoberflächen, die mit Mitteln der Informationstechnik dargestellt werden [ ] technisch so, dass sie von behinderten Menschen grundsätzlich uneingeschränkt genutzt werden können. Dokument im Wortlaut: Gesetz zur Gleichstellung behinderter Menschen (PDF) An der HU gilt außerdem die Vereinbarung zur Integration schwerbehinderter Menschen in der Humboldt-Universität zu Berlin vom : 3 Beschäftigung und Förderung schwerbehinderter Menschen: (5) Die HU wirkt darauf hin, den Zugang zu Informationen so zu gestalten, dass er keine Benachteiligung für schwerbehinderte Menschen darstellt. Das betrifft insbesondere die Gestaltung von barrierefreien Webseiten. [ ] Weitere Grundlagen Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV 2.0) Verwaltungsvorschriften des Berliner Senats zur Schaffung Barrierefreier Informationstechnik (VVBIT) (PDF) vom Web Content Accessibility Guidelines (WCAG) des W3C

5 Web Content Accessibility Guidelines (WCAG) 2.0 Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 decken einen großen Bereich von Empfehlungen ab, um Webinhalte barrierefreier zu machen. Wenn Sie diesen Richtlinien folgen, dann werden Inhalte für eine größere Gruppe von Menschen mit Behinderungen barrierefrei sein. Dies beinhaltet Blindheit und Sehbehinderung, Gehörlosigkeit und nachlassendes Hörvermögen, Lernbehinderungen, kognitive Einschränkungen, eingeschränkte Bewegungsfähigkeit, Sprachbehinderungen, Photosensibilität und Kombinationen aus diesen Behinderungen. Darüber hinaus wird das Befolgen dieser Richtlinien Ihre Webinhalte in vielen Fällen für Nutzer im Allgemeinen benutzbarer machen. 1. Wahrnehmbar 1. Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Großschrift, Braille, Symbole oder einfachere Sprache. 2. Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung. 3. Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (zum Beispiel mit einfacherem Layout), ohne dass Informationen oder Strukturen verloren gehen. 4. Machen Sie es für den Benutzer leichter, Inhalte zu sehen und zu hören, einschließlich der Trennung zwischen Vordergrund und Hintergrund. 2. Bedienbar 1. Sorgen Sie dafür, dass alle Funktionalitäten von der Tastatur aus verfügbar sind. 2. Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen. 3. Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen. 4. Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden. 3. Verständlich 1. Machen Sie Textinhalte lesbar und verständlich. 2. Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren. 3. Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren. 4. Robust 1. Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.

6 BITV für Dummys 1. Behindertengerechte Alternativen für alle Audio-, Bild- und Video-Inhalte: alternative Texte für Skripte, Applets, Frames und Bilder und Grafiken - auch bei Platzhaltern, Gliederungspunkten und Zeichnungen Text-Alternativen zu Server-Side Image Maps zu Client-Side Image Maps Audio-Beschreibungen für Videoinformationen in Multimedia-Präsentationen; Untertitel für Videos 2. Für Fehlsichtige deutlich erkennbare Texte und Grafiken Unterscheidungen müssen auch ohne Farbe verständlich sein kontraststarke Bilder für Schwarzweiß-Bildschirme und farbfehlsichtige Besucher 3. Standardkonformer Einsatz von HTML und Style Sheets wo immer möglich, Informationen über Sprachsyntax darstellen statt Bildern validierbare Sprachsyntax einhalten optische Präsentation von Text und Bildern durch Style Sheets in Style Sheets relative statt absolute Einheiten verwenden Überschriften, Listen und Zitate strukturell gliedern 4. Abkürzungen und Sprachwechsel erkennbar machen Akronyme und Abkürzungen bei erstem Auftreten durch Syntax-Elemente aufschlüsseln Identifikation der vorherrschenden Sprache durch Syntax-Elemente 5. Tabellen mit Beschreibungen versehen und ausschließlich zur tabellarischen Darstellung verwenden Spalten- und Zeilenüberschriften kennzeichnen Gliederungsebenen (Überschriften, Datenzellen) als solche auszeichnen keine Text- und Bildgestaltung durch Tabellen kein Missbrauch von Strukturierungselementen zur visuellen Formatierung Zusammenfassungen bieten, Abkürzungen aufschlüsseln

7 BITV für Dummys 7. Internet-Angebote müssen unabhängig vom Browser nutzbar sein ungehinderte Darstellung ohne Style Sheets Seiten auch ohne Skripte, Applets oder andere Plug-ins nutzbar Skripte, Applets und andere Plug-in-Anwendungen unabhängig vom Eingabegerät nutzbar entweder ungehinderter Zugang auf dynamische Inhalte oder Bereitstellung von stets aktuellen statischen Alternativen 8. Nutzerkontrolle aller zeitgesteuerter Inhalte, konkret kein Bildschirmflackern oder blinkende Inhalte keine automatische Bewegung von Inhalten, andernfalls Bereitstellung von Kontrollmechanismen keine automatischen Aktualisierungen in festen Zeitabständen (Refresh u. Ä.) möglichst keine automatischen Weiterleitung auf andere Seiten 9. Behindertengerechter Zugriff auf alle Benutzerschnittstellen Skripte und Applets entweder direkt für Behinderte zugänglich oder zu Screen Readern kompatibel machen 1: Die Verordnung gilt für Angebote der Behörden der Bundesverwaltung 2: Einzubeziehende Gruppen behinderter Menschen Die Gestaltung der in 1 genannten Angebote der Informationstechnik ist dazu bestimmt, behinderten Menschen im Sinne des 3 des Behindertengleichstellungsgesetzes, denen ohne die Erfüllung zusätzlicher Bedingungen die Nutzung der Informationstechnik nur eingeschränkt möglich ist, den Zugang dazu zu eröffnen.

8 Barrierefreiheit im Web Was bei der Gestaltung barrierefreier Webseiten berücksichtigt werden muss Da es sehr unterschiedliche Behinderungen gibt, sollten wir folgende Grundsätze beachten: Seiten so einfach wie möglich halten! Über HTML hinausgehende Erweiterungen wie Skripte, Movies, Klänge usw. sollten nur sehr dosiert eingesetzt werden. Dort, wo sie sich nicht vermeiden lassen, sollten immer Alternativvarianten angeboten werden für diejenigen, die diese Erweiterungen nicht erkennen können. Struktur geht vor Layout! Grundsätzlich sollte Layout über Style Sheets realisiert werden. Das HTML- Dokument sollte ausschließlich für die Seitenstrukturierung zuständige Tags beinhalten. Syntaktische Richtigkeit der Seiten sicherstellen! Webseiten sollten mit Hilfe von Validierungswerkzeugen auf syntaktische Richtigkeit, Rechtschreibung und auf Barrierefreiheit geprüft werden.

9 Konkretes Unterstützung für Blinde/Sehbehinderte Faust-Regel des Fachausschusses für Informations- und Kommunikationstechnik (FIT): "Wenn Webseiten auch bei ausgeschalteter Grafikfunktion eines Internetbrowsers ohne Verlust wesentlicher Informationen lesbar sind und die Navigation gewährleistet bleibt, können diese Seiten auch von blinden und sehbehinderten Menschen genutzt werden. Für Bilder einen Alternativtext angeben (z. B. <img src="..." alt="uni-innenhof">), für Movies Untertitel angeben Schriftgrößen nie absolut, sondern immer relativ angeben, Maße für Frames und Tabellen nie absolut, sondern immer relativ (z.b. width="30%") angeben, Wenn Frames verwendet werden, sollten diese sinnvolle Namen (z.b. "Inhalt") bekommen, In Formularen darauf achten, dass diese auch ohne Maus benutzbar sind und die Formularfelder in eine logisch sinnvolle Reihenfolge bringen, Screenreader von Blinden bieten die Möglichkeit, alle Links einer Seite separat anzeigen zu lassen. Das bedeutet, dass die zugehörigen Linktexte sprechend sein sollten, z.b. statt "klicken Sie hier" könnte man "Weitere Informationen zu behindertengerechten Seiten" schreiben. Um Sehbehinderten die Lesbarkeit zu erleichtern, sollte auf jeden Fall auf ausreichenden Kontrast des Seitentextes zum Seitenhintergrund geachtet werden. Statt der layoutgebenden Tags <b> und <i> sollten die strukturgebenden Tags <strong> und <em> verwendet werden.

10 Konkretes Farbenblindheit Der banale Satz "Klicken Sie auf die grünen Wörter." dürfte besonders bei Farbblinden auf Ärgernis stoßen. Beispiel: Statt roter Farbe für negative Werte sollte man Minuszeichen verwenden. Taubheit Akustische Erklärungen sind für Nichthörgeschädigte eine interessante Abwechslung im ansonsten textlastigen WWW. Für Hörgeschädigte stellen sie jedoch einen erheblichen Informationsverlust dar. Als sinnvolle Alternativlösungen bieten sich hier Untertitel oder eine Rede in Textform an. Motorische Schwächen Um auch motorisch Behinderten die Möglichkeit zu geben, sicher über eine Webseite zu navigieren, sollten die Flächen für Mausklicks großzügig gehalten werden. Mauslos Auch wer keine Maus benutzen kann, sollte Webseiten ungehindert lesen können. Überall, wo es möglich ist, sollte die Navigation durch die Zuweisung von Tastaturkürzeln (realisierbar durch accesskey) erleichtert werden. Leichte Texte Einfache Texte! Aktion Leichte Sprache, z.b. bundestag.de Die Leichte Sprache oder Einfache Sprache ist eine besonders leicht verständliche sprachliche Ausdrucksweise. Sie erleichtert Menschen das Verstehen von Texten. Besonders hilfreich ist sie für Menschen, die aus unterschiedlichen Gründen über eine geringe Kompetenz in der deutschen Sprache verfügen. Sie dient damit auch der Barrierefreiheit.

11 Leichte Sprache Es werden kurze Sätze verwendet. Jeder Satz enthält nur eine Aussage. Es werden Aktivsätze eingesetzt. Ein verständlicher Satz besteht aus den Gliedern: Subjekt + Prädikat + Objekt, z.b. Das Kind streichelt den Hund. Der Konjunktiv wird vermieden. Der Genitiv wird in den meisten Fällen durch den Dativ ersetzt, z.b. Das Haus des Lehrers. oder Des Lehrers Haus. durch Das Haus von dem Lehrer. oder Das Haus vom Lehrer. Aber: Ich leihe dir mein Buch. ist verständlicher als Ich leihe dir das Buch von mir. Abstrakte Begriffe werden vermieden; wo sie notwendig sind, werden sie durch anschauliche Beispiele oder Vergleiche erklärt. Bildhafte Sprache wird vermieden, z.b. Rabeneltern. Wenn Fremdwörter oder Fachwörter vorkommen, werden sie erklärt. Bei langen Zusammensetzungen wird durch Bindestriche deutlich gemacht, aus welchen Wörtern die Zusammensetzungen bestehen. Abkürzungen werden beim ersten Vorkommen durch die ausgeschriebene Form erklärt. Es wird keine Kindersprache verwendet. Bilder oder Filme helfen, einen Text besser zu verstehen. Wörter werden nicht in durchgehenden Großbuchstaben geschrieben. Kursive Schrift wird nicht verwendet. Texte werden übersichtlich gestaltet.

12 Beispiel

13 Schwierige Elemente Textwüsten PDF-Dokumente (Hinweise zum Erstellen barrierefreier PDF- Dokumente, Formulare (insb. Captchas, besser: Rechenaufgaben) Nichtlineare Tabellen Linktexte (Linkliste in Jaws anzeigen: Ins+F7) Multimediale Objekte Multilinguale Sites Abkürzungen/Akronyme (Die HU Berlin) Anglizismen (Die HU bei Facebook, Sitemap) Neue Fenster

14 Hilfreiche Elemente/Strategien sprechende Linktexte / Alternativtexte für Bilder accesskey (Sprungmarken) tabindex (Reihenfolge) role-attribut (Was bin ich? / WAI-ARIA) Kennzeichnung multimedialer Objekte Ersatztexte für multimediale Objekte lineare Tabellen Kennzeichnung fremdsprachiger Teile Glossare gekennzeichnete Abkürzungen und Akronyme Strategie: Mobile first Don t break the back button!

15 Irrtümer Bei der Umstellung von Webseiten auf richtige Schwerpunktsetzung achten! Die wichtigsten Irrtümer: Ich muss ab sofort zu jedem Bild einen Alternativtext erfinden. Falsch! Zu jedem Bild muss es ein Alt-Tag geben, der Inhalt dessen kann jedoch durchaus leer gelassen werden: alt=" Ich muss jedes Video durch einen langen Text ersetzbar machen. Falsch! Selten ist es möglich, ein Video tatsächlich durch Text erschließbar zu machen. Sinnvoller ist es, den Link zu einem Movie auf der Seite als solchen zu kennzeichnen. Mit Frames können Blinde nicht umgehen. Falsch! Screenreader haben mit Frames keine Probleme. (Das heißt nicht, dass Frames insgesamt unproblematisch sind.) Ich darf keine Tabellen mehr verwenden. Falsch! Für tabellarische Inhalte dürfen auf jeden Fall weiterhin Tabellen verwendet werden. Kriterium: Linearisierbarkeit Lange Listen sind in Ordnung, denn sie bestehen ja nur aus Text. Falsch! Inhalte gut strukturieren! Die Funktion "Schriftgröße ändern" behindert das Layout meiner Seite. Falsch! Inhalt geht vor Layout. Das Wort "Sitemap" kennt doch jeder. Falsch! Sprachwechsel deutlich machen! Abkürzungen erläutern.

16 Sind meine Seiten barrierefrei? Mögliche Tests: Seiten mit dem Screenreader vorlesen lassen (Werkzeug z.b. Jaws + IE) Seiten auf syntaktische Qualität prüfen lassen (Werkzeug Developer Toolbar) Usability Tests durchführen (Anleitung von Steve Krug) Seiten auf unterschiedlichen Geräten testen

17 Linkliste Einfach für alle - Das Angebot der Aktion Mensch für ein barrierefreies Internet Youtube-Video: Barrierefreie Formulare WAI-ARIA: Accessible Rich Internet Applications (WAI-ARIA) Wortlaut der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) Zugang für alle - Accessibility, Usability, Barrierefreies Webdesign c't 2004, Heft 18: "Internet ohne Ausgrenzung - Webseiten für Sehbehinderte zugänglich machen, Teil I" c't 2004, Heft 19: "Struktur schafft Durchblick - Webseiten für Sehbehinderte zugänglich machen, Teil II" Checkliste "Behindertengerechte Webseiten" des W3C Zugänglichkeitsrichtlinien für Web-Inhalte Deutscher Blinden- und Sehbehindertenverband (DBSV) Jan Eric Hellbusch: Kontraste und andere Hürden - über barrierefreies Webdesign Validator zur Überprüfung der syntaktischen Korrektheit (beim W3C) Validator zur Überprüfung der Barrierefreiheit Jaws - Screenreader und Sprachausgabeprogramm Werkzeuge zur Validierung und Überprüfung

18 Was muss und kann verbessert werden? Welche Aspekte der Barrierefreiheit sollten mobile Internet- Geräte erfüllen, hinsichtlich verschiedener Behinderungen (Sprache, Sehen, Hören, Motorik, etc.)? Mehr ansprechende Angebote in leichter Sprache wären gut. Nicht nur zu Themenbereichen wie Selbstbestimmung, Inklusion oder Politik. Die sind wichtig - klar. Menschen mit Down-Syndrom haben im Netz ähnliche Interessen wie Menschen ohne Down-Syndrom. Sie suchen nicht nur Information, sondern möchten auch Musik hören, Spiele spielen oder sich in sozialen Netzwerken austauschen. Deshalb wäre es schön, wenn es einen Teil dieser Themenbereiche auch in leichter Sprache und/oder mit einer guten Hilfe-Funktion gäbe. Können Sie Beispiele nennen, bei denen mobile Barrierefreiheit überzeugend umgesetzt worden ist? Für den speziellen, von mir beschriebenen Teilbereich der Barrierefreiheit finde ich die Seite»Nachrichten leicht«gut umgesetzt ( Die Seite ist übersichtlich und klar strukturiert. Die Texte sind in leichter Sprache geschrieben, und trotzdem dem Erwachsenenalter meiner Kollegen angemessen formuliert. Die Themenbereiche sind dieselben wie auf einer anderen Nachrichtenseite auch. Man bekommt angeteaserte Nachrichten im Überblick, kann sich über die Navigation aber auch für einen bestimmten Themenbereich entscheiden. Man kann die Texte selbst lesen oder sich vorlesen lassen. Die verwendeten Icons sind allgemein bekannt und gut verständlich.