SlideShare uma empresa Scribd logo
1 de 20
Besser Online 2012 - DJV                                      15. September 2012




              Barrierefrei Kommunizieren

                           Jan Eric Hellbusch




                                                © Jan Eric Hellbusch     (1967 - 2012)
                                                hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                  15. September 2012




In Deutschland gibt es eine Gesetzeslage

       •     BITV 2.0: Verordnung zum
             Behindertengleichstellungsgesetz
       •     Für Behörden des Bundes verpflichtend
       •     Bezieht sich seit 2011 auf die Web Content
             Accessibility Guidelines 2.0
       •     Die Länder-BITVs - sofern vorhanden -
             beziehen sich auf WCAG 1.0




                                            © Jan Eric Hellbusch     (1967 - 2012)
                                            hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                 15. September 2012




Maßgeblich sind Webstandards

       •     Die Web Content Accessibility Guidelines
             (WCAG) 2.0 wurden in Dezember 2008 vom
             World Wide Web Consortium (W3C) als
             Webstandard veröffentlicht.
       •     Ausrichtung an moderne Webtechniken.
       •     Anforderungen (behinderter) Nutzer, aber auch
             der Webentwickler, Software-Hersteller und
             nicht zuletzt der Zertifizierer.
       •     Grundlage für viele Gesetze weltweit.



                                           © Jan Eric Hellbusch     (1967 - 2012)
                                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                            15. September 2012




Standardisierung in Europa

Human Factors; European accessibility requirements
for public procurement of ICT products and services

       •Mandate 376: Europäische Standards zur
        Zertifizierung der Barrierefreiheit
    • Richtlinien einschließlich WCAG 2.0 und Teile
        der ISO 9241
    • Testanleitungen, Werkzeugkiste
    • Geplantes Inkrafttreten: Februar 2014
Weitere Informationen auf www.mandate376.eu.


                                      © Jan Eric Hellbusch     (1967 - 2012)
                                      hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012




   Vergrößerungssysteme




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                          15. September 2012




Vergrößerungsausschnitte

Bei Vergrößerung wird immer
nur eine Teilansicht dargestellt.




                                    © Jan Eric Hellbusch     (1967 - 2012)
                                    hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                  15. September 2012




Benutzerdefinierte Farben




                            © Jan Eric Hellbusch     (1967 - 2012)
                            hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012




Tasten, hören und schlecht sehen

Es gibt unterschiedliche
Ausgabe- und
Eingabegeräte.




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012

Wer Tastatur und Maus nicht nutzen
kann, ...

... braucht eine
Spezialmaus.




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012




Computer mit Blindenhilfsmitteln

Die Hilfsmittel:

• Screenreader

•Sprachausgabe

• Braillezeile




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                         15. September 2012




Thema Kontrast

Helligkeitskontraste werden anhand eines Algorithmusses der
WCAG 2.0 gemessen. Das Kontrastverhältnis kann zwischen 1:1
(kein Helligkeitsunterschied) und 21:1 (schwarz/weiß) liegen.

       •     Konflikte: Corporate Design, grafisches Design
       •     Minimales Kontrastverhältnis (AA): 4,5:1(normale Schrift)
             bzw. 3:1 ( große Schrift; Ausnahme Logos)




                                                   © Jan Eric Hellbusch     (1967 - 2012)
                                                   hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                            15. September 2012




Hintergrundgrafiken

Hintergrundgrafiken werden im Kontrastmodus als
Hintergrund behandelt; entsprechend werden sie im
Kontrastmodus ausgeblendet.




                                      © Jan Eric Hellbusch     (1967 - 2012)
                                      hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                  15. September 2012




Skalierbarkeit

Im Mittelpunkt der WCAG-Anforderung steht die
Textvergrößerung:

       •     Alle Browser bieten eine Seitenzoom-Funktion
       •     Besser nutzbar ist ein elastisches Layout, das
             auf die reine Schriftvergrößerung reagiert
       •     Optimale Lösungen gibt es nicht; ein flüssiges
             Layout gilt nachwievor als Best-Practice




                                            © Jan Eric Hellbusch     (1967 - 2012)
                                            hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012




Seitenzoom




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                             15. September 2012




Strukturen in HTML

Mit HTML 4 geht es im Inhalt im Wesentlichen um

         1. Überschriften
         2. Listen
         3. Absätze
         4. Datentabellen
Technisch ist der richtige Einsatz das Handwerk, das
jeder beherrschen muss. Es kann aber nicht alles mit
diesen Elementen abgebildet werden.



                                       © Jan Eric Hellbusch     (1967 - 2012)
                                       hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                    15. September 2012




Alternativtexte für Bilder

Die Formulierung von Alternativtexten für Grafiken
hängt von vielen Faktoren ab, etwa Kontext des Bildes.
Es ist eine eigene "Kunst".

       •     Schriftgrafiken: Abgebildeter Text im alt-Attribut
       •     Layout-Elemente: Leeres alt-Attribut oder per
             CSS einbinden
       •     Fotos: eine kurze Beschriftung oder
             Identifikation
       •     Schaubilder: Identifikation und entweder eine
             lange Beschreibung oder Hinweis auf Kontext
       •     Verlinkte Grafiken: Etwas über das Linkziel
                                              © Jan Eric Hellbusch     (1967 - 2012)
                                              hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                 15. September 2012




Tastaturbedienung

Screenreader-Nutzer verwenden meist die strukturelle
Navigation des Screenreaders. Vor allem für sehende
Tastaturnutzer müssen Webseiten bedienbar bleiben.

       •     Bedienung mit der Tab-Taste muss
             gewährleistet werden:
              1. Links und Steuerelemente (<a href> statt
                 <span>)
              2. Reihenfolge folgt Quellcode (tabindex
                 vermeiden)


                                           © Jan Eric Hellbusch     (1967 - 2012)
                                           hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                           15. September 2012




Sichtbarer Fokus

Der Fokus muss immer sichtbar bleiben.




                                     © Jan Eric Hellbusch     (1967 - 2012)
                                     hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                                       15. September 2012




Schreckgespenst PDF

Portable Document Format müssen auch barrierefrei sein:

       •     Strukturen wie in HTML
       •     Voraussetzung: Formatvorlagen korrekt einsetzen
       •     Ab Microsoft Word 2010 „out of the box“ möglich
       •     Hilfreiche Plugins: AxesPDF (Word) und „Made to tag“
             (Indesign)
       •     Nacharbeit in Adobe ist unverhältnismäßig teuer




                                                 © Jan Eric Hellbusch     (1967 - 2012)
                                                 hellbusch@2bweb.de     http://2bweb.de
Besser Online 2012 - DJV                 15. September 2012




Ende der Folien




                           © Jan Eric Hellbusch     (1967 - 2012)
                           hellbusch@2bweb.de     http://2bweb.de

Mais conteúdo relacionado

Destaque (18)

ESCUELA DE AGRICULTURA DEL NOR-ORIENTE
ESCUELA DE AGRICULTURA DEL NOR-ORIENTEESCUELA DE AGRICULTURA DEL NOR-ORIENTE
ESCUELA DE AGRICULTURA DEL NOR-ORIENTE
 
Enogastronomia - Alemanha
Enogastronomia - AlemanhaEnogastronomia - Alemanha
Enogastronomia - Alemanha
 
Los grupos-de-trabajo-como-generadores iiBloggerBlogspot
Los grupos-de-trabajo-como-generadores iiBloggerBlogspotLos grupos-de-trabajo-como-generadores iiBloggerBlogspot
Los grupos-de-trabajo-como-generadores iiBloggerBlogspot
 
evaluacion_excel
evaluacion_excelevaluacion_excel
evaluacion_excel
 
Producto de dos binomios con untérmino común
Producto de dos binomios con untérmino comúnProducto de dos binomios con untérmino común
Producto de dos binomios con untérmino común
 
BIENVENIDOS
BIENVENIDOSBIENVENIDOS
BIENVENIDOS
 
MOTION PICS
MOTION PICSMOTION PICS
MOTION PICS
 
Generadores eolicos
Generadores eolicosGeneradores eolicos
Generadores eolicos
 
Zertifizierungen 1
Zertifizierungen 1Zertifizierungen 1
Zertifizierungen 1
 
Bags kv 2012
Bags kv 2012Bags kv 2012
Bags kv 2012
 
Social Media mit Erfolgsgarantie!
Social Media mit Erfolgsgarantie!Social Media mit Erfolgsgarantie!
Social Media mit Erfolgsgarantie!
 
Nachhaltige Unternehmensentwicklung V2
Nachhaltige Unternehmensentwicklung V2Nachhaltige Unternehmensentwicklung V2
Nachhaltige Unternehmensentwicklung V2
 
entrevista
entrevistaentrevista
entrevista
 
Okw gehäusesysteme d
Okw gehäusesysteme dOkw gehäusesysteme d
Okw gehäusesysteme d
 
E82 zafac010 _application-io pt fif module__v5-0__de_en_fr
E82 zafac010 _application-io pt fif module__v5-0__de_en_frE82 zafac010 _application-io pt fif module__v5-0__de_en_fr
E82 zafac010 _application-io pt fif module__v5-0__de_en_fr
 
Presentación
PresentaciónPresentación
Presentación
 
Practica -Como guardar una imagen desde internet
Practica -Como guardar una imagen desde internetPractica -Como guardar una imagen desde internet
Practica -Como guardar una imagen desde internet
 
Business bavaria 03-2013_de
Business bavaria 03-2013_deBusiness bavaria 03-2013_de
Business bavaria 03-2013_de
 

Barrierefrei kommunizieren

  • 1. Besser Online 2012 - DJV 15. September 2012 Barrierefrei Kommunizieren Jan Eric Hellbusch © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 2. Besser Online 2012 - DJV 15. September 2012 In Deutschland gibt es eine Gesetzeslage • BITV 2.0: Verordnung zum Behindertengleichstellungsgesetz • Für Behörden des Bundes verpflichtend • Bezieht sich seit 2011 auf die Web Content Accessibility Guidelines 2.0 • Die Länder-BITVs - sofern vorhanden - beziehen sich auf WCAG 1.0 © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 3. Besser Online 2012 - DJV 15. September 2012 Maßgeblich sind Webstandards • Die Web Content Accessibility Guidelines (WCAG) 2.0 wurden in Dezember 2008 vom World Wide Web Consortium (W3C) als Webstandard veröffentlicht. • Ausrichtung an moderne Webtechniken. • Anforderungen (behinderter) Nutzer, aber auch der Webentwickler, Software-Hersteller und nicht zuletzt der Zertifizierer. • Grundlage für viele Gesetze weltweit. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 4. Besser Online 2012 - DJV 15. September 2012 Standardisierung in Europa Human Factors; European accessibility requirements for public procurement of ICT products and services •Mandate 376: Europäische Standards zur Zertifizierung der Barrierefreiheit • Richtlinien einschließlich WCAG 2.0 und Teile der ISO 9241 • Testanleitungen, Werkzeugkiste • Geplantes Inkrafttreten: Februar 2014 Weitere Informationen auf www.mandate376.eu. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 5. Besser Online 2012 - DJV 15. September 2012 Vergrößerungssysteme © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 6. Besser Online 2012 - DJV 15. September 2012 Vergrößerungsausschnitte Bei Vergrößerung wird immer nur eine Teilansicht dargestellt. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 7. Besser Online 2012 - DJV 15. September 2012 Benutzerdefinierte Farben © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 8. Besser Online 2012 - DJV 15. September 2012 Tasten, hören und schlecht sehen Es gibt unterschiedliche Ausgabe- und Eingabegeräte. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 9. Besser Online 2012 - DJV 15. September 2012 Wer Tastatur und Maus nicht nutzen kann, ... ... braucht eine Spezialmaus. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 10. Besser Online 2012 - DJV 15. September 2012 Computer mit Blindenhilfsmitteln Die Hilfsmittel: • Screenreader •Sprachausgabe • Braillezeile © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 11. Besser Online 2012 - DJV 15. September 2012 Thema Kontrast Helligkeitskontraste werden anhand eines Algorithmusses der WCAG 2.0 gemessen. Das Kontrastverhältnis kann zwischen 1:1 (kein Helligkeitsunterschied) und 21:1 (schwarz/weiß) liegen. • Konflikte: Corporate Design, grafisches Design • Minimales Kontrastverhältnis (AA): 4,5:1(normale Schrift) bzw. 3:1 ( große Schrift; Ausnahme Logos) © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 12. Besser Online 2012 - DJV 15. September 2012 Hintergrundgrafiken Hintergrundgrafiken werden im Kontrastmodus als Hintergrund behandelt; entsprechend werden sie im Kontrastmodus ausgeblendet. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 13. Besser Online 2012 - DJV 15. September 2012 Skalierbarkeit Im Mittelpunkt der WCAG-Anforderung steht die Textvergrößerung: • Alle Browser bieten eine Seitenzoom-Funktion • Besser nutzbar ist ein elastisches Layout, das auf die reine Schriftvergrößerung reagiert • Optimale Lösungen gibt es nicht; ein flüssiges Layout gilt nachwievor als Best-Practice © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 14. Besser Online 2012 - DJV 15. September 2012 Seitenzoom © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 15. Besser Online 2012 - DJV 15. September 2012 Strukturen in HTML Mit HTML 4 geht es im Inhalt im Wesentlichen um 1. Überschriften 2. Listen 3. Absätze 4. Datentabellen Technisch ist der richtige Einsatz das Handwerk, das jeder beherrschen muss. Es kann aber nicht alles mit diesen Elementen abgebildet werden. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 16. Besser Online 2012 - DJV 15. September 2012 Alternativtexte für Bilder Die Formulierung von Alternativtexten für Grafiken hängt von vielen Faktoren ab, etwa Kontext des Bildes. Es ist eine eigene "Kunst". • Schriftgrafiken: Abgebildeter Text im alt-Attribut • Layout-Elemente: Leeres alt-Attribut oder per CSS einbinden • Fotos: eine kurze Beschriftung oder Identifikation • Schaubilder: Identifikation und entweder eine lange Beschreibung oder Hinweis auf Kontext • Verlinkte Grafiken: Etwas über das Linkziel © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 17. Besser Online 2012 - DJV 15. September 2012 Tastaturbedienung Screenreader-Nutzer verwenden meist die strukturelle Navigation des Screenreaders. Vor allem für sehende Tastaturnutzer müssen Webseiten bedienbar bleiben. • Bedienung mit der Tab-Taste muss gewährleistet werden: 1. Links und Steuerelemente (<a href> statt <span>) 2. Reihenfolge folgt Quellcode (tabindex vermeiden) © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 18. Besser Online 2012 - DJV 15. September 2012 Sichtbarer Fokus Der Fokus muss immer sichtbar bleiben. © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 19. Besser Online 2012 - DJV 15. September 2012 Schreckgespenst PDF Portable Document Format müssen auch barrierefrei sein: • Strukturen wie in HTML • Voraussetzung: Formatvorlagen korrekt einsetzen • Ab Microsoft Word 2010 „out of the box“ möglich • Hilfreiche Plugins: AxesPDF (Word) und „Made to tag“ (Indesign) • Nacharbeit in Adobe ist unverhältnismäßig teuer © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de
  • 20. Besser Online 2012 - DJV 15. September 2012 Ende der Folien © Jan Eric Hellbusch (1967 - 2012) hellbusch@2bweb.de http://2bweb.de