Barrierefreiheit
bei Webseiten
Die Zielgruppe
● Personen mit einer Sehbehinderung
(hauptsächlich Farbenblindheit)
-> Konzept / Design
● Blinde Personen
-...
Problem
Blinde können nichts sehen!
● Unterschied Hauptnavigation /
Subnavigation
● Struktur des Inhalts
● Popups werden n...
Grundsätzliches
Standard HTML ist semantisch (H1, a, button,
ul/li).
Mit rich content und jQuery dient die Semantik
oft nu...
HTML 5 Semantik
HTML5 hat noch mehr Elemente als HTML4:
● <article>
● <input required type=”email”>
● <nav>
● <aside>
Zust...
WAI-ARIA Roles
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="t...
Struktur
● Überschriften-Hierarchie muss eingehalten
werden.
● Versteckte Titel, welche Elementgruppen
benennen.<h2 class=...
Popups
Blinde erkennen nicht, wann sich ein Popup /
Menu / Tab öffnet.
● Aria Roles verwenden.
● Tastatur-Focus in das Pop...
Tastaturnavigation
Die Komplette Webseite muss mit der Tastatur
navigierbar sein
● tabindex verwenden. Damit wird die Reih...
Hotspots
● Hotspots grundsätzlich mit Fokussierbaren
Elementen erstellen (button, a).
● Unwichtige Elemente aktiv aus der
...
Nächste SlideShare
Wird geladen in …5
×

Barrierefreie Webseiten

234 Aufrufe

Veröffentlicht am

Warum und wie man Webseiten für sehbehinderte und blinde Besucher optimieren kann.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
234
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Barrierefreie Webseiten

  1. 1. Barrierefreiheit bei Webseiten
  2. 2. Die Zielgruppe ● Personen mit einer Sehbehinderung (hauptsächlich Farbenblindheit) -> Konzept / Design ● Blinde Personen -> Frontend Umsetzung
  3. 3. Problem Blinde können nichts sehen! ● Unterschied Hauptnavigation / Subnavigation ● Struktur des Inhalts ● Popups werden nicht erkannt ● Blinde benutzen keine Maus ● Hotspots werden nicht erkannt.
  4. 4. Grundsätzliches Standard HTML ist semantisch (H1, a, button, ul/li). Mit rich content und jQuery dient die Semantik oft nur noch als Basis für Styling. Auch ein <p> kann eine Aktion auslösen. -> Semantik wieder einführen und durchziehen
  5. 5. HTML 5 Semantik HTML5 hat noch mehr Elemente als HTML4: ● <article> ● <input required type=”email”> ● <nav> ● <aside> Zustände und Verhalten können aber nicht dargestellt werden.
  6. 6. WAI-ARIA Roles <ul role="menubar"> <!-- Rule 2A: "File" label via aria-labelledby --> <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"> <span id="fileLabel">File</span> <ul role="menu"> <!-- Rule 2C: "New" label via Namefrom:contents --> <li role="menuitem">New</li> <li role="menuitem">Open…</li> … </ul> </li> …</ul>
  7. 7. Struktur ● Überschriften-Hierarchie muss eingehalten werden. ● Versteckte Titel, welche Elementgruppen benennen.<h2 class="reader-only" id="navigation">Hauptnavigation</h2> ● title und alt-Attribute verwenden.
  8. 8. Popups Blinde erkennen nicht, wann sich ein Popup / Menu / Tab öffnet. ● Aria Roles verwenden. ● Tastatur-Focus in das Popup (per Javascript) ● Hintergrund-Element als unsichtbar markieren. (aria-hidden=”true”)
  9. 9. Tastaturnavigation Die Komplette Webseite muss mit der Tastatur navigierbar sein ● tabindex verwenden. Damit wird die Reihenfolge gesteuert. Mit tabindex=0 bekommen auch Elemente, die normalerweise keinen Focus erhalten (z.B. <p>) einen Focus. ● :focus State definieren, z.B. durch Unterstreichen. ● Komplexe Navigationen und Aufklapp-Elemente besonders behandeln.
  10. 10. Hotspots ● Hotspots grundsätzlich mit Fokussierbaren Elementen erstellen (button, a). ● Unwichtige Elemente aktiv aus der Tastaturnavigation entfernen (tabindex=”-1”)

×