/
ARIA design patterns ARIA design patterns

ARIA design patterns - PowerPoint Presentation

alexa-scheidler
alexa-scheidler . @alexa-scheidler
Follow
398 views
Uploaded On 2017-07-12

ARIA design patterns - PPT Presentation

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

patterns design aria dialog design patterns dialog aria modal goetsu navigator 2016 practices users http world software site advantages

Share:

Link:

Embed:


Presentation Transcript

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