Accessibility 360 - Web -> Mobile

Transcript

1. @kulkarniankita9 Accessibility 360 Web -> Mobile Ankita Kulkarni, Solutions Architect, Rangle.io
2. @kulkarniankita9 How many of you have worked with a11y in web apps? ✋
3. @kulkarniankita9 How many of you have worked with a11y in mobile apps? ✋
4. @kulkarniankita9 Hi, I’m Ankita!
5. @kulkarniankita9 Today… 2 Dev Common components Design system Examples 3 The takeaway Testing Lessons learned Talk to me 1 The What! How voice over works? Key a11y properties Semantics
6. @kulkarniankita9 We need to make this native world a better place for everyone
7. @kulkarniankita9 From 2009 to 2014, mobile screen reader usage increased from 12% to 82% of people who use screen readers, a huge increase in just five years.
8. @kulkarniankita9 How does voiceover work?
9. @kulkarniankita9 Instagram voice-over
10. @kulkarniankita9 Key considerations <Text> Lorem ipsum </Text> Text Button States Keyboards Screen Sizes CONTINUE CONTINUE
11. @kulkarniankita9 Web Mobile Semantics <p>Heading1</p> <Text>Heading1</Text> <div>{…}</div> <View>{…}</View> <input type=“text”>…</input> <TextInput>…</TextInput> <button onClick>..</button <Button>…</Button>
12. @kulkarniankita9 Make components accessible
13. @kulkarniankita9 export interface IButtonProps { onPress: () => void; accessibilityLabel: string; accessibilityHint?: string; accessibilityRole: string; text: string; buttonStyle?: any; isDisabled?: boolean; buttonTheme?: any; color: keyof typeof IButtonColors; } Button props
14. @kulkarniankita9 Native elements
15. @kulkarniankita9 Build a design system of reusable accessible components
16. @kulkarniankita9 sooo… is my entire app accessible?
17. Show me some codeeee..? @kulkarniankita9
18. @kulkarniankita9 Mobile Web ariaLabel and a11yLabel <p 
 aria-label=“Lorem ipsum”> Lorem ipsum dolor </p> <Text accessibilityLabel=“Lorem ipsum”> Lorem ipsum dolor </Text>
19. @kulkarniankita9 Mobile Web accessibilityStates const selected = false;
 if (checked) { selected = true; }
 <input type="checkbox" tabindex=“0" aria-checked={a11yStates} onClick={() => {}}> <label>Jon Snow</>
 </> if (disabled) { a11yStates.push('disabled'); } <Touchable accessibilityLabel=“Jon Snow” accessibilityStates={a11yStates} accessibilityRole=“button" disabled={disabled} onPress={() => {}}> <View><Text>Jon Snow</></> </Touchable>
20. @kulkarniankita9 Mobile Web role & accessibilityRole <Card> <img src=“..” role=“image” /> <h1 role=“header”> DESTINATION</> <h4 role=“header”> Madison, WI</> <p> Founded in 1829….</> </> <Card> <Image src=“..” 
 accessibilityRole=“image” /> <Text accessibilityRole=“header”> DESTINATION</> <Text accessibilityRole=“header”> Madison, WI</> <Text>Founded in 1829….</> </>
21. @kulkarniankita9 Mobile Web Touchable <button className=“icon-button" aria-label=“Add to favourites" aria-pressed="false"> </> <TouchableWithoutFeedback accessibilityComponentType= “button” onPress={onPress}> <View> <Image accessibilityLabel= “Add to favourites” /> </> </>
22. @kulkarniankita9 A lot of companies want to automate accessibility to hit their target audience
23. @kulkarniankita9 Web Mobile Testing tools Axe Accessibility Inspector Accessibility Scanner Wave Voiceover Talkback
24. @kulkarniankita9 Testing tools
25. @kulkarniankita9 a11y linter https://github.com/FormidableLabs/eslint-plugin-react-native-a11y https://github.com/evcohen/eslint-plugin-jsx-a11y
26. @kulkarniankita9 It’s no substitute for real user feedback
27. @kulkarniankita9 Reakit example
28. @kulkarniankita9 Animations
29. @kulkarniankita9 Best practices • Ensure animations don’t flash too much • There is a setting to disable animations • Slow it down when “reduce motion” setting is activated
30. @kulkarniankita9 Lessons learned
31. @kulkarniankita9 a11y properties in open source libraries
32. @kulkarniankita9 a11y is different in iOS and Android
33. @kulkarniankita9 Use Storybook for tracking a11y components
34. @kulkarniankita9 a11y checklist
35. @kulkarniankita9 a11y audit , • Get an a11y expert to perform the audit • Automate testing for a11y • Use Lighthouse for web
36. @kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make it positive—
37. @kulkarniankita9 You did it
38. @kulkarniankita9 Resources Pokemon shock https://kotaku.com/the-banned-pokemon- episode-that-gave-children-seizures-5757570
39. @kulkarniankita9 Resources Good a11y example https://reakit.io/docs/button/
40. @kulkarniankita9 Resources a11y checklist https://frontendchecklist.io/#section- accessibility
41. @kulkarniankita9 Resources Mobile usage https://webaim.org/projects/ screenreadersurvey5/#mobileusage