RubyConf MY 2017 - One Blind Weekend

This talk is about the time when I was temporarily blind for a weekend, and how suddenly, web accessibility became both a boon and an annoyance to me. In this lightning talk I share about what I went through while "blind", and tips to improve your website's accessibility in order to enable more people to easily access and use your website, regardless of ability.

Transcript

1. ONE BLIND WEEKEND Jinny Wong RubyConf Malaysia 2017
3. strabismus
4. normal eyes
5. my eyes
6. my vision
7. my vision no binocular vision inaccurate perception of depth red-green 3D glasses are just… red
8. corneal abrasion
9. my vision
10. SCREEN READERS
11. SEMANTIC HTML Use the HTML tag for what it means ▸ <h1>-<h6> tags should be used for actual headers, not to help you style stuff. Outlines & Landmark Roles ▸ <nav>, <section>, <aside>, etc ▸ role=“navigation”, “main”, “search”, etc ▸ Screen readers take advantage of these to enable users to quickly skip between page content (e.g., VoiceOver Web Rotor)
12. CONTEXT IS KING Keyboard focus-able ▸ Use CSS to hide visually hidden text instead Accessibility names ‣ A screen user won’t know what an <input> field is for unless you provide context using <label> ▸ What’s in this <button type=“submit”></button>?
13. CONTEXT IS KING Keyboard focus-able ▸ Use CSS to hide visually hidden text instead Accessibility names ‣ A screen user won’t know what an <input> field is for unless you provide context using <label> ▸ What’s in this <button type=“submit”>Submit</button>?
14. CONTEXT IS KING Keyboard focus-able ▸ Use CSS to hide visually hidden text instead Accessibility names ‣ A screen user won’t know what an <input> field is for unless you provide context using <label> ▸ What’s in this <button type=“submit”>Submit</button>? ▸ Where does <a href=“example.com”>click here</a> take me to?
15. CONTEXT IS KING Keyboard focus-able ▸ Use CSS to hide visually hidden text instead Accessibility names ‣ A screen user won’t know what an <input> field is for unless you provide context using <label> ▸ What’s in this <button type=“submit”>Submit</button>? ▸ Where does <a href=“example.com”>example.com</a> take me to?
16. ALT RIGHT! ▸ Make sure your images have alt text ▸ Omit words like “Picture of…” etc. Screen readers know. alt=“Cat curled up in a ball, looking suspicious” “Image. Cat curled up in a ball, looking suspicious” !
17. MIND YOUR JAVASCRIPT Hover menus ▸ If you need to have hover links, make sure the element is still tab(focus)- able by a screen reader in your DOM Infinite scrolling ▸ I want to reach a link at the footer of the page… ▸ … but where does the page end? ▸ Add a “load more” button or standard pagination A link should be <a> link ▸ Not something with a click handler!
18. FONTS & COLOURS Contrast ▸ Make sure there’s sufficient contrast Size ▸ And your text is not too hard to read. viewports ▸ Try not to prevent user from zooming in and out Colour Blindness ▸ ~ 9% of population (esp. 1 in 12 males), are colour blind ▸ Don’t depend solely on colours to deliver context ▸ Add shapes or text too ̖ ▼
19. https://www.microsoft.com/en-us/design/inclusive
21. Mr Yam Tong Woo Founder, Adult Blind Association of Selangor http://myblindsight.blogspot.com
22. RESOURCES ▸ https://blog.momocentral.com/the-day-we-hired-a-blind- coder-9c9d704bb08b ▸ https://www.microsoft.com/en-us/design/inclusive ▸ http://simplyaccessible.com ▸ http://www.washington.edu/accessibility/web/ ▸ https://alistapart.com/article/reframing-accessibility-for-the-web ▸ https://www.w3.org/TR/wai-aria/roles#role_definitions