Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility 360 - Web -> Mobile

Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=47 Ankita Kulkarni
May 24, 2019

Accessibility 360 - Web -> Mobile


Ankita Kulkarni

May 24, 2019


  1. @kulkarniankita9 Accessibility 360 Web -> Mobile Ankita Kulkarni, Solutions Architect,

  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