SlideShare ist ein Scribd-Unternehmen logo
1 von 20
WIE BARRIEREFREI IST MEINE
WEBSITE?
Ein Vortrag auf der Republica 2017
Domingos de Oliveira
Darum geht es
 warum ihr testen solltet
 Wie ihr testen könnt
 Was ihr testen solltet
2
www.netz-barrierefrei.de
Warum testen?
 Auch die erfahrenste Agentur
macht Fehler.
 Für einen Relaunch braucht ihr
eine Info dazu, wie ihr derzeit
steht.
 Bei Beschwerden von
Behinderten solltet ihr
kompetent helfen können. Das
könnt ihr nur, wenn ihr die
gemeldeten Probleme
überprüfen könnt.
3
www.netz-barrierefrei.de
Prüfmöglichkeiten
4
 Automatische Prüftools bieten eine 1-Klick-Prüfung an. Um die
Ergebnisse zu verstehen, braucht man das entsprechende Know How.
 Expertentests können von Barrierefreiheits-Experten durchgeführt
werden. Sie kosten in der Regel viel Geld.
 Betroffenen-Tests zeigen Probleme in der Praxis. Sie sind aufwendig
zu organisieren und zeigen vielleicht nicht alle Probleme auf.
 Manuelle Tests könnt ihr selbst durchführen. Über diese sprechen wir
jetzt.
www.netz-barrierefrei.de
Selber testen5
www.netz-barrierefrei.de
Verschiedene Test-Methoden
 Tests sollten immer systematisch
nach einer bestimmten Methodik
erfolgen.
 Gängig in Deutschland ist der
BITV-Test. Er bietet eine Schritt-
für-Schritt-Anleitung.
 Es gibt viele weitere Checklisten
teils auch für spezielle Bereiche
wie Anwendungen und
Formulare.
6
www.netz-barrierefrei.de
BITV-Test
 Ein gängiges Testverfahren in
Deutschland ist der BITV-Test.
 Er erklärt Schritt für Schritt, was,
wie und warum getestet wird.
 Er basiert auf der BITV 2.0 und
testet vor allem die
Anforderungen
Körperbehinderter. Geistig und
kognitiv Behinderte stehen nicht
im Mittelpunkt.
7
www.netz-barrierefrei.de
Was ihr testen solltet8
www.netz-barrierefrei.de
Tastaturbedienbarkeit
 Die Website sollte nur mit
Tastatur bedienbar sein.
 Blinde, Sehbehinderte und
motorisch behinderte
bewegen sich ausschließlich
mit der Tastatur durch die
Website.
9
www.netz-barrierefrei.de
So wird’s geprüft
 Mit Tab bewegt ihr euch durch
anklickbare Elemente.
 Mit der Leertaste aktiviert ihr
Checkboxen und Radio-Buttons.
 Mit Return aktiviert ihr Links
oder schickt Formulare ab.
 Achtet vor allem auf dynamische
Elemente wie ausklappende
Menüs, Formulare und andere
interaktive Elemente.
 Der Prüfschritt im BITV-Test.
10
www.netz-barrierefrei.de
So wird’s geprüft
 Um den Alternativtext zu
prüfen, ruft in der Web
Accessibility Toolbar unter
„Images“ „Show Images“ auf.
 Der Alternativtext wird neben
oder über dem Bild angezeigt.
 Der Prüfschritt im BITV-Test.
12
www.netz-barrierefrei.de
Formular-Elemente klar benannt
 Alle Bestandteile eines
Formulars brauchen ein Label.
Das ist eine für die
Hilfssoftware von Blinden
auslesbare Beschreibung.
 Über ARIA oder HTML5 lassen
sich Informationen
hinterlegen: Für Blinde ist z.B.
wichtig, ob es ein Pflichtfeld
oder eine valide Eingabe ist.
13
www.netz-barrierefrei.de
Labels: so wird es geprüft
 Klickt mit der Maus auf die
Beschriftung des Formular-
Elements.
 Der Cursor sollte in das
Eingabefeld des Formulars
springen.
 Der Prüfschritt im BITV-Test.
14
www.netz-barrierefrei.de
Seite strukturiert
 Einzelne Bereiche einer
Webseite sind über HTML-
Überschriften oder ARIA-
Orientierungspunkte
erreichbar. Dazu gehören Navi,
Inhaltsbereich, Footer…
15
www.netz-barrierefrei.de
So wird’s geprüft
 Wählt in der Web Accessibility
Toolbar unter „Structure“ den
Punkt „Heading Structure“. In
der Liste solltet ihr alle
wichtigen Bereiche der
Website sehen.
 Im gleichen Menü könnt ihr die
„Aria Landmark Roles“ prüfen.
 Der Prüfschritt im BITV-Test.
16
www.netz-barrierefrei.de
Fehlermanagement
 Macht eine falsche Eingabe in
euer Formular.
 Bei Fehleingaben gibt es klare
Hinweise auf die Fehlerstelle.
 Es wird eindeutig gezeigt, wie
der Fehler behoben werden
kann.
 Keine Hilfsmittel erforderlich.
17
www.netz-barrierefrei.de
Dynamik
 Alles Dynamische sollte mit
Tastatur und Screenreader
geprüft werden: Funktionieren
modale Dialoge? Lassen sie sich
per Tastatur schließen? Ist der
Screenreader jeweils auf der
richtigen Ebene?
 Den Screenreader habt ihr in
eurem Smartphone. Eine
Testanleitung findet ihr bei
YouTube.
18
www.netz-barrierefrei.de
Kontrast
 Der Kontrast-Analyser zeigt
euch, ob eure Inhalte
ausreichend Kontrast haben.
 Wichtig ist der Kontrast von
Fließtext, von Links und
anderen Bedienelementen.
19
www.netz-barrierefrei.de
So wird’s geprüft
 Ein Testtool ist der kostenlose
Colour Contrast Analyser.
 Die Farbwerte können selbst
eingegeben werden. Es kann
aber auch ein Color Picker
verwendet werden.
 BITV-Prüfung von Text-
Kontrast.
 BITV-Prüfschritt zu Kontrasten
von Grafiken.
20
www.netz-barrierefrei.de
Dann testet mal los!
Danke für Eure Aufmerksamkeit21
www.netz-barrierefrei.de

Weitere ähnliche Inhalte

Ähnlich wie Wie barrierefrei ist meine website? Ein Vortrag für die republica 2017

eStrategy Magazin Ausgabe 01 / 2014
eStrategy Magazin Ausgabe 01 / 2014eStrategy Magazin Ausgabe 01 / 2014
eStrategy Magazin Ausgabe 01 / 2014TechDivision GmbH
 
Web Analytics Workshop
Web Analytics WorkshopWeb Analytics Workshop
Web Analytics WorkshopRalf Haberich
 
GanttChart for ClearQuest Installationsanleitung
GanttChart for ClearQuest InstallationsanleitungGanttChart for ClearQuest Installationsanleitung
GanttChart for ClearQuest InstallationsanleitungAlexander Novichkov
 
Netbreeze tweetakademie 120411
Netbreeze tweetakademie 120411Netbreeze tweetakademie 120411
Netbreeze tweetakademie 120411Michael Gebert
 
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas Berth
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas BerthWerbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas Berth
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas BerthWerbeplanung.at Summit
 
Von-uns-Helden - How To Analyse - Teil 1
Von-uns-Helden - How To Analyse - Teil 1Von-uns-Helden - How To Analyse - Teil 1
Von-uns-Helden - How To Analyse - Teil 1ciaomarcod
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
 
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des Redesigns
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des RedesignsONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des Redesigns
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des RedesignsINM AG
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozJohn Muñoz
 
Erfolgsfaktor Bestellprozess
Erfolgsfaktor BestellprozessErfolgsfaktor Bestellprozess
Erfolgsfaktor BestellprozessElskeL
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentralePatric Schmid
 
Datenanalysen in der Softwareentwicklung mit Software Analytics
Datenanalysen in der Softwareentwicklung mit Software AnalyticsDatenanalysen in der Softwareentwicklung mit Software Analytics
Datenanalysen in der Softwareentwicklung mit Software AnalyticsMarkus Harrer
 
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...e-dialog GmbH
 
Leseprobe eStrategy Magazin Ausgabe 02-2016
Leseprobe eStrategy Magazin Ausgabe 02-2016Leseprobe eStrategy Magazin Ausgabe 02-2016
Leseprobe eStrategy Magazin Ausgabe 02-2016TechDivision GmbH
 
DMEXCO 2010: Usability als neuer Rankingfaktor?!
DMEXCO 2010: Usability als neuer Rankingfaktor?!DMEXCO 2010: Usability als neuer Rankingfaktor?!
DMEXCO 2010: Usability als neuer Rankingfaktor?!Steven Broschart
 

Ähnlich wie Wie barrierefrei ist meine website? Ein Vortrag für die republica 2017 (18)

Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!
 
eStrategy Magazin Ausgabe 01 / 2014
eStrategy Magazin Ausgabe 01 / 2014eStrategy Magazin Ausgabe 01 / 2014
eStrategy Magazin Ausgabe 01 / 2014
 
Web Analytics Workshop
Web Analytics WorkshopWeb Analytics Workshop
Web Analytics Workshop
 
GanttChart for ClearQuest Installationsanleitung
GanttChart for ClearQuest InstallationsanleitungGanttChart for ClearQuest Installationsanleitung
GanttChart for ClearQuest Installationsanleitung
 
Netbreeze tweetakademie 120411
Netbreeze tweetakademie 120411Netbreeze tweetakademie 120411
Netbreeze tweetakademie 120411
 
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas Berth
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas BerthWerbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas Berth
Werbeplanung.at SUMMIT 15 - Conversion Optimierung in Echtzeit - Andreas Berth
 
Von-uns-Helden - How To Analyse - Teil 1
Von-uns-Helden - How To Analyse - Teil 1Von-uns-Helden - How To Analyse - Teil 1
Von-uns-Helden - How To Analyse - Teil 1
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des Redesigns
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des RedesignsONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des Redesigns
ONE Konferenz 2013: Analytics, ERP und CRM-Daten als Grundlagen des Redesigns
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
eStrategy Magazin 03 / 2014
eStrategy Magazin 03 / 2014eStrategy Magazin 03 / 2014
eStrategy Magazin 03 / 2014
 
Erfolgsfaktor Bestellprozess
Erfolgsfaktor BestellprozessErfolgsfaktor Bestellprozess
Erfolgsfaktor Bestellprozess
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
 
Datenanalysen in der Softwareentwicklung mit Software Analytics
Datenanalysen in der Softwareentwicklung mit Software AnalyticsDatenanalysen in der Softwareentwicklung mit Software Analytics
Datenanalysen in der Softwareentwicklung mit Software Analytics
 
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...
ProgrammatiCon 2019 - Content Marketing skalierbar machen - Kurier - Stephani...
 
Leseprobe eStrategy Magazin Ausgabe 02-2016
Leseprobe eStrategy Magazin Ausgabe 02-2016Leseprobe eStrategy Magazin Ausgabe 02-2016
Leseprobe eStrategy Magazin Ausgabe 02-2016
 
DMEXCO 2010: Usability als neuer Rankingfaktor?!
DMEXCO 2010: Usability als neuer Rankingfaktor?!DMEXCO 2010: Usability als neuer Rankingfaktor?!
DMEXCO 2010: Usability als neuer Rankingfaktor?!
 

Mehr von Domingos de Oliveira

Als Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine EinführungAls Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine EinführungDomingos de Oliveira
 
Meine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werdenMeine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werdenDomingos de Oliveira
 
Mein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werdenMein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werdenDomingos de Oliveira
 
Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0Domingos de Oliveira
 
Barrierefreie lehr und lernmaterialien
Barrierefreie lehr  und lernmaterialienBarrierefreie lehr  und lernmaterialien
Barrierefreie lehr und lernmaterialienDomingos de Oliveira
 
Barrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiertBarrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiertDomingos de Oliveira
 
Crashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheitCrashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheitDomingos de Oliveira
 
Barrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und ToolsBarrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und ToolsDomingos de Oliveira
 
Screenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDAScreenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDADomingos de Oliveira
 
Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?Domingos de Oliveira
 
Corporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheitCorporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheitDomingos de Oliveira
 
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzenGraswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzenDomingos de Oliveira
 

Mehr von Domingos de Oliveira (20)

Als Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine EinführungAls Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine Einführung
 
Meine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werdenMeine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werden
 
Mein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werdenMein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werden
 
Was bedeutet blindheit
Was bedeutet blindheitWas bedeutet blindheit
Was bedeutet blindheit
 
Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0
 
Barrierefreie lehr und lernmaterialien
Barrierefreie lehr  und lernmaterialienBarrierefreie lehr  und lernmaterialien
Barrierefreie lehr und lernmaterialien
 
Einfach barrierefrei
Einfach barrierefreiEinfach barrierefrei
Einfach barrierefrei
 
Behinderte im Storytelling
Behinderte im StorytellingBehinderte im Storytelling
Behinderte im Storytelling
 
Barrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiertBarrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiert
 
Crashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheitCrashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheit
 
Barrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und ToolsBarrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und Tools
 
Barrierefreie dokumente
Barrierefreie dokumenteBarrierefreie dokumente
Barrierefreie dokumente
 
Barrierefreiheit im newsletter
Barrierefreiheit im newsletterBarrierefreiheit im newsletter
Barrierefreiheit im newsletter
 
Barrierefreiheit in eBooks
Barrierefreiheit in eBooksBarrierefreiheit in eBooks
Barrierefreiheit in eBooks
 
Screenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDAScreenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDA
 
Grassroots accessibility
Grassroots accessibilityGrassroots accessibility
Grassroots accessibility
 
Semantik im web
Semantik im webSemantik im web
Semantik im web
 
Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?
 
Corporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheitCorporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheit
 
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzenGraswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
 

Wie barrierefrei ist meine website? Ein Vortrag für die republica 2017

  • 1. WIE BARRIEREFREI IST MEINE WEBSITE? Ein Vortrag auf der Republica 2017 Domingos de Oliveira
  • 2. Darum geht es  warum ihr testen solltet  Wie ihr testen könnt  Was ihr testen solltet 2 www.netz-barrierefrei.de
  • 3. Warum testen?  Auch die erfahrenste Agentur macht Fehler.  Für einen Relaunch braucht ihr eine Info dazu, wie ihr derzeit steht.  Bei Beschwerden von Behinderten solltet ihr kompetent helfen können. Das könnt ihr nur, wenn ihr die gemeldeten Probleme überprüfen könnt. 3 www.netz-barrierefrei.de
  • 4. Prüfmöglichkeiten 4  Automatische Prüftools bieten eine 1-Klick-Prüfung an. Um die Ergebnisse zu verstehen, braucht man das entsprechende Know How.  Expertentests können von Barrierefreiheits-Experten durchgeführt werden. Sie kosten in der Regel viel Geld.  Betroffenen-Tests zeigen Probleme in der Praxis. Sie sind aufwendig zu organisieren und zeigen vielleicht nicht alle Probleme auf.  Manuelle Tests könnt ihr selbst durchführen. Über diese sprechen wir jetzt. www.netz-barrierefrei.de
  • 6. Verschiedene Test-Methoden  Tests sollten immer systematisch nach einer bestimmten Methodik erfolgen.  Gängig in Deutschland ist der BITV-Test. Er bietet eine Schritt- für-Schritt-Anleitung.  Es gibt viele weitere Checklisten teils auch für spezielle Bereiche wie Anwendungen und Formulare. 6 www.netz-barrierefrei.de
  • 7. BITV-Test  Ein gängiges Testverfahren in Deutschland ist der BITV-Test.  Er erklärt Schritt für Schritt, was, wie und warum getestet wird.  Er basiert auf der BITV 2.0 und testet vor allem die Anforderungen Körperbehinderter. Geistig und kognitiv Behinderte stehen nicht im Mittelpunkt. 7 www.netz-barrierefrei.de
  • 8. Was ihr testen solltet8 www.netz-barrierefrei.de
  • 9. Tastaturbedienbarkeit  Die Website sollte nur mit Tastatur bedienbar sein.  Blinde, Sehbehinderte und motorisch behinderte bewegen sich ausschließlich mit der Tastatur durch die Website. 9 www.netz-barrierefrei.de
  • 10. So wird’s geprüft  Mit Tab bewegt ihr euch durch anklickbare Elemente.  Mit der Leertaste aktiviert ihr Checkboxen und Radio-Buttons.  Mit Return aktiviert ihr Links oder schickt Formulare ab.  Achtet vor allem auf dynamische Elemente wie ausklappende Menüs, Formulare und andere interaktive Elemente.  Der Prüfschritt im BITV-Test. 10 www.netz-barrierefrei.de
  • 11. So wird’s geprüft  Um den Alternativtext zu prüfen, ruft in der Web Accessibility Toolbar unter „Images“ „Show Images“ auf.  Der Alternativtext wird neben oder über dem Bild angezeigt.  Der Prüfschritt im BITV-Test. 12 www.netz-barrierefrei.de
  • 12. Formular-Elemente klar benannt  Alle Bestandteile eines Formulars brauchen ein Label. Das ist eine für die Hilfssoftware von Blinden auslesbare Beschreibung.  Über ARIA oder HTML5 lassen sich Informationen hinterlegen: Für Blinde ist z.B. wichtig, ob es ein Pflichtfeld oder eine valide Eingabe ist. 13 www.netz-barrierefrei.de
  • 13. Labels: so wird es geprüft  Klickt mit der Maus auf die Beschriftung des Formular- Elements.  Der Cursor sollte in das Eingabefeld des Formulars springen.  Der Prüfschritt im BITV-Test. 14 www.netz-barrierefrei.de
  • 14. Seite strukturiert  Einzelne Bereiche einer Webseite sind über HTML- Überschriften oder ARIA- Orientierungspunkte erreichbar. Dazu gehören Navi, Inhaltsbereich, Footer… 15 www.netz-barrierefrei.de
  • 15. So wird’s geprüft  Wählt in der Web Accessibility Toolbar unter „Structure“ den Punkt „Heading Structure“. In der Liste solltet ihr alle wichtigen Bereiche der Website sehen.  Im gleichen Menü könnt ihr die „Aria Landmark Roles“ prüfen.  Der Prüfschritt im BITV-Test. 16 www.netz-barrierefrei.de
  • 16. Fehlermanagement  Macht eine falsche Eingabe in euer Formular.  Bei Fehleingaben gibt es klare Hinweise auf die Fehlerstelle.  Es wird eindeutig gezeigt, wie der Fehler behoben werden kann.  Keine Hilfsmittel erforderlich. 17 www.netz-barrierefrei.de
  • 17. Dynamik  Alles Dynamische sollte mit Tastatur und Screenreader geprüft werden: Funktionieren modale Dialoge? Lassen sie sich per Tastatur schließen? Ist der Screenreader jeweils auf der richtigen Ebene?  Den Screenreader habt ihr in eurem Smartphone. Eine Testanleitung findet ihr bei YouTube. 18 www.netz-barrierefrei.de
  • 18. Kontrast  Der Kontrast-Analyser zeigt euch, ob eure Inhalte ausreichend Kontrast haben.  Wichtig ist der Kontrast von Fließtext, von Links und anderen Bedienelementen. 19 www.netz-barrierefrei.de
  • 19. So wird’s geprüft  Ein Testtool ist der kostenlose Colour Contrast Analyser.  Die Farbwerte können selbst eingegeben werden. Es kann aber auch ein Color Picker verwendet werden.  BITV-Prüfung von Text- Kontrast.  BITV-Prüfschritt zu Kontrasten von Grafiken. 20 www.netz-barrierefrei.de
  • 20. Dann testet mal los! Danke für Eure Aufmerksamkeit21 www.netz-barrierefrei.de