Robert Weber

Freier Frontend-Entwickler aus Brandenburg

@closingtag

Inclusive Design

• Universal Design
• Design für Alle

Barrierefreiheit

Was ist der Unterschied zwischen Inlcusive Design und Barrierefreiheit?

Access is important, but inclusion is bigger than access. Inclusive design means making something valuable, not just accessible, to as many people as we can.

– Heydon Pickering, What the Heck Is Inclusive Design?

Designprinzipien

• Eine vergleichbare Erfahrung zur Verfügung stellen.
• Betrachten der Situation
• Konsistent sein
• Kontrolle überlassen
• Auswahlmöglichkeiten
• Inhalt priorisieren
• Mehrwert

Inclusive design does not need be a constraint. It’s the opposite; inclusive design is innovation and creatively.

– Henny Swan, The Paciello Group, Inclusive Design Principles

Combobox

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

– W3C, Using Aria, First Rule of Aria Use

Datalist

• <input/> mit list-Attribut
• <datalist/>

Tastaturinteraktion

Textbox

• IE11 öffnet das PopUp bei ↓ nur wenn schon eine Eingabe gemacht wurde
• IE 11 und Egde unterstützen den ↑ (optional) nicht
• Safari öffnet das PopUp erst nach einer Eingabe

Listbox

• FireFox schliesst das PopUp bei →/←
• Chrome, Safari, FireFox beginnen bei ↑/↓ wieder beim ersten/letzten Element
• FireFox macOS kann Home/End nicht
• Bei FireFox Win10, Chrome, IE11 und Edge hat Home/End keine Auswirkung auf das PopUp

Screen-Reader

Voice-Over macOS

• Chrome und Safari: Meldet nicht, dass Datenlistelmente vorhanden sind oder angezeigt werden
• Safari: Listeneinträge werden nicht vorgelesen wenn mit der Tastatur angewählt werden
• FireFox funktioniert gar nicht

NVDA Windows10

• IE11, Edge, Firefox und Chrome: Meldet nicht, dass Datenlistelmente vorhanden sind oder angezeigt werden
• IE11: Gibt die Rolle nicht an
• IE11 und Edge: Beim anwählen der Optionen wird der Inhalt der Textbox vorgelesen
• Chrome: Gibt die Rolle der Listenbox nicht korrekt wieder (Anzahl der möglichen Optionen fehlt)
• Beste Kombination: Windows Narrator + Edge

Inclusive Javascript

• Unterschiede zwischen Aria 1.0 und Aria 1.1
• aria-autocomplete

Module

• listbox
• combobox

Listbox

Combobox

Danke

Demo