Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@kulkarniankita9 How many of you have worked with a11y in web apps? ✋

Slide 3

Slide 3 text

@kulkarniankita9 How many of you have worked with a11y in mobile apps? ✋

Slide 4

Slide 4 text

@kulkarniankita9 Hi, I’m Ankita!

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

@kulkarniankita9 We need to make this native world a better place for everyone

Slide 7

Slide 7 text

@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 ﬁve years.

Slide 8

Slide 8 text

@kulkarniankita9 How does voiceover work?

Slide 9

Slide 9 text

@kulkarniankita9 Instagram voice-over

Slide 10

Slide 10 text

@kulkarniankita9 Key considerations Lorem ipsum Text Button States Keyboards Screen Sizes CONTINUE CONTINUE

Slide 11

Slide 11 text

@kulkarniankita9 Web Mobile Semantics

Heading1

{…}

{…} … … ..…

Slide 12

Slide 12 text

@kulkarniankita9 Make components accessible

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@kulkarniankita9 Native elements

Slide 15

Slide 15 text

@kulkarniankita9 Build a design system of reusable accessible components

Slide 16

Slide 16 text

@kulkarniankita9 sooo… is my entire app accessible?

Slide 17

Slide 17 text

Show me some codeeee..? @kulkarniankita9

Slide 18

Slide 18 text

@kulkarniankita9 Mobile Web ariaLabel and a11yLabel

Lorem ipsum dolor

Slide 19

Slide 19 text

@kulkarniankita9 Mobile Web accessibilityStates const selected = false;  if (checked) { selected = true; }  {}}> Jon Snow>  > if (disabled) { a11yStates.push('disabled'); } {}}> Jon Snow>>

Slide 20

Slide 20 text

@kulkarniankita9 Mobile Web role & accessibilityRole

DESTINATION>

Madison, WI>

Founded in 1829….> > DESTINATION> Madison, WI> Founded in 1829….> >

Slide 21

Slide 21 text

@kulkarniankita9 Mobile Web Touchable > > >

Slide 22

Slide 22 text

@kulkarniankita9 A lot of companies want to automate accessibility to hit their target audience

Slide 23

Slide 23 text

@kulkarniankita9 Web Mobile Testing tools Axe Accessibility Inspector Accessibility Scanner Wave Voiceover Talkback

Slide 24

Slide 24 text

@kulkarniankita9 Testing tools

Slide 25

Slide 25 text

@kulkarniankita9 a11y linter https://github.com/FormidableLabs/eslint-plugin-react-native-a11y https://github.com/evcohen/eslint-plugin-jsx-a11y

Slide 26

Slide 26 text

@kulkarniankita9 It’s no substitute for real user feedback

Slide 27

Slide 27 text

@kulkarniankita9 Reakit example

Slide 28

Slide 28 text

@kulkarniankita9 Animations

Slide 29

Slide 29 text

@kulkarniankita9 Best practices • Ensure animations don’t ﬂash too much • There is a setting to disable animations • Slow it down when “reduce motion” setting is activated

Slide 30

Slide 30 text

@kulkarniankita9 Lessons learned

Slide 31

Slide 31 text

@kulkarniankita9 a11y properties in open source libraries

Slide 32

Slide 32 text

@kulkarniankita9 a11y is diﬀerent in iOS and Android

Slide 33

Slide 33 text

@kulkarniankita9 Use Storybook for tracking a11y components

Slide 34

Slide 34 text

@kulkarniankita9 a11y checklist

Slide 35

Slide 35 text

@kulkarniankita9 a11y audit , • Get an a11y expert to perform the audit • Automate testing for a11y • Use Lighthouse for web

Slide 36

Slide 36 text

@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make it positive—

Slide 37

Slide 37 text

@kulkarniankita9 You did it

Slide 38

Slide 38 text

@kulkarniankita9 Resources Pokemon shock https://kotaku.com/the-banned-pokemon- episode-that-gave-children-seizures-5757570

Slide 39

Slide 39 text

@kulkarniankita9 Resources Good a11y example https://reakit.io/docs/button/

Slide 40

Slide 40 text

@kulkarniankita9 Resources a11y checklist https://frontendchecklist.io/#section- accessibility

Slide 41

Slide 41 text

@kulkarniankita9 Resources Mobile usage https://webaim.org/projects/ screenreadersurvey5/#mobileusage