Einladung zum
Barrierefreien Webdesign
(BFWD)

Wolfgang Berndorfer

Lehrgang bei innovia am 18. März 2015

Jeder Mensch kann irgendwann profitieren

Menschen mit besonderen Bedürfnissen

Zielrichtung: Design for All

Webinhalte sollten für alle Menschen gestaltet sein, unabhängig von

Eine Assistierende Tecnnologie
... ist jede Technologie

Im weiteren Sinn ist jede Technologie eine Assistierende Technologie, weil sie die Wahrnehmung und Bedienung digitaler Inhalte erleichtert. Jedes Display, jede Maus, jedes Icon oder Interface sollte dazu dienen, Bits und Bytes einfacher handhaben zu können.

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

Alternative Bedienungskonzepte

Geschichte der Bedienungsangebote

Web Accessibility

Accessibility = Zugänglichkeit oder Barrierefreiheit?

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

Screen Reader: Problem der linearen Wahrnehmung

Regierung Bezirke & Gemeinden Verwaltung Bürgerservice Presse Screen Bote für Tirol Bote für Tirol 11.02.2014Bürgerservice Amtsblatt der Behörden, Ämter und Gerichte Tirols Blick auf das Landhaus 1 in Innsbruck vom Meraner Innenhof aus. Kundmachungen 10.02.2014Bürgerservice Elektronische Amtstafel: Kundmachungen örtlich, thematisch und chronologisch strukturiert abrufbar. Rohbau Wohnhaus Wohnbauförderung 11.02.2014Bauen & Wohnen Was fördert das Land Tirol? Alle Informationen dazu finden Sie hier. Land Tirol Presse Videos Landeszeitung Medienverzeichnis Gabi Plattner, Geschäftsführerin des Tiroler Frauenhauses, LRin Christine Baur und Elisabeth Stögerer-Schwarz, Leiterin des Fachbereiches Frauen und Gleichstellung des Landes Tirols, feiern gemeinsam am Valentina Empfang. 14.02.2014 Frauenpower beim Valentina-Empfang Die Schwerpunkte der heurigen Frauen- und Gleichstellungspolitik in Tirol wurden präsentiert. Landeshauptmann-Stellvertreterin Ingrid Felipe setzt bei der Klimastrategie auf die Einbindung der BürgerInnen. Foto: Land Tirol/Berger. 14.02.2014 Klimastrategie Land legt 445 Seiten starken Bericht vor. Jetzt sind die BürgerInnen an der Reihe. Von links LR Christian Ragger, LHStvin Ingrid Felipe, LHStvin Astrid Rössler, Sektionschef Rupert Lindner, Lebensministerium Foto: NPHT 13.02.2014 LHStvin Felipe: „Nationalpark Hohe Tauern über Grenzen hinweg stärken“ Tirol, Kärnten und Salzburg wollen Forschung, Erwachsenenbildung und Öffentlichkeitsarbeit ausbauen. Weitere Meldungen » LHStv.in Felipe und Bundesminister Rupprechter Shakehands der beiden Landeshauptleute von Nord- und Südtirol Tiroler Landesregierung bei der Klausur im Jänner 2014 Tiroler Landeszeitung Nr. 12/2013 / Link zur Landeszeitung Gesundes Land / Beilage der Tiroler Landeszeitung Tiroler Service-Wegweiser / Link zur Sonderbeilage Aktuelles 13.02.2014 LRin Palfrader regt bundesweiten Gratiskinderkarten für Vierjährige nach Ti Sprachförderung für Kinder mit nicht-deutscher Muttersprache wird ausgebaut 13.02.2014 Land Tirol investiert über elf Millionen Euro in Verkehrswege im Oberland Straßenbauprogramm für die Bezirke Imst und Landeck präsentiert.

Web Accessibility Initiative (WAI)

Richtlinien, Empfehlungen und Tipps des World Wide Web Consortium (W3C) zur Verbesserung der Barrierefreiheit

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?

Bertha von Suttner
  • "Portraitfoto von Berta von Suttner"
  • " " [leerer Alternativtext]
  • "Berta von Suttner"
  • "Berta von Suttner, die Österreichische Friedensnobelpreisträgerin"

Übung: "Grafiklink"

Welcher Alternativtext ist angemessen?


Bertha von Suttner auf Wikipedia

  • "Berta von Suttner auf Wikipedia"
  • " " [Leerer Alternativtext]
  • "Berta von Suttner"
  • "Link zu Berta von Suttner, auf Wikipedia"

Übung: Alternativtexte für Bilder

Baustelle

Welchen Alternativtext würden Sie verwenden?

Prinzip "Bedienbarkeit"

Übung: Bedienung mit der Tastatur und ... ohne Maus:
Der Fokus

  1. Suchen wir uns eine Webseite aus, um die Bedienbarkeit ohne Maus zu prüfen!
  2. Schauen wir uns ein Best Practise Beispiel an!

Prinzip "Verstehbarkeit"

Beispiel: Prinzip "Verstehbarkeit"
Abkürzungen

IT

Prinzip "Robust"

Probleme über alle Prinzipien

Die Anforderungen an Webinhalte lassen sich nicht immer genau einem Prinzip, einer Richtlinie oder einem Erfolgskriterium der WCAG zuordnen.

Wenn beispielsweise ein Formularelement keine technische Bezeichnung hat, kann ich die Beschriftung des Formularelements mit meinem Screenreader nicht wahrnehmen, kann das Formular daher auch nicht bedienen, weil ich das Thema, die Rolle und den Wert des Formularelements nicht verstehe.

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.

Welche Homepage wollen wir uns anschauen?

JAWS Shortcuts

JAWS-Taste = NULL auf der numerischen Tastatur oder EINF am Laptop

Befehl Shortcut
Virtuelle HTML Funktionen (Grafiken, …) auflisten JAWS-Taste + F3
Formularfelder auflisten JAWS-Taste + F5
Überschriften auflisten JAWS-Taste + F6
Lins auflisten JAWS-Taste + 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

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

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