Accessibility on Flutter

Accessibility on Flutter

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

January 24, 2020
Tweet

Transcript

  1. Accessibility on Flutter Apps for Everyone Lara Martín @Lariki Flutter/Dart

    GDE - Android Miguel Beltran @MiBLT Freelance Consultant
  2. Accessibility on Flutter Apps for Everyone Lara Martín @Lariki Flutter/Dart

    GDE - Android Miguel Beltran @MiBLT Freelance Consultant
  3. What’s accessibility? Design of products to be used by people

    with disabilities. Universal design Products that can be used by the widest majority of people. https://unsplash.com/@yomex4life
  4. TECH ASSISTIVE ADAPTIVE Two ways of helping Blue2 by Ablenet

  5. https://github.com/janoodleFTW/timy-messenger

  6. Types of disability (some of them) Motor Disability Vision Neurodiversity

    Hearing
  7. Accessibility Scanner

  8. None
  9. iOS Simulator: Fewer accessibility options! Simulator Real device

  10. Motor Disability Vision Neurodiversity Hearing

  11. Motor disability Challenges • Require large click areas • Require

    special hardware • Require voice activated software https://webaim.org/articles/motor/motordisabilities
  12. Motor disability Challenges • Require large click areas • Require

    special hardware • Require voice activated software How to help • Games: Difficulty settings, turns • Keyboard navigation • Voice navigation • Adaptive UI components • Autocompletion https://webaim.org/articles/motor/motordisabilities
  13. None
  14. Keyboard Navigation - We try to open the user profile

    and navigate through the app but it doesn’t work well - “Selected” color hard to see most of the time
  15. https://support.google.com/accessibility/android/answer/6122836?hl=en

  16. Switch Access 1. Open user profile 2. Navigate back to

    chat window 3. Start creating a message
  17. Found Issues Small touch targets Switch navigation worked well on

    start, but keyboard navigation was bad.
  18. Motor Disability Vision Neurodiversity Hearing

  19. Vision 4 levels of visual function • Blindness • Severe

    visual impairment • Moderate visual impairment • Mild vision https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
  20. Vision 4 levels of visual function • Blindness • Severe

    visual impairment • Moderate visual impairment • Mild vision How to help • Large font sizes • Screen readers • High contrast content https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
  21. Font Scaling • Make text larger • Supported by the

    Text widget • But not with RichText
  22. Default Largest Font Scaling (Android)

  23. Font Scaling (iOS)

  24. Display Size (Android) • Make items larger • Not text,

    but UI components
  25. Display Size (Android) Default Largest

  26. Bold Text (iOS)

  27. Magnify • Both on Android and iOS • Tab X

    times to zoom • Drag with X fingers
  28. iOS: Unsupported Options? • Button Shapes (underline) • On/Off Labels

    • Reduce Transparency • Increase Contrast These show no difference. Should we check the flutter source code and verify if they are supported?
  29. Colorblindness Challenges • Not being able to see or differentiate

    certain colours • Affects 8% of male population, 0.5% women Find links for picking colours
  30. Colorblindness Challenges • Not being able to see or differentiate

    certain colours • Affects 8% of male population, 0.5% women How to help • Use color AND icons to convey messages • Options to change color Find links for picking colours
  31. Simulate Color Space (Android) Check if iOS has it

  32. None
  33. None
  34. Android: TalkBack - Tap on screen reads Scaffold title. -

    Menu buttons are unlabelled - Attach button is unlabelled - Tap on message item reads the time + message but not the username - “Dogs are the best” - “Unlabelled button” - “16:18 - Good morning everyone! smiley face” Add how to add Talkback (Google Play store app)?
  35. Android: TalkBack + Gestures - Swipe to navigate to next

    item. - TalkBar reads the item. - “Dogs are the best” - “Unlabelled button” - “16:18 - Good morning everyone! smiley face”
  36. iOS: VoiceOver + Gestures - Swipe to navigate to next

    item. - VoiceOver reads the item. - Different reads than Android - “Dogs are the best” - “Image - Puzzles” - “Image - Possibly Menu” - “16:18 - Good morning everyone! smiley face”
  37. Found Issues TalkBack: Missing labels TalkBack: Missing text descriptions like

    author of a message Low text contrast Display size not supported Unsupported iOS features Unsupported iOS features?
  38. Motor Disability Vision Neurodiversity Hearing

  39. Neurodiversity Challenges • Focusing problems • Learning difficulties • Autism

    • Dyslexia • ADHD
  40. Neurodiversity Challenges • Focusing problems • Learning difficulties • Autism

    • Dyslexia • ADHD How to help • Minimal design • Voice narration and subtitles • Spell checking • Remember settings and passwords • Guide the user (without overwhelm)
  41. Helping neurodiverse users: • Autocorrection is enabled • Capitalization by

    sentences not! We can help users write better by enabling Text Capitalization by sentences. Este slide debería ser el assessment de la app en cuanto a los problemas de accesibilidad. Decir si por defecto
  42. Helping neurodiverse users: • Offer text narration • Users can

    read and listen at the same time • Helps distracted minds We can help users with learning difficulties.
  43. Found Issues Sentence Capitalization

  44. Motor Disability Vision Neurodiversity Hearing

  45. Hearing Challenges • High hearing threshold by air or bone

    conduction. • Failure to repeat words in a word recognition test. https://www.alllaw.com/articles/nolo/disability/determination-deafness-hearing-loss.html
  46. Hearing Challenges • High hearing threshold by air or bone

    conduction. • Failure to repeat words in a word recognition test. How to help • Closed captioning • Games: Visual signals • Vibrate on notifications https://www.alllaw.com/articles/nolo/disability/determination-deafness-hearing-loss.html
  47. Live Captioning - Android 10 feature - Detects speech -

    Displays subtitles on screen - Be sure that your app works with it!
  48. Found Issues Nothing to fix

  49. Let’s Fix It

  50. TODO LIST Fix touch targets for names and user avatars

    Fix sentence capitalisation Fix low text contrast Check dynamic font scaling with textScaleFactor Fix missing semantic labels on buttons Fix missing semantic text descriptions like author of a message
  51. Touch Targets

  52. Touch Target User Name InkWell( //... child: Text(author.name) ) InkWell

    is constrained to the child region. Not satisfying the “Minimum Interactive Dimension”
  53. kMinInteractiveDimension “The minimum dimension of any interactive region according to

    Material guidelines.” 48.0 Android 44.0 iOS (kMinInteractiveDimensionCupertino) https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html
  54. Touch Target with ConstrainedBox InkWell( //... child: ConstrainedBox( constraints: const

    BoxConstraints( minWidth: kMinInteractiveDimension, minHeight: kMinInteractiveDimension, ), child: Text(author.name) ) )
  55. Fix Alignment in ConstrainedBox InkWell( //... child: ConstrainedBox( constraints: ..

    child: Align( alignment: Alignment.centerLeft, child: Text(author.name) ) ) )
  56. Capitalization and Auto-Correct

  57. TextField( textCapitalization: TextCapitalization.sentences, ) Fix text capitalisation: • Disabled by

    default (none) • Quick win! • Think of the use case.
  58. TextField( enableSuggestions: true, autocorrect: true, ) More improvements for Neurodiverse

    users: • Autocorrection • Enable Suggestions Both are enabled by default.
  59. Low Contrast

  60. Low Contrast InputDecoration( hintStyle: AppTheme.inputHintTextStyle, ), Color.fromRGBO(153, 153, 153, 1.0);

  61. Default Hint Color input_decorator.dart ThemeData.disabledColor Colors.black38 = Color(0x61000000);

  62. Default Hint vs. Custom Default Custom

  63. MediaQuery HighContrast “Whether the user requested a high contrast between

    foreground and background content on iOS, via Settings -> Accessibility -> Increase Contrast.” It is always false* https://api.flutter.dev/flutter/widgets/MediaQueryData/highContrast.html MediaQuery.of(context).highContrast * https://github.com/flutter/flutter/issues/48418
  64. Text Scaling

  65. RichText and textScaleFactor RichText allows you to have text spans

    to do things like (highlight URLs). Does not support text scaling by default! RichText( textScaleFactor: MediaQuery.of(context).textScaleFactor, text: … )
  66. Semantic Labels

  67. Missing Labels We need to add descriptions to Widgets! Semantics

    Widget • Explains what a piece of UI means. • It is enabled? • It is a button? • It is read only?
  68. SemanticsDebugger • Draws each Semantics region • Displays the TalkBack

    text • Will help us fix the app! Add to the top of your Widget tree SemanticsDebugger( child: …Scaffold or similar… )
  69. Fixing the Menu Button • Wrap with a Semantic Widget

    • Add a label “Menu” • Set Button to True Semantics( label: “Menu", button: true, child: MenuWidget(…) )
  70. Fixing the Send Button • Add “enabled” status to Semantics

    Semantics( label: “Send", button: true, enabled: _enabled, child: SendWidget(…) ) Disabled Enabled • TalkBack says “Send button disabled”
  71. Scaffold Semantics • Tap on the center reads AppBar title

    “Dogs are the best” • Wrap Scaffold with Semantics Semantics( label: "Chat Screen", child: Scaffold( … ) ) • Now reads “Chat Screen - Dogs are the best”
  72. Fixing Messages Semantics( label: "Message from ${_author.name} ${_message.body} " "at

    ${DateFormat.Hm().format(_message.timestamp)}", child: MessageWidget(…) ) Speaker notes is confusing?
  73. Fixing Messages ExcludeSemantics( child: RichText( … ) ) ExcludeSemantics to

    remove Text Widgets from Semantics tree
  74. testWidgets(… { await tester.pumpWidget(CirclesApp()); expect(find.bySemanticsLabel("Menu"), findsOneWidget); }); Testing Semantics •

    Use bySemanticsLabel to find Widgets when testing • Easier to use than other Matchers! • And you help others!
  75. We are done!

  76. TODO DONE LIST Fix touch targets for names and user

    avatars Fix sentence capitalisation Fix low text contrast (???) Check dynamic font scaling with textScaleFactor Fix missing semantic labels on buttons Fix missing semantic text descriptions like author of a message
  77. None
  78. Summary Perform analysis with Accessibility Scanner on Android Test large

    scale fonts on iOS (larger setting) Use Semantics as alternative for Widget Tests for a win-win Embrace TextField features like capitalization
  79. Thank You! L a r a M a r t

    í n F l u t t e r G D E A n d r o i d D e v e l o p e r @ L a r i k i M i g u e l B e l t r a n F r e e l a n c e C o n s u l t a n t @ M i B LT
  80. None