• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Was ist Barrierefreiheit (12.05. 2010)
 

Was ist Barrierefreiheit (12.05. 2010)

on

  • 1,085 views

Einführungs-Vortrag zur Barrierefreiheit in Köln - 12.05. 2010 - Themen: Surfen mit Screenreader und Braillezeile, Alternativtexte, Semantik am Beispiel Überschriften-Struktur. ...

Einführungs-Vortrag zur Barrierefreiheit in Köln - 12.05. 2010 - Themen: Surfen mit Screenreader und Braillezeile, Alternativtexte, Semantik am Beispiel Überschriften-Struktur.

Das PDF ist noch nicht barrierefrei, aber ich arbeite dran. :) Wie immer ohne die üppigen Screencasts.

Statistics

Views

Total Views
1,085
Views on SlideShare
1,081
Embed Views
4

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 4

http://www.slideshare.net 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Hier ist der Hinweis wichtig, dass technische Möglichkeiten nicht so allgemein gemeint ist (Stichwort: mobile Geräte)
  • Hier ist der Hinweis wichtig, dass technische Möglichkeiten nicht so allgemein gemeint ist (Stichwort: mobile Geräte)
  • Hier ist der Hinweis wichtig, dass technische Möglichkeiten nicht so allgemein gemeint ist (Stichwort: mobile Geräte)

Was ist Barrierefreiheit (12.05. 2010) Was ist Barrierefreiheit (12.05. 2010) Presentation Transcript

  • Was ist Barrierefreiheit? Ein Kurztest brainbits.net Sylvia Egger – sprungmarker.de
  • Sylvia Egger   Frontendentwicklerin   10 Jahre Agenturerfahrung   7 Jahre Arbeit mit und für Barrierefreiheit   Blog zur Barrierefreiheit: sprungmarker.de   Spezialgebiet: Testen, Prüfen und Weiterentwicklung von Barrierefreiheit, Gesetzgebung (WCAG2, BITV) brainbits.net Sylvia Egger – sprungmarker.de
  • Was ist Barrierefreiheit? „Barrierefreies Internet bezeichnet Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können“ Quelle: Wikipedia: Barrierfreies Internet Oder ganz einfach formuliert: Einfach für alle, Seiten für alle brainbits.net Sylvia Egger – sprungmarker.de
  • Was ist Barrierefreiheit? Einfach mal ohne ... brainbits.net Sylvia Egger – sprungmarker.de
  • Ohne Bilder? Alternativtext   für Screenreader-Nutzer   für Nutzer von einfachen Textbrowsern wie Lynx   für langsame Verbindungen   wenn Grafiken nicht geladen werden brainbits.net Sylvia Egger – sprungmarker.de
  • Ohne Bilder... Ein kleines Rätsel brainbits.net Sylvia Egger – sprungmarker.de
  • brainbits.net Welche Seite ist das?
  • brainbits.net Screenshot der Startseite von bild.de
  • brainbits.net Welche Seite ist das?
  • brainbits.net Screenshot der Startseite von stern.de
  • brainbits.net Welche Seite ist das?
  • brainbits.net Screenshot der Startseite von otto.de
  • Ohne Bilder? Alternativtext Probleme   Alternativtext trifft nicht den Bildinhalt   Alternativtext lautet anders als Schriftgrafik   Alternativtext fehlt   Alternativtext doppelt die Überschrift (Bsp. Teaser)   Wichtige Elemente verschwinden (Bsp. Suchfeld)   Fehlendes Listensymbol macht Liste schwer erkennbar   Symbole/Icons tragen Bedeutung, verschwinden jedoch   Redundante Alternativtexte (Bsp. Bildergalerie)   Text liegt auf gleichfarbigem Hintergrund (Bsp. weiß auf weiß)   Zu lange Alternativtexte brainbits.net Sylvia Egger – sprungmarker.de
  • Ohne Bilder? Alternativtext Lösung   redaktionelle Pflege   immer den Kontext der Grafik mitberücksichtigen   Verlinkte Grafiken: immer das Linkziel mit angeben (Bsp. Teaser)   Doppelungen und Redundanzen vermeiden (Reduktion)   Auf Schriftgrafiken verzichten   Keine wichtige Information/Texte in den Hintergrund   Auf Farbkombination Vorder- /Hintergrundachten achten (Bsp: weiß auf weiß) brainbits.net Sylvia Egger – sprungmarker.de
  • Was ist Barrierefreiheit? Einfach mal mit ... brainbits.net Sylvia Egger – sprungmarker.de
  • Screenreader... Eine akustische Reise brainbits.net Sylvia Egger – sprungmarker.de
  • Was ist ein Screenreader? „Screenreader machen (Windows)-Oberflächen für blinde Computernutzer zugänglich. Sie lesen den Bildschirminhalt ein und geben die wichtigsten Informationen an die Sprachausgabe und Braillezeile weiter.“ Quelle: INCOBS brainbits.net Sylvia Egger – sprungmarker.de
  • brainbits.net Laptop mit Braillezeile (Quelle)
  • brainbits.net Braillezeile (Quelle)
  • brainbits.net Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)
  • Welche Screenreader?   JAWS (Windows)   NVDA (Windows, Open Source)   VoiceOver (Mac)   Window-Eyes (Windows) u.a. brainbits.net Sylvia Egger – sprungmarker.de
  • Mit Screenreader   Seiten werden für blinde und stark sehbehinderte Nutzer zugänglich   verschiedene Ausspielwege: Sprache, Blindenschrift (Braille)   arbeitet Inhalte linear ab   Gute Semantik macht einen wirklichen Unterschied Navigationsmöglichkeiten und klarere Inhalte   Überschriften   Listen   Alternativtexte   Semantische Auszeichnungen wie fett, kursiv, Zitate, Abkürzungen Akronyme, Sprachwechsel   Unterschiede in Interpretation und Unterstützung (Web 2.0, AJAX, HTML 5) brainbits.net Sylvia Egger – sprungmarker.de
  • brainbits.net stern.de - gelesen mit Screenreader JAWS (Windows)
  • brainbits.net bild.de gelesen mit Screenreader NVDA (Windows)
  • brainbits.net Screencast otto.de gelesen mit VoiceOver (Mac))
  • Was ist Barrierefreiheit? Einfach mit ganz viel ... brainbits.net Sylvia Egger – sprungmarker.de
  • Semantik brainbits.net Sylvia Egger – sprungmarker.de
  • Semantik an Beispielen Überschriften   Screenreader- und Tastaturnutzer arbeiten mit Überschriften   Versteckte Überschriften helfen beiden Nutzern Listen   Screenreader-Nutzer arbeiten mit Listen   Semantisch bilden sie eine Einheit (Aufzählung, Navigationen) Links   Screenreader-Nutzer werten Linklisten aus   Tastaturnutzer springen von Link zu Link   Sprungmarken sind wichtig brainbits.net Sylvia Egger – sprungmarker.de
  • brainbits.net Screencast wdr.de mit JAWS: Überschriften und Listen
  • brainbits.net JAWS: Überschriftenliste (Quelle)
  • brainbits.net JAWS: Linkliste (Quelle)
  • brainbits.net wdr.de Liste der Überschriften mit HeadingsMap
  •   Hierarchiebruch   Hier fehlt die H2   Rechte Spalte nicht Unterpunkt des Artikels   Keine versteckte Navigation (unhandlich)   Links-Rubrik ohne Überschrift (strong!) brainbits.net wdr.de Liste der Überschriften mit HeadingsMap
  •   Topnavigation   Servicenavigation   Sonstige Listen   Hauptnavigation   Metanavigation brainbits.net wdr.de Listenelemente (u.a. Navigationen)
  • brainbits.net bild.de Liste der Überschriften mit HeadingsMap
  • brainbits.net stern.de Liste der Überschriften mit HeadingsMap
  • brainbits.net otto.de Liste der Überschriften mit HeadingsMap
  • Was ist Barrierefreiheit? Einfach mehr ... brainbits.net Sylvia Egger – sprungmarker.de
  • Sylvia Egger sprungmarker.de Senior Webproducerin brainbits GmbH in Köln brainbits.net Vielen Dank fürs Zuhören! 
  • Credits Screencasts erstellt mit ScreenFlow Ablaufbilder mit Screensteps Alle Bildquellen sind am jeweiligen Bild vermerkt Diese Präsentation auf Slideshare: http://www.slideshare.net/sprungmarker brainbits.net folgen Sie mir doch auf twitter: @sprungmarkers