Was ist Barrierefreiheit (12.05. 2010)

  • 713 views
Uploaded on

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
713
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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)

Transcript

  • 1. Was ist Barrierefreiheit? Ein Kurztest brainbits.net Sylvia Egger – sprungmarker.de
  • 2. 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
  • 3. 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
  • 4. Was ist Barrierefreiheit? Einfach mal ohne ... brainbits.net Sylvia Egger – sprungmarker.de
  • 5. 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
  • 6. Ohne Bilder... Ein kleines Rätsel brainbits.net Sylvia Egger – sprungmarker.de
  • 7. brainbits.net Welche Seite ist das?
  • 8. brainbits.net Screenshot der Startseite von bild.de
  • 9. brainbits.net Welche Seite ist das?
  • 10. brainbits.net Screenshot der Startseite von stern.de
  • 11. brainbits.net Welche Seite ist das?
  • 12. brainbits.net Screenshot der Startseite von otto.de
  • 13. 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
  • 14. 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
  • 15. Was ist Barrierefreiheit? Einfach mal mit ... brainbits.net Sylvia Egger – sprungmarker.de
  • 16. Screenreader... Eine akustische Reise brainbits.net Sylvia Egger – sprungmarker.de
  • 17. 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
  • 18. brainbits.net Laptop mit Braillezeile (Quelle)
  • 19. brainbits.net Braillezeile (Quelle)
  • 20. brainbits.net Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)
  • 21. Welche Screenreader?   JAWS (Windows)   NVDA (Windows, Open Source)   VoiceOver (Mac)   Window-Eyes (Windows) u.a. brainbits.net Sylvia Egger – sprungmarker.de
  • 22. 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
  • 23. brainbits.net stern.de - gelesen mit Screenreader JAWS (Windows)
  • 24. brainbits.net bild.de gelesen mit Screenreader NVDA (Windows)
  • 25. brainbits.net Screencast otto.de gelesen mit VoiceOver (Mac))
  • 26. Was ist Barrierefreiheit? Einfach mit ganz viel ... brainbits.net Sylvia Egger – sprungmarker.de
  • 27. Semantik brainbits.net Sylvia Egger – sprungmarker.de
  • 28. 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
  • 29. brainbits.net Screencast wdr.de mit JAWS: Überschriften und Listen
  • 30. brainbits.net JAWS: Überschriftenliste (Quelle)
  • 31. brainbits.net JAWS: Linkliste (Quelle)
  • 32. brainbits.net wdr.de Liste der Überschriften mit HeadingsMap
  • 33.   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
  • 34.   Topnavigation   Servicenavigation   Sonstige Listen   Hauptnavigation   Metanavigation brainbits.net wdr.de Listenelemente (u.a. Navigationen)
  • 35. brainbits.net bild.de Liste der Überschriften mit HeadingsMap
  • 36. brainbits.net stern.de Liste der Überschriften mit HeadingsMap
  • 37. brainbits.net otto.de Liste der Überschriften mit HeadingsMap
  • 38. Was ist Barrierefreiheit? Einfach mehr ... brainbits.net Sylvia Egger – sprungmarker.de
  • 39. Sylvia Egger sprungmarker.de Senior Webproducerin brainbits GmbH in Köln brainbits.net Vielen Dank fürs Zuhören! 
  • 40. 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