When UX meets a11y by goetsu Funka Accessibility D ay 2016 I speak anglais very bien 2 Back in the past DHTML 3 Software world 4 Software world 5 Section 508 ID: 569395
Download Presentation The PPT/PDF document "ARIA design patterns" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
ARIA design patterns
When UX meets a11y by @goetsu
Funka
Accessibility
D
ay 2016Slide2
I speak anglais very bien
2Slide3
Back in the past : DHTML
3Slide4
Software world
4Slide5
Software world
5Slide6
Section 508
6Slide7
ARIA to the rescue
7Slide8
Understanding : Role,
state and property8Slide9
RTFM
9Slide10
Design patterns
AccordionAlertAlert Dialog or Message DialogAuto CompleteButtonCheckboxCombo BoxDate PickerDialog (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
GroupRich Text Editor
Site Navigator – GeneralSite Navigator – TreeSite Navigator - Tabbed StyleSliderSlider (Multi-Thumb)SpinbuttonTab PanelToolbarTooltip WidgetTree GridTree ViewWindow SplitterWizard
https://w3c.github.io/aria/practices/aria-practices.html
10Slide11
Dialog (modal)
11Slide12
Advantages for your project
12Slide13
Advantages for users
13Slide14
Your web site in 2016
14Slide15
Design patterns in 2016
15Slide16
Design patterns for users
??16Slide17
Let’s have a look
http://a11y.nicolas-hoffmann.net/tabs/ VShttp://s.codepen.io/goetsu/debug/NNaKwX
17Slide18
Time to make a choice
18Slide19
Questions ?
aurelien.levy@temesis.com@goetsu 19Slide20
Credits
P2 : Paris 16 (cc-by-sa)P4 : Moriline (cc-by-sa)P5 : GNOME icon artists (cc-by-sa)P6 : FEMA Photo LibraryP7 : Fritz Saalfeld (cc-by-sa) / McDonald’sP8 : James Lee (cc-by) / IKEAP11 : Lisa Yarost (cc-by)P12 :
Princess and
Princes
(cc-
by) /
D
isney
P13 :
Stéphanie
Walter
(cc-by-sa)
P14 :
OverlordQ
P15 :
Kotivalo
(cc-by)
P16 :
Paul L Dineen
(cc-
by) / Matrix
20