Let's Try Web Accessibility

In this slide, I share about web accessibility and why it's really important for our users and how to use it.

Related links:

Persona Spectrum: https://www.microsoft.com/design/inclusive

Disability topic: https://www.worldbank.org/en/topic/disability

HTML Semantics di Web Accessibility: https://www.satyakresna.io/posts/html-semantic-di-web-accessibility/

ARIA: https://www.youtube.com/watch?v=g9Qff0b-lHk

Just Use Button: https://www.youtube.com/watch?v=CZGqnp06DnI

Web Form di Web Accessibility: https://www.satyakresna.io/posts/web-form-di-web-accessibility/

MDN Accessibility Troubleshooting: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting

Accessibility Fundamentals: https://www.youtube.com/watch?v=z8xUCzToff8

Udacity course about Accessibility: https://classroom.udacity.com/courses/ud891

Interneting is hard - web semantic: https://internetingishard.com/html-and-css/semantic-html

MDN learning area accessibility: https://developer.mozilla.org/en-US/docs/Learn/Accessibility

Transcript

1. Let’s Try Web Accessibility! Satya Kresna https://satyakresna.io
2. What is accessibility?
3. Giving users with disabilities or impairments alternative ways to access our products.
4. Why web accessibility important?
5. 15% Percentage of people with disabilities in the world Between 110 and 190 million people World bank last updated Sept 26, 2018
6. 2.4% 6 million people Buletin Situasi Penyandang Cacat Disabilitas - Kementerian Kesehatan RI, Semester II 2014 Percentage of people with disabilities in the Indonesia
7. The Persona Spectrum https://www.microsoft.com/design/inclusive
9. A11y = Accessibility
10. Web A11y core principles
11. Perceivable Operable Understandable Robust
12. Web A11y case
13. Semantic Element
14. Semantic elements = elements with a meaning Semantic header, nav, main, article, section, aside, footer, address, time, figure,figcaption, table, thead, tfooter, th, td, ... Non semantic div, span, font, ...
15. DEMO https://www.satyakresna.io/posts/html-semantic-di-web-accessibility/
16. Web Accessibility Initiative - Accessible Rich Internet Application (WAI-ARIA)
17. What is this? The specification that adds the ability to modify and enhance the semantic meaning of elements in the DOM.
18. Tips Consider look for native elements before use ARIA.
19. PLEASE WATCH! https://www.youtube.com/watch?v=g9Qff0b-lHk
20. Another cases
21. JUST USE BUTTON https://www.youtube.com/watch?v=CZGqnp06DnI
22. WEB FORM https://www.satyakresna.io/posts/web-form-di-web-accessibility/
23. MDN EXAMPLE https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_trouble shooting
24. Accessibility testing
25. • Screen reader (Voice Over, NVDA) • Lighthouse • Axe deque (Chrome extension)
26. Web Accessibility benefits
27. 1. Good UX for our product. 2. Reach more users, thanks to screen reader. 3. Improve Search Engine Optimization (SEO).
28. Review
29. What is accessibility? Giving users with disabilities or impairments alternative ways to access our products.
31. Perceivable Operable Understandable Robust Web Accessibility core principles
32. • Screen reader (Voice Over, NVDA) • Lighthouse • Axe deque (Chrome extension) Web Accessibility testing
33. 1. Good UX for our product. 2. Reach more users, thanks to screen reader. 3. Improve Search Engine Optimization (SEO). Web Accessibility benefits
34. Learning Resource Accessibility Fundamentals (https://www.youtube.com/watch?v=z8xUCzToff8) Udacity (https://classroom.udacity.com/courses/ud891) A11ycasts on Chrome Developers Youtube channel Interneting is hard - web semantic (https://internetingishard.com/html-and-css/semantic-html) MDN learning area accessibility (https://developer.mozilla.org/en-US/docs/Learn/Accessibility)
35. Good A11y === Good UX
36. Thank you! Satya Kresna https://satyakresna.io