Successfully reported this slideshow.
Your SlideShare is downloading. ×

Applying EU regulation to native mobile apps (IAAP webinar, December 2021)

Applying EU regulation to native mobile apps (IAAP webinar, December 2021)

Download to read offline

Modern digital accessibility standards are designed to be applicable to all technologies, but they need translating for use in different technical contexts. This is particularly true for native mobile platforms, such as iOS and Android, where terminology and measures specific to web technology do not necessarily translate easily. So, how do we conform to the EU Web Accessibility Directive when working with native mobile apps? Jon will explain how he translates these accessibility standards for native mobile apps.

Modern digital accessibility standards are designed to be applicable to all technologies, but they need translating for use in different technical contexts. This is particularly true for native mobile platforms, such as iOS and Android, where terminology and measures specific to web technology do not necessarily translate easily. So, how do we conform to the EU Web Accessibility Directive when working with native mobile apps? Jon will explain how he translates these accessibility standards for native mobile apps.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Applying EU regulation to native mobile apps (IAAP webinar, December 2021)

  1. 1. Applying EU regulation to native mobile apps Jon Gibbins
  2. 2. Guidelinesand standards
  3. 3. Web Content Accessibility Guidelines BBC Mobile Accessibility Guidelines iOS Human Interface Guidelines Material Design Accessibility Guidelines Mobileguidelines
  4. 4. Compliance
  5. 5. EN 301549 Accessibility requirements for ICT products and services
  6. 6. Web Content Accessibility Guidelines (WCAG) Version 2.1 (+ 2.2)
  7. 7. Problem 1 WCAG 2 terminology
  8. 8. Terminology “Web content” “Web pages” “44 by 44 CSS pixels” “In content implemented using markup languages…”
  9. 9. “Inthe spirit of…”
  10. 10. Problem 2 Web accessibility ≠ Native accessibility
  11. 11. Webaccessibility
  12. 12. WebContent AccessibilityGuidelines
  13. 13. World WideWebConsortium
  14. 14. Digitalaccessibility
  15. 15. mobilea11y.com appt.nl github.com/dotjay
  16. 16. WCAG2.1 1.1.1 Non-text Content (A) 1.2.1 Audio-only and Video-only (Prerecorded) (A) 1.2.2 Captions (Prerecorded) (A) 1.2.3 Audio Description or Media Alternative (Prerecorded) (A) 1.2.4 Captions (Live) (AA) 1.2.5 Audio Description (Prerecorded) (AA) 1.2.6 Sign Language (Prerecorded) (AAA) 1.2.7 Extended Audio Description (Prerecorded) (AAA) 1.2.8 Media Alternative (Prerecorded) (AAA) 1.2.9 Audio-only (Live) (AAA) 1.3.1 Info and Relationships (A) 1.3.2 Meaningful Sequence (A) 1.3.3 Sensory Characteristics (A) 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.3.6 Identify Purpose (AAA) 1.4.1 Use of Color (A) 1.4.2 Audio Control (A) 1.4.3 Contrast (Minimum) (AA) 1.4.4 Resize text (AA) 1.4.5 Images of Text (AA) 1.4.6 Contrast (Enhanced) (AAA) 1.4.7 Low or No Background Audio (AAA) 1.4.8 Visual Presentation (AAA) 1.4.9 Images of Text (No Exception) (AAA) 1.4.10 Reflow (AA) 1.4.11 Non-text Contrast (AA) 1.4.12 Text Spacing (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.3 Keyboard (No Exception) (AAA) 2.1.4 Character Key Shortcuts (A) 2.2.1 Timing Adjustable (A) 2.2.2 Pause, Stop, Hide (A) 2.2.3 No Timing (AAA) 2.2.4 Interruptions (AAA) 2.2.5 Re-authenticating (AAA) 2.2.6 Timeouts (AAA) 2.3.1 Three Flashes or Below Threshold (A) 2.3.2 Three Flashes (AAA) 2.3.3 Animation from Interactions (AAA) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.4 Link Purpose (In Context) (A) 2.4.5 Multiple Ways (AA) 2.4.6 Headings and Labels (AA) 2.4.7 Focus Visible (AA) 2.4.8 Location (AAA) 2.4.9 Link Purpose (Link Only) (AAA) 2.4.10 Section Headings (AAA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.3 Label in Name (A) 2.5.4 Motion Actuation (A) 2.5.5 Target Size (AAA) 2.5.6 Concurrent Input Mechanism (AAA) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 3.1.3 Unusual Words (AAA) 3.1.4 Abbreviations (AAA) 3.1.5 Reading Level (AAA) 3.1.6 Pronunciation (AAA) 3.2.1 On Focus (A) 3.2.2 On Input (A) 3.2.3 Consistent Navigation (AA) 3.2.4 Consistent Identification (AA) 3.2.5 Change on Request (AAA) 3.3.1 Error Identification (A) 3.3.2 Labels or Instructions (A) 3.3.3 Error Suggestion (AA) 3.3.4 Error Prevention (Legal, Financial, Data) (AA) 3.3.5 Help (AAA) 3.3.6 Error Prevention (All) (AAA) 4.1.1 Parsing (A) 4.1.2 Name, Role, Value (A) 4.1.3 Status Messages (AA)
  17. 17. –AAA 1.1.1 Non-text Content (A) 1.2.1 Audio-only and Video-only (Prerecorded) (A) 1.2.2 Captions (Prerecorded) (A) 1.2.3 Audio Description or Media Alternative (Prerecorded) (A) 1.2.4 Captions (Live) (AA) 1.2.5 Audio Description (Prerecorded) (AA) 1.3.1 Info and Relationships (A) 1.3.2 Meaningful Sequence (A) 1.3.3 Sensory Characteristics (A) 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.1 Use of Color (A) 1.4.2 Audio Control (A) 1.4.3 Contrast (Minimum) (AA) 1.4.4 Resize text (AA) 1.4.5 Images of Text (AA) 1.4.10 Reflow (AA) 1.4.11 Non-text Contrast (AA) 1.4.12 Text Spacing (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.2.1 Timing Adjustable (A) 2.2.2 Pause, Stop, Hide (A) 2.3.1 Three Flashes or Below Threshold (A) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.4 Link Purpose (In Context) (A) 2.4.5 Multiple Ways (AA) 2.4.6 Headings and Labels (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.3 Label in Name (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 3.2.1 On Focus (A) 3.2.2 On Input (A) 3.2.3 Consistent Navigation (AA) 3.2.4 Consistent Identification (AA) 3.3.1 Error Identification (A) 3.3.2 Labels or Instructions (A) 3.3.3 Error Suggestion (AA) 3.3.4 Error Prevention (Legal, Financial, Data) (AA) 4.1.1 Parsing (A) 4.1.2 Name, Role, Value (A) 4.1.3 Status Messages (AA)
  18. 18. –Same as on Web 1.1.1 Non-text Content (A) 1.3.1 Info and Relationships (A) 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 1.4.12 Text Spacing (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.2.2 Pause, Stop, Hide (A) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.5 Multiple Ways (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) 4.1.3 Status Messages (AA)
  19. 19. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 1.4.12 Text Spacing (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.5 Multiple Ways (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –TextSpacing
  20. 20. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.5 Multiple Ways (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –Contenton Hover or Focus
  21. 21. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.1 Bypass Blocks (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.5 Multiple Ways (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –Bypass Blocks
  22. 22. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.5 Multiple Ways (AA) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –MultipleWays
  23. 23. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.4.7 Focus Visible (AA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –FocusVisible
  24. 24. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 3.1.1 Language of Page (A) 3.1.2 Language of Parts (AA) 4.1.1 Parsing (A) –Language
  25. 25. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) 4.1.1 Parsing (A) –Parsing
  26. 26. 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.2 Audio Control (A) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A) What’sleft?
  27. 27. What’sleft? 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A)
  28. 28. What’sleft? 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.4.4 Resize text (AA) 1.4.10 Reflow (AA) 2.1.1 Keyboard (A) 2.1.2 No Keyboard Trap (A) 2.1.4 Character Key Shortcuts (A) 2.4.2 Page Titled (A) 2.4.3 Focus Order (A) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.4 Motion Actuation (A)
  29. 29. 1. Code analysis Linting ?
  30. 30. AndroidLint
  31. 31. 2. Automatedscan Accessibility Scanner Accessibility Inspector
  32. 32. AccessibilityScanner • Item labels • Touch target sizes • Resizable text • Colour contrast
  33. 33. AccessibilityInspector • Accessibility labels • Missing accessibility information • Touch target sizes • Resizable text • Colour contrast
  34. 34. AccessibilityInspector+ Xcode’sSimulator
  35. 35. 44 dp (density-independent pixels) 44 pt (points) 44 CSS pixels ≍ TargetSize • Level AAA, so a best practice • 7mm x 7mm minimum • WCAG 2.1 says…
  36. 36. Otherautomatedtools • Google’s Toolbox for Accessibility for iOS (GTXiLib) • Google's Accessibility Scanner for iOS (GSCXScanner) • Deque’s axe™ DevTools (formerly WorldSpace Attest)
  37. 37. 3. Screen readers TalkBack VoiceOver
  38. 38. Mobilescreenreaders 2 main interaction methods
  39. 39. Mobilescreenreaders Explore by touch • Place finger on screen and move • Items under your finger are described by screen reader • Tap with a second finger or double tap to open/activate
  40. 40. Mobilescreenreaders Gesture navigation • Swipe right/left moves focus to next/previous content in sequence • Items are described by screen reader as focus moves • Double tap to activate
  41. 41. Page Titled Activity title Summary Element
  42. 42. 4. Keyboard alone + with TalkBack alone + with VoiceOver
  43. 43. 5. Voice/ Switch Voice Access / Switch Access Voice Control / Switch Control
  44. 44. 6. Resizetext Font size Larger text
  45. 45. Font size Larger text “Largest” ≅ 132%
  46. 46. Font size Larger text Slide to stop 10 ≅ 235%
  47. 47. 7. Colourcontrast Scanner / screenshots Inspector / screenshots
  48. 48. Nativemobileaccessibility 1. Mobile accessibility is different to the Web 2. Compliance is fragile 3. Testing has some subtle issues to look out for
  49. 49. Copyright 2021 Jon Gibbins All rights reserved. Accessibility.Co a trading name of As It Should Be Ltd Photo credits: Unsplash

×