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

Accessibility on Flutter

Accessibility on Flutter

Lara Martín

January 24, 2020
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  4. TECH
    ASSISTIVE ADAPTIVE
    Two ways of helping
    Blue2 by Ablenet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Accessibility
    Scanner

    View full-size slide

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

    View full-size slide

  9. Motor Disability Vision
    Neurodiversity Hearing

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. https://support.google.com/accessibility/android/answer/6122836?hl=en

    View full-size slide

  14. Switch Access
    1. Open user profile
    2. Navigate back to chat
    window
    3. Start creating a
    message

    View full-size slide

  15. Found Issues
    Small touch targets
    Switch navigation worked well on start,
    but keyboard navigation was bad.

    View full-size slide

  16. Motor Disability Vision
    Neurodiversity Hearing

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  19. Font Scaling
    • Make text larger
    • Supported by the Text widget
    • But not with RichText

    View full-size slide

  20. Default Largest
    Font Scaling (Android)

    View full-size slide

  21. Font Scaling (iOS)

    View full-size slide

  22. Display Size (Android)
    • Make items larger
    • Not text, but UI components

    View full-size slide

  23. Display Size (Android)
    Default Largest

    View full-size slide

  24. Bold Text (iOS)

    View full-size slide

  25. Magnify
    • Both on Android and iOS
    • Tab X times to zoom
    • Drag with X fingers

    View full-size slide

  26. 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?

    View full-size slide

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

    View full-size slide

  28. 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

    View full-size slide

  29. Simulate Color Space (Android)
    Check if iOS has it

    View full-size slide

  30. 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)?

    View full-size slide

  31. 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”

    View full-size slide

  32. 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”

    View full-size slide

  33. 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?

    View full-size slide

  34. Motor Disability Vision
    Neurodiversity Hearing

    View full-size slide

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

    View full-size slide

  36. 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)

    View full-size slide

  37. 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

    View full-size slide

  38. 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.

    View full-size slide

  39. Found Issues
    Sentence Capitalization

    View full-size slide

  40. Motor Disability Vision
    Neurodiversity Hearing

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. Live Captioning
    - Android 10 feature
    - Detects speech
    - Displays subtitles on
    screen
    - Be sure that your app
    works with it!

    View full-size slide

  44. Found Issues
    Nothing to fix

    View full-size slide

  45. Let’s Fix It

    View full-size slide

  46. 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

    View full-size slide

  47. Touch Targets

    View full-size slide

  48. Touch Target User Name
    InkWell(
    //...
    child: Text(author.name)
    )
    InkWell is constrained to the child region.
    Not satisfying the “Minimum Interactive Dimension”

    View full-size slide

  49. 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

    View full-size slide

  50. Touch Target with ConstrainedBox
    InkWell(
    //...
    child: ConstrainedBox(
    constraints: const BoxConstraints(
    minWidth: kMinInteractiveDimension,
    minHeight: kMinInteractiveDimension,
    ),
    child: Text(author.name)
    )
    )

    View full-size slide

  51. Fix Alignment in ConstrainedBox
    InkWell(
    //...
    child: ConstrainedBox(
    constraints: ..
    child: Align(
    alignment: Alignment.centerLeft,
    child: Text(author.name)
    )
    )
    )

    View full-size slide

  52. Capitalization
    and
    Auto-Correct

    View full-size slide

  53. TextField(
    textCapitalization:
    TextCapitalization.sentences,
    )
    Fix text capitalisation:
    • Disabled by default (none)
    • Quick win!
    • Think of the use case.

    View full-size slide

  54. TextField(
    enableSuggestions: true,
    autocorrect: true,
    )
    More improvements for Neurodiverse users:
    • Autocorrection
    • Enable Suggestions
    Both are enabled by default.

    View full-size slide

  55. Low Contrast

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Default Hint vs. Custom
    Default
    Custom

    View full-size slide

  59. 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

    View full-size slide

  60. Text Scaling

    View full-size slide

  61. 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: …
    )

    View full-size slide

  62. Semantic Labels

    View full-size slide

  63. 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?

    View full-size slide

  64. 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…
    )

    View full-size slide

  65. Fixing the Menu Button
    • Wrap with a Semantic Widget
    • Add a label “Menu”
    • Set Button to True
    Semantics(
    label: “Menu",
    button: true,
    child: MenuWidget(…)
    )

    View full-size slide

  66. 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”

    View full-size slide

  67. 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”

    View full-size slide

  68. Fixing Messages
    Semantics(
    label:
    "Message from ${_author.name} ${_message.body} "
    "at ${DateFormat.Hm().format(_message.timestamp)}",
    child: MessageWidget(…)
    )
    Speaker notes is confusing?

    View full-size slide

  69. Fixing Messages
    ExcludeSemantics(
    child: RichText( … )
    )
    ExcludeSemantics to remove Text Widgets from Semantics tree

    View full-size slide

  70. 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!

    View full-size slide

  71. We are done!

    View full-size slide

  72. 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

    View full-size slide

  73. 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

    View full-size slide

  74. 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

    View full-size slide