Your SlideShare is downloading. ×
Was ist Barrierefreiheit (12.05. 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Was ist Barrierefreiheit (12.05. 2010)

763
views

Published 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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
763
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

    ×