# Inclusive Javascript

 # Robert Weber Freier Frontend-Entwickler aus Brandenburg [@closingtag](https://twitter.com/@closingtag)

# Inclusive Design <ul><li class="fragment">Universal Design</li><li class="fragment">Design für Alle</li></ul>

# Barrierefreiheit <p class="fragment">Was ist der Unterschied zwischen Inlcusive Design und Barrierefreiheit?</p>

> 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?_](https://24ways.org/2016/what-the-heck-is-inclusive-design/)

# Designprinzipien <ul> <li class="fragment">Eine vergleichbare Erfahrung zur Verfügung stellen.</li> <li class="fragment">Betrachten der Situation</li> <li class="fragment">Konsistent sein</li> <li class="fragment">Kontrolle überlassen</li> <li class="fragment">Auswahlmöglichkeiten</li> <li class="fragment">Inhalt priorisieren</li> <li class="fragment">Mehrwert</li> </ul>


> 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_](https://developer.paciellogroup.com/blog/2017/06/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_](https://www.w3.org/TR/using-aria/#rule1)

## Datalist <ul> <li class="fragment">`<input/>` mit `list`-Attribut</li> <li class="fragment">`<datalist/>`</li> </ul>



# Tastaturinteraktion

## Textbox <ul> <li class="fragment">IE11 öffnet das PopUp bei ↓ nur wenn schon eine Eingabe gemacht wurde</li> <li class="fragment">IE 11 und Egde unterstützen den ↑ (optional) nicht</li> <li class="fragment">Safari öffnet das PopUp erst nach einer Eingabe</li> </ul> Note: - IE11: Allerdings beim ersten Fokus

## Listbox <ul> <li class="fragment">FireFox schliesst das PopUp bei →/←</li> <li class="fragment">Chrome, Safari, FireFox beginnen bei ↑/↓ wieder beim ersten/letzten Element</li> <li class="fragment">FireFox macOS kann Home/End nicht</li> <li class="fragment">Bei FireFox Win10, Chrome, IE11 und Edge hat Home/End keine Auswirkung auf das PopUp</li> </ul>

# Screen-Reader

## Voice-Over macOS <ul> <li class="fragment">Chrome und Safari: Meldet nicht, dass Datenlistelmente vorhanden sind oder angezeigt werden</li> <li class="fragment">Safari: Listeneinträge werden nicht vorgelesen wenn mit der Tastatur angewählt werden</li> <li class="fragment">FireFox funktioniert gar nicht</li> </ul>

## NVDA Windows10 <ul> <li class="fragment">IE11, Edge, Firefox und Chrome: Meldet nicht, dass Datenlistelmente vorhanden sind oder angezeigt werden</li> <li class="fragment">IE11: Gibt die Rolle nicht an</li> <li class="fragment">IE11 und Edge: Beim anwählen der Optionen wird der Inhalt der Textbox vorgelesen</li> <li class="fragment">Chrome: Gibt die Rolle der Listenbox nicht korrekt wieder (Anzahl der möglichen Optionen fehlt)</li> <li class="fragment">Beste Kombination: Windows Narrator + Edge</li> </ul>

# Inclusive Javascript <ul> <li class="fragment">Unterschiede zwischen Aria 1.0 und Aria 1.1</li> <li class="fragment"><code>aria-autocomplete</code></li> </ul>

# Module <ul> <li class="fragment"><code>listbox</code></li> <li class="fragment"><code>combobox</code></li> </ul>


# Listbox












# Combobox













# Danke [Demo](http://closingtag.org/talks/ctwebdev/demo/combobox.html)