Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

266 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

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”)

×