Your SlideShare is downloading. ×
0
Was ist Barrierefreiheit?
                       Ein Kurztest




brainbits.net                   Sylvia Egger – sprungmar...
Sylvia Egger



      Frontendentwicklerin
      10 Jahre Agenturerfahrung
      7 Jahre Arbeit mit und für Barrierefre...
Was ist Barrierefreiheit?


  „Barrierefreies Internet bezeichnet Web-Angebote, die von
  allen Nutzern unabhängig von kör...
Was ist Barrierefreiheit?
                   Einfach mal ohne ...




brainbits.net                   Sylvia Egger – sprun...
Ohne Bilder? Alternativtext




      für Screenreader-Nutzer
      für Nutzer von einfachen Textbrowsern wie Lynx
    ...
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 and...
Ohne Bilder? Alternativtext


  Lösung
      redaktionelle Pflege
      immer den Kontext der Grafik mitberücksichtigen
...
Was ist Barrierefreiheit?
                    Einfach mal mit ...




brainbits.net                   Sylvia Egger – sprun...
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 lese...
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...
Mit Screenreader

    Seiten werden für blinde und stark sehbehinderte Nutzer zugänglich
    verschiedene Ausspielwege: ...
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 – ...
Semantik




brainbits.net         Sylvia Egger – sprungmarker.de
Semantik an Beispielen

  Überschriften
    Screenreader- und Tastaturnutzer arbeiten mit Überschriften
    Versteckte Ü...
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 nic...
  Topnavigation


                                                             Servicenavigation




                   ...
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 – sprungm...
Sylvia Egger


                sprungmarker.de

                Senior Webproducerin
                brainbits GmbH in Köl...
Credits



                      Screencasts erstellt mit ScreenFlow
                         Ablaufbilder mit Screensteps...
Upcoming SlideShare
Loading in...5
×

Was ist Barrierefreiheit (12.05. 2010)

798

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.

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
798
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

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 of "Was ist Barrierefreiheit (12.05. 2010)"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×