Accessibility: We Need It Yesterday
- 1. Accessibility We Need It Yesterday Vitaliy Stanyshevskyy
- 2. Vitaliy Stanyshevskyy Sr. Front-End Developer @
- 3. It has started 5 years ago
- 6. Definition of Done: - Meet deadlines - No bugs ... - PROFIT
- 7. Haven’t you forgotten somebody?
- 8. 4.23 % WHO: Blindness and vision impairment - http://bit.ly/who-blindness 285 389 000 of world population is visually impaired
- 9. WHO: The International Classification of Impairments, Disabilities, and Handicaps (1980) http://bit.ly/who-classification Impairment or Disability? Impairment Disability Signs and symptoms Consequences
- 11. 15 % WHO: World Report on Disability http://bit.ly/who-world-disability 1 010 625 000 of world population have disabilities
- 12. 12.6% Institute on Disability/UCED: Disability Statistics 2016 Annual Report http://bit.ly/USA-2016-Disability of the US population live with disabilities
- 13. Impairments - Temporary and Situational
- 14. Accessibility is about COMFORT of a user.
- 15. Let’s learn A11y! ARIA specs
- 17. HTML
- 18. HTML
- 22. Quiz. Spot the difference <button> <a> 🤔Primary Primary 🤔 ♂️
- 23. DEMO Rotor: Links and Form Controls https://cbracco.github.io/html5-test-page/#top
- 24. Semantics for everyone ● Code maintainability ● Content readability ● Help for a screen reader ● “HTML as a protocol” Mandy Michael on Medium. http://bit.ly/websites- reading-mode
- 25. Zoom <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum- scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial- scale=1"> 👍 👎
- 26. CSS
- 29. :focus-visible
- 30. :focus-visible button:focus { /*some exciting button focus styles*/ } button:focus:not(:focus-visible) { /* undo all the above focused button styles if the browser supports :focus-visible */ } button:focus-visible { /* keyboard focus styles */ }
- 31. DEMO Skip to Content / Navigation https://vstanyshevskyy.github.io/lviv-css-a11y/skip.html
- 32. Outline ● NYT against texty.org.ua (lviv.css)
- 33. Contrast Ratio. WCAG Recommendations AA AAA Normal Text 4.5 : 1 7 : 1 Large Text 3 : 1 4.5 : 1
- 37. Beware of user styles Font Size
- 38. User styles <body style="outline: none!important"> … </body>
- 41. Summary ● A11y is about everyone. ● The best tool to make site accessible is HTML. ● Use your keyboard to test a UI
- 42. Further reading ● Udacity/Google Course ● https://a11yproject.com/ ● Web Content Accessibility Guidelines (WCAG) 2.0
- 44. Yura Chaikovsky Accessibility: let's do it now 16:10. Main Stage
- 46. Accessibility We Need It Yesterday Vitaliy Stanyshevskyy /in/stanyshevskyy vitaliy.stanyshevskyy@gmail.com @vitaliystanyshevskyy
Editor's Notes
- #4: Одного похмурого осіннього дня, схожого на цей я йшов в офіс, такий же небритий і непричесаний. І через неуважність мало не втрапив у халепу на пішохідному переході. Добряче перелякавшись, я почав думати “а що було б якщо...” Якщо зі мною щось станеться, якщо я втрачу зір чи дрібну моторику, яким буде моє життя? Як я зароблятиму на життя? Як жити без інтернету і сучасних девайсів?