1. ARIA design patterns When UX meets a11y by @goetsu Funka Accessibility Day 2016

2. I speak anglais very bien 2

3. Back in the past : DHTML 3

4. Software world 4

5. 5

6. Section 508 6

7. ARIA to the rescue 7

8. Understanding : Role, state and property 8

9. RTFM 9

10. Design patterns Accordion Alert Alert Dialog or Message Dialog Auto Complete Button Checkbox Combo Box Date Picker Dialog (Modal) Dialog (Non-Modal) Dialog (Tooltip) Grid (Simple Data Tables) Actionable, Sortable Column Header in a Grid Landmark Navigation Link Listbox Media Player Menu or Menu bar Menu Button Popup Help (aka Bubble Help) Radio Group Rich Text Editor Site Navigator – General Site Navigator – Tree Site Navigator - Tabbed Style Slider Slider (Multi-Thumb) Spinbutton Tab Panel Toolbar Tooltip Widget Tree Grid Tree View Window Splitter Wizard https://w3c.github.io/aria/practices/aria-practices.html 10

11. Dialog (modal) 11

12. Advantages for your project 12

13. Advantages for users 13

14. Your web site in 2016 14

15. Design patterns in 2016 15

16. Design patterns for users ?? 16

17. Let’s have a look http://a11y.nicolas-hoffmann.net/tabs/ VS http://s.codepen.io/goetsu/debug/NNaKwX 17

18. Time to make a choice 18

19. Questions ? aurelien.levy@temesis.com @goetsu 19

20. Credits P2 : Paris 16 (cc-by-sa)Paris 16 P4 : Moriline (cc-by-sa)Moriline P5 : GNOME icon artists (cc-by-sa)GNOME icon artists P6 : FEMA Photo LibraryFEMA Photo Library P7 : Fritz Saalfeld (cc-by-sa) / McDonald’sFritz Saalfeld P8 : James Lee (cc-by) / IKEAJames Lee P11 : Lisa Yarost (cc-by)Lisa Yarost P12 : Princess and Princes (cc-by) / DisneyPrincess and Princes P13 : Stéphanie Walter (cc-by-sa)Stéphanie Walter P14 : OverlordQOverlordQ P15 : Kotivalo (cc-by)Kotivalo P16 : Paul L Dineen (cc-by) / MatrixPaul L Dineen 20