Hands on with Mobile Accessibility

Hand on with Mobile Accessibility: Process, gotchas, and exploding buses

Where do you get started with mobile accessibility? Bianca Darolti joined us for a discussion on accessibility standards, how to incorporate them effectively into your project, and also to run an interactive workshop on accessibility support in React Native.

Transcript

1. Process, gotchas, and exploding buses Hands on with mobile accessibility Technical Lead Bianca Darolti
2. ` 2 Agenda for the session 25 min. 50 min. Talk Activity Hands on with Mobile Accessibility • 2024 • Getting Started • Making it part of your process • Lessons learnt hands on • Puzzle Hunt
3. 3 Nice to meet you Introduction Hands on with Mobile Accessibility • 2024 • An accessibility specialist • Someone who uses assistive technologies day to day Who I am not • A technical lead with React Native experience • Someone with an interest in accessibility • Someone who has learnt some gotchas hands on Who I am
4. 4 What to expect Hands on with Mobile Accessibility • 2024 Project Introduction • How to do mobile accessibility 101 • Lessons learnt while developing our last mobile app • Starting a conversation on good accessibility practices for your app • Ideas on how to integrate these into your dev process What this is What this is not
5. Hands on with Mobile Accessibility Where to start? 5 Leeds Mobile • 2024
6. 6 Building an accessible app Hands on with Mobile Accessibility • 2024 Where do you start? What’s the goal? • But it’s Web! – actually covers mobile specific features • You’ll be spending more time on this than you’d think • Web focus shifting in WCAG3 Web Content Accessibility Guidelines (WCAG) Accessibility docs for your tech stack Ideally professional assessment and user feedback
7. 7 Goals and Objectives Hands on with Mobile Accessibility • 2024 How do we make sure we’re meeting our goals? The goal is for everyone to be able to use all the features of your app… and for it to not be a pain.
8. 8 Make it part of your process Hands on with Mobile Accessibility • 2024 How do we make sure we’re meeting our goals? • Have an accessibility review ticket at the end of a project/mini project/big feature • Test the entire thing with accessibility in mind • Write up and triage issues The Big Accessibility Review Ticket Cons Are you going to be able to integrate all the issues you found in your next sprints? You get a full picture of how an entire feature behaves with a screen reader/keyboard/big text/etc. Pros
9. 9 Hands on with Mobile Accessibility • 2024 Make it part of your process E.g. eslint plugins Linting • eslint-plugin-react-native-a11y for React Native Automated Testing E.g. CLI tools and end to end test integrations • RoboTest Reviewing Review checklists • Ensure clickable areas are at least 48x48 pixels (WCAG SC2.5.5) • Considered screen readers and large text, landscape orientation Testing Test checklists • Same as previous • Combination of manual testing and using Android Accessibility Scanner • Test on both iOS and Android!
10. 10 Leeds Mobile • 2024 Hands on with Mobile Accessibility What have we learned in the process?
11. 11 Screen Readers Hands on with Mobile Accessibility • 2024 Lessons learnt hands on • Reading order is different on iOS and Android! • Roles are different on iOS and Android • Test on both devices • Be careful not to interfere with voice control!
12. 12 Design First Hands on with Mobile Accessibility • 2024 Lessons learnt hands on • Large text • Reduced motion (WCAG SC2.3.3) • Landscape mode (WCAG SC 1.3.4 - Orientation) • Dark mode (and high contrast mode on iOS!) • See Expo Color Themes
13. 13 Lessons learnt hands on Hands on with Mobile Accessibility • 2024 Stray Thoughts Going beyond WCAG • What’s actually a clear experience for your users? Keep learning • We tested thoroughly for the things mentioned so far • A lot of the feedback we got was around keyboard usage, which we hadn’t tested for at all! Always expect the unexpected • It’s why this talk’s tagline is Process, gotchas, and exploding buses…
14. Any questions? Thank you Technical Lead Bianca Darolti
15. 15 Hands on with Mobile Accessibility • 2024 • https://a11ytune.vercel.app Interactive Challenge Further References • Chris McMeeking – Regarding Keyboard Testing • Mark Steadman - Choosing Your Accessibility UI Testing Library (Web) • W3C - WCAG3 Introcuction • Bureau of Internet Accessibility – The iOS “Increase Contrast” Feature and Accessibility: What to Know
16. 16 Hands on with Mobile Accessibility • 2024 Landscape Mode in Expo & React Native Extra notes See WCAG SC 1.3.4 - Orientation Enabling it in Expo • Remove ‘orientation’ from your Expo config – it locks your app into a specific orientation Modifying layout based on orientation • You may want to change the layout of certain screens or elements to better accommodate landscape mode • See Expo ScreenOrientation Be mindful of notches and status bars • You can use SafeAreaView for this • Beware it has a performance bug – we recommend rolling your own safe area view using useSafeAreaInsets instead
17. 17 Hands on with Mobile Accessibility • 2024 Text Scaling in Expo & React Native Extra notes Some users may choose to scale the size of the text displayed on their device The scaling is done automatically for you, but sometimes this can lead to unexpected layout changes • Text no longer fits on one line • Non critical components take up too much of the screen Some things to consider: • Changing your layout based on text size – you can access the font scaling using PixelRatio • Icons don’t scale automatically – you may want to scale them up along with the text yourself • Fixed heights don’t work well with scaled text, try and avoid them • <Text> has a maxFontSizeMultiplier if you ever do need to cap the size of a component (for example a navbar)