Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
C S S C O N F A S I A • S I N G A P O R E • 2 4 N O V E M B E R 2 0 1 6
http://cliener.tumblr.com/
http://jltiui.azurewebsites.net/
Equitable
Equitable
Flexible
Equitable
Flexible
Simple and intuitive
Equitable
Flexible
Simple and intuitive
Perceptible
Equitable
Flexible
Simple and intuitive
Perceptible
Tolerant
Equitable
Flexible
Simple and intuitive
Perceptible
Tolerant
Low effort
Equitable
Flexible
Simple and intuitive
Perceptible
Tolerant
Low effort
Right size and space
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
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
Go With the Flow
@cliener
cliener.tumblr.com
slideshare.net/cliener
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Access All Areas @ CSSConf Asia 2016
Upcoming SlideShare
Loading in …5
×

Access All Areas @ CSSConf Asia 2016

418 views

Published on

Accessibility is about ensuring that the products we build are able to be used by as wide an audience as possible. While the ARIA specification might be daunting, building accessible interface elements isn't as difficult as it may seem.

Chris Lienert will take you through his experience building a responsive UI library sharing the failures and successes along the way.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Access All Areas @ CSSConf Asia 2016

  1. 1. C S S C O N F A S I A • S I N G A P O R E • 2 4 N O V E M B E R 2 0 1 6
  2. 2. http://cliener.tumblr.com/
  3. 3. http://jltiui.azurewebsites.net/
  4. 4. Equitable
  5. 5. Equitable Flexible
  6. 6. Equitable Flexible Simple and intuitive
  7. 7. Equitable Flexible Simple and intuitive Perceptible
  8. 8. Equitable Flexible Simple and intuitive Perceptible Tolerant
  9. 9. Equitable Flexible Simple and intuitive Perceptible Tolerant Low effort
  10. 10. Equitable Flexible Simple and intuitive Perceptible Tolerant Low effort Right size and space
  11. 11. No Dependencies
  12. 12. ARIA Roles
  13. 13. .g-tab__tab { … } .g-tab__tab--selected { … }
  14. 14. .g-tab__tab { … } .g-tab__tab[aria-selected="true"] { … }
  15. 15. associatedTab.parentElement. setAttribute("aria-selected", "true");
  16. 16. [aria-hidden="true"] { display: none; }
  17. 17. .class-name[aria-hidden="true"] { display: none; }
  18. 18. https://goo.gl/3jbVtB
  19. 19. https://goo.gl/wk2vGf
  20. 20. https://goo.gl/qBDe25
  21. 21. https://goo.gl/kQKGPG
  22. 22. Make It Obvious
  23. 23. Make It Obvious
  24. 24. Make It Obvious
  25. 25. https://goo.gl/2n5KiR
  26. 26. http://goo.gl/vS9CYV
  27. 27. http://goo.gl/DcUhGP
  28. 28. http://goo.gl/C5aaQ8
  29. 29. Keyboard Access
  30. 30. https://goo.gl/OeaKdo
  31. 31. https://goo.gl/dshqVF
  32. 32. Go With the Flow
  33. 33. @cliener cliener.tumblr.com slideshare.net/cliener

×