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

Accessibility 360 - Web -> Mobile

Ankita Kulkarni
May 24, 2019
47

Accessibility 360 - Web -> Mobile

Ankita Kulkarni

May 24, 2019
Tweet

Transcript

  1. @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
  2. @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.
  3. @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
  4. @kulkarniankita9 Mobile Web ariaLabel and a11yLabel <p 
 aria-label=“Lorem ipsum”>

    Lorem ipsum dolor </p> <Text accessibilityLabel=“Lorem ipsum”> Lorem ipsum dolor </Text>
  5. @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>
  6. @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….</> </>
  7. @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” /> </> </>
  8. @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
  9. @kulkarniankita9 a11y audit , • Get an a11y expert to

    perform the audit • Automate testing for a11y • Use Lighthouse for web