Access All Areas @ Metarefresh Bangalore 2016

M E TA R E F R E S H • B A N G A L O R E • 1 7 S E P T E M B E R 2 0 1 6

Equitable

EquitableFlexible

EquitableFlexible

Simple and intuitive

EquitableFlexible

Simple and intuitivePerceptible

EquitableFlexible

Simple and intuitivePerceptible

Tolerant

EquitableFlexible

Simple and intuitivePerceptible

TolerantLow effort

EquitableFlexible

Simple and intuitivePerceptible

TolerantLow effort

Right size and space

http://cliener.tumblr.com/

http://jltiui.azurewebsites.net/

No Dependencies

ARIA Roles

.g-tab__tab { …}

.g-tab__tab--selected { …}

.g-tab__tab { …}

.g-tab__tab[aria-selected="true"] { …}

associatedTab.parentElement. setAttribute("aria-selected", "true");

[aria-hidden="true"] { display: none;}

.class-name[aria-hidden="true"] { display: none;}

https://goo.gl/3jbVtB

https://goo.gl/wk2vGf

https://goo.gl/qBDe25

https://goo.gl/kQKGPG

Make It Obvious

Make It Obvious

Make It Obvious

Make It Obvious

https://goo.gl/1x7kPW

https://goo.gl/2n5KiR

http://goo.gl/vS9CYV

http://goo.gl/DcUhGP

http://goo.gl/C5aaQ8

Keyboard Access

https://goo.gl/OeaKdo

https://goo.gl/dshqVF

var code = event.key;

var code = event.key || event.charCode;

var code = event.key || event.charCode || event.keyCode;

case "ArrowDown"://W3C stringcase "Down"://non-standard stringcase 40://character code

Go With the Flow

@clienercliener.tumblr.com

slideshare.net/cliener