Einladung zum
Barrierefreien Webdesign
(BFWD)
Wolfgang Berndorfer
capito Lehrgang am 5. April 2016
Jeder Mensch kann irgendwann profitieren
- Sie wollen sich auf der Fahrt einen Zeitungsartikel vorlesen lassen.
- Sie wollen am Strand surfen, und zwar im Internet.
- Sie wohnen in der Nähe des Flughafens und wollen ein Video anschauen.
- Sie haben am Arm einen Gips und können die Maus nicht mit der gewohnten Hand bedienen.
- Sie müssen sich Informationen von einer englischsprachigen Webseite holen.
Menschen mit besonderen Bedürfnissen
- Menschen, die eine Art von Sinneseindrücken nicht wahrnehmen können.
- Menschen, die den PC nicht mit der Maus bedienen können.
- Menschen, die komplexere Zusammenhänge, komplizierte Formulierungen oder schwierige Begriffe nicht verstehen können.
- Menschen, die auf assistierende Technologien angewiesen sind.
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:
- Hardwarelösungen
- Spezialsoftware
- Alternative Bedienungskonzepte
Ü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:
- Unterschiedliche Hintergründe von Seitenbereichen
- Vorhandene Logos, Bilder oder Grafiken
- Bereiche mit umfangreicheren Textblöcken
- Menübereiche
- Überschriften, Tabellen oder Listen
- Der Text von größeren Schriften
Assistierende Hardware
- Spezialtastaturen
- Spezialmäuse
- Braillezeilen
- Eye Tracking Systeme
Assistierende Software
- Vergrößerungsprogramme
- Screenreader und Sprachausgaben
- Spracheingabesysteme
- Predictive Typing Systeme
Web Accessibility
Accessibility = Zugänglichkeit oder Barrierefreiheit?
Ein Labyrinth: Es ist prinzipiell zugänglich, aber gewiss nicht barrierefrei....
- Ich könnte etwas erreichen oder ...
- Ich kann etwas erreichen.
Web Content Accessibility Guidelines (WCAG) 2.0
Vier Prinzipien
- Perceivable (Wahrnehmbar)
- Operable (Bedienbar)
- Understandable (Verstehbar)
- Robust (Robust)
Prinzip "Wahrnehmbarkeit"
- Textalternativen
- Untertitel
- Audiodeskription oder Medienalternative
- Gebärdensprache
- Leiser oder kein Hintergrund-Audioinhalt
- …
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.
- Steuerelemente, Eingabe:
Wenn es sich bei dem Nicht-Text-Inhalt um ein Steuerelement handelt oder Eingaben durch den Benutzer akzeptiert, dann hat dieser einen Namen, der seinen Zweck beschreibt. (Beachten Sie Richtlinie 4.1.2 für zusätzliche Anforderungen an Steuerelemente und Inhalte, die Eingaben durch den Benutzer akzeptieren.)
- ...
Übung: Alternativtext für Bilder
Welcher Alternativtext ist angemessen?
Prinzip "Bedienbarkeit"
- Tastaturbedienbarkeit
- Zeiteinteilung anpassbar
- Grenzwert von dreimaligem Blitzen oder weniger
- Fokus sichtbar
- ...
Prinzip "Verstehbarkeit"
- Sprache der Seite
- Abkürzungen
- Fehlererkennung
- ...
Beispiel: Prinzip "Verstehbarkeit"
Abkürzungen
IT
Prinzip "Robust"
- Syntaxanalyse
- Name, Rolle, Wert
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
- Textalternativen (1.1.1)
- Untertitel (1.2.2)
- Tastaturbedienbarkeit (2.1.1)
- wiederholende Blöcke umgehen (2.4.1)
- Fokus-Reihenfolge (2.4.3)
- Sprache der Seite (3.1.1)
- Syntaxanalyse (4.1.1)
Ü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
- Browser starten
- JAWSTASTE + V (Die JAWSTASTE ist standardmäßig die Null auf dem Numblock)
- „Allgemeine Einstellungen“ wählen!
- „Dokument automatisch lesen“ deaktivieren! (Drücken der Leertaste ändert die Einstellung)
Auswahl einer Testseite
Welche Homepage wollen Sie sich anschauen?
- Die Webseite sollte Ihnen möglichst gut bekannt sein.
- Der Webauftritt der eigenen Einrichtung ist vielleicht für diese Übung interessant.
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
- Audiodeskription (1.2.3)
- Mindestkontrast (1.4.3)
- Fokus sichtbar (2.4.7)
- Konsistente Navigation (3.2.3)
- Fehlerempfehlung (3.3.3)
Beispiele für Erfolgskriterien der Konformitätsstufe AAA
- Gebärdensprache (1.2.6)
- Erneute Authentifizierung (2.2.5)
- Ungewöhnliche Wörter (3.1.3)
- Abkürzungen (3.1.4)
- Leseniveau (Leicht lesen) (3.1.5)
- Kontextsensitive Hilfe (3.3.5)
Entwicklung eines barrierefreien Webauftritts
- Anforderungen an das Usability Engineering
- Anforderungen an das grafische Design
- Anforderungen an die technische Umsetzung
- Anforderungen an die redaktionelle Gestaltung
Usability Checks
- Cognitive Think Through
- Card Sorting
- Nutzerbeobachtung
Anforderungen an das grafische Design
- Übersichtliche Anordnung der Seitenbereiche
- Kontrastreiche Gestaltung der Bereiche und Elemente
- Gut lesbare Schriften
- Verständliche Bilder und Grafiken
Anforderungen an das technische Konzept
- Realisierung überwiegend mit HTML
- Grafische Realisierung mittels zentraler CSS-Dateien
- Validierter Code
HTML
Hyper Text Markup Language
<h1>Überschrift Ebene 1</h1>
Anforderungen an die redaktionelle Umsetzung
- Richtiger Einsatz semantischer Elemente (Überschriften, Listen, Tabellen, Hervorhebungen, Sprachen)
- Gute inhaltliche Strukturierung mittels aussagekräftiger Überschriften
- Dem Zielpublikum angepasste verständliche Sprache
- Präzise Alternativtexte für Bilder und Grafiken
Ü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
- Maschinelle Validation
- Cognitive Think Through
- Was passiert, wenn Bilder nicht angezeigt werden?
- Was passiert, wenn der Lautsprecher ausgeschaltet ist?
- Was wäre, wenn die Maus nicht funktionieren würde?
- Was wäre, wenn das grafische Darstellungskonzept (mit CSS) plötzlich nicht mehr funktionieren würde?
- Praktische Tests mit einem Screenreader
Vielen Dank für die Einladung zum
barrierefreien Webdesign
(BFWD)
beim
Capito Lehrgang 2016
Kontakt
Mag. Wolfgang Berndorfer
Akademischer Experte für Barrierefreies Webdesign
