he11o accessibility

Transcript

1. HE11O ACCESSIBILITY BY ARPIT GOYAL
2. WHO AM I? Hi, I'm Arpit, UX Consultant @ MTX Passionate about building products, a Product Manager in-progress.
3. WHERE TO READ MORE? I write on Quora and Medium, follow these links to read more from me. Some answers on Quora I've written some articles on Medium Subscribe to my newsletter
4. Source: f8.com
5. f8? What is with all these short forms a11y, l18n, g11n?
6. WHY ACCESSIBILITY? Why? I am doing a PM certification course and it has long, very long articles which we're supposed to read. But, I'm using screen reader for it, because: I am a very good listener :P No, because I’m Lazy
7. ALL OF US ARE USING IT: Tabs and in general Keyboard controls How annoying it would if a video would not stop if you hit spacebar? (Hint: Very)
8. 01 We all use tabs, let's start with fixing that. - Use Floats correctly, - Add outline to Focused content and - Using tabindex when needed GET STARTED
9. BONUS: It will increase your audience reach as it becomes universally accessible. It’ll demonstrate your business’s dedication to social responsibility. Accessibility optimisation often leads to cleaner interfaces, simpler navigation, and other elements that work well in improving the overall user experience. Improved SEO often goes hand-in-hand with web accessibility.
10. 02 Screen readers are also used to tells all heading in page to navigate to it directly(ctrl+alt) and so let’s not mess with that, Simple .h1, .h2 classes so that you don’t have to use h1, h2 tags when not needed just to style things. - Changing focus to Modals or any dynamic content - On-hover stuff getting triggered when focused BASIC ACCESSIBILITY
11. THE BIGGER PROBLEM: - The minority myth - We are copying/learning from code which is written there for easy to start with or easy to understand and does not accommodate accessibility. ex: I searched for “Navigation CSS”
12. THE POWER OF THE WEB IS IN ITS UNIVERSALITY. ACCESS BY EVERYONE REGARDLESS OF DISABILITY IS AN ESSENTIAL ASPECT. TIM BERNERS-LEE
13. 03 THE ACCESSIBLE INTERNET - alt attributes, - ARIA attributes (ex: aria-hidden=”true/false”) and - role attributes (ex: role="button" when not using button tag) - Color Contrast (axe, sketch extension, chrome accessibility devtools) - Skip direct to menu - Handle focus when adding Modals or any dynamic content - Remove off-screen content from being tabbable - Text resizing
14. TAKEAWAY: - Write better code don’t wait for warnings to fix accessibility - Use native elements, don’t reinvent/fancy everything - Checklist: You can create a basic checklist (MTX is working on it too), use a11y checklist - Lighthouse: Now a cycle of accessibility testing can be done - Try : A11ycasts (Chrome dev series, YouTube) - Totally: What's new in web accessibility (Google I/O '18) - Look at code Bootstrap like UI framework gives in example and try to understand them (eg: nav) - Free course on Udacity: Web Accessibility by Google
15. WHERE TO READ MORE? I write about career advice on Quora and Medium, follow these links to read more from me. Some answers on Quora I've written some articles on Medium Subscribe to my newsletter
16. THANKS A LOT THE ROLE OF BY ARPIT GOYAL
17. THANKS! YOU ARE DINO-MITE