Einladung zum
Barrierefreien Webdesign
(BFWD)

Wolfgang Berndorfer

capito Lehrgang am 5. April 2016

Jeder Mensch kann irgendwann profitieren

Menschen mit besonderen Bedürfnissen

Assistierende Technologien im engeren Sinn

Im Webdesign wird der Ausdruck „Assistierende Technologien“ hauptsächlich für Technologien verwendet, die besonders Menschen mit Beeinträchtigungen zu Gute kommen.

Dabei lassen sich folgende drei Gruppen von Technologien unterscheiden, vor allem aber ergänzend einsetzen:

Übung: Simulation von Sehbehinderung

Wir werden uns nun mit verminderter Sehschärfe eine Webseite anschauen, die Sie vermutlich nicht kennen. Versuchen Sie herauszufinden, was Sie visuell wahrnehmen können! Setzen Sie bitte die Brillen auf, die eine Sehbehinderung simulieren!

http://www.zweiterblick.at

Erfahrungen aus der Selbsterfahrung zur Sehbehinderung

Je nach Grad der Sehbehinderung können visuell doch Informationen über die Webseite wahrgenommen werden, beispielsweise:

Assistierende Hardware

Assistierende Software

Web Accessibility

Accessibility = Zugänglichkeit oder Barrierefreiheit?

Labyrinth
Ein Labyrinth: Es ist prinzipiell zugänglich, aber gewiss nicht barrierefrei....

Web Content Accessibility Guidelines (WCAG) 2.0

Vier Prinzipien

  1. Perceivable (Wahrnehmbar)
  2. Operable (Bedienbar)
  3. Understandable (Verstehbar)
  4. Robust (Robust)

Prinzip "Wahrnehmbarkeit"

Beispiel: Prinzip "Wahrnehmbarkeit"

Prinzip 1: Wahrnehmbar - Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.

Richtlinie 1.1 Textalternativen: 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.

1.1.1 Nicht-Text-Inhalt:
Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient, mit Ausnahme der unten aufgelisteten Situationen.

Übung: Alternativtext für Bilder

Welcher Alternativtext ist angemessen?

Beispielbild Goldenes Dachl

Prinzip "Bedienbarkeit"

Prinzip "Verstehbarkeit"

Beispiel: Prinzip "Verstehbarkeit"
Abkürzungen

IT

Prinzip "Robust"

Konformitätsstufen der WCAG Richtlinien

Stufe Bedeutung
A Muss sein
AA Sollte sein
AAA Wäre fein

Anmerkung der WCAG:

Es wird nicht empfohlen, Konformität auf Stufe AAA als allgemeine Richtlinie für komplette Websites zu fordern, da es bei manchen Inhalten nicht möglich ist, alle Erfolgskriterien der Stufe AAA zu erfüllen.

Beispiele für Erfolgskriterien der Konformitätsstufe A

Übung: Surfen ohne Bildschirm
Funktionalitäten von Screenreadern

Wir werden nun versuchen, uns eine Webseite mit einem Screenreader zu erarbeiten.

Wir verwenden dazu den gebräuchlichsten Screenreader JAWS.

JAWS Konfiguration

Der Screenreader JAWS ist in der Standardkonfiguration möglicherweise so eingestellt, dass nach dem Laden einer Seite automatisch mit dem Vorlesen begonnen wird. Dies kann für die Standardverwendung von Vorteil sein.

Für unsere Übung sollten der Fokus und der „Virtuelle Cursor“ jedoch oben bleiben. Wir ändern daher die Konfiguration:

JAWS Konfiguration für die Übung

Automatisches Starten des Lesens deaktivieren

  1. Browser starten
  2. JAWSTASTE + V (Die JAWSTASTE ist standardmäßig die Null auf dem Numblock)
  3. „Allgemeine Einstellungen“ wählen!
  4. „Dokument automatisch lesen“ deaktivieren! (Drücken der Leertaste ändert die Einstellung)

Auswahl einer Testseite

Welche Homepage wollen Sie sich anschauen?

JAWS Shortcuts

JAWSTASTE = NULL auf der numerischen Tastatur oder EINF am Laptop

Befehl Shortcut
Virtuelle HTML Funktionen (Grafiken, …) auflisten JAWSTASTE + F3
Formularfelder auflisten JAWSTASTE + F5
Überschriften auflisten JAWSTASTE + F6
Lins auflisten JAWSTASTE + F7

Beispiele für Erfolgskriterien der Konformitätsstufe AA

Beispiele für Erfolgskriterien der Konformitätsstufe AAA

WCAG - Weblinks

Entwicklung eines barrierefreien Webauftritts

Usability Checks

Anforderungen an das grafische Design

Anforderungen an das technische Konzept

HTML

Hyper Text Markup Language

<h1>Überschrift Ebene 1</h1>

Anforderungen an die redaktionelle Umsetzung

Übung: Strukturierung eines Textes mit Überschriften

Versuchen Sie eine Webseite mit Überschriften verständlich und übersichtlich zu strukturieren.

Welche Webseite schauen wir uns an?

Überprüfung der Barrierefreiheit

  1. Maschinelle Validation
  2. Cognitive Think Through
  3. Praktische Tests mit einem Screenreader

Rechtlicher Rahmen

Vielen Dank für die Einladung zum
barrierefreien Webdesign
(BFWD)
beim
Capito Lehrgang 2016

Kontakt

Mag. Wolfgang Berndorfer

Akademischer Experte für Barrierefreies Webdesign

Anschrift: A-6020 Innsbruck, Schidlachstraße 9/8
Telefon: +43 (0) 512 / 560 568
Mobil: +43 (0) 664 / 734 934 05
E-Mail: office@zweiterblick.at
Webseite: www.zweiterblick.at