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

Accesibility on Flutter

Accesibility on Flutter

Lara Martín

August 16, 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
    Updated:

    August 2020

    View Slide

  2. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. Accessibility
    Scanner

    View Slide

  7. View Slide

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

    View Slide

  9. Motor Disability Vision
    Neurodiversity

    View Slide

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

    View 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 Slide

  12. View Slide

  13. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Motor Disability Vision
    Neurodiversity

    View Slide

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

  19. 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 Slide

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

    View Slide

  21. Default Largest
    Font Scaling (Android)

    View Slide

  22. Font Scaling (iOS)

    View Slide

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

    View Slide

  24. Display Size (Android)
    Default Largest

    View Slide

  25. Bold Text (iOS)

    View Slide

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

    View Slide

  27. iOS: Unsupported Options?
    • Button Shapes (underline)
    • On/Off Labels
    • Reduce Transparency
    • Increase Contrast
    These show no difference.

    View Slide

  28. Colorblindness
    Challenges
    • Not being able to see or differentiate
    certain colours
    • Affects 8% of male population, 0.5%
    women

    View Slide

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

    View Slide

  30. Simulate Color Space (Android)

    View Slide

  31. View Slide

  32. View Slide

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

    View Slide

  34. 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 Slide

  35. 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 Slide

  36. Found Issues
    TalkBack: Missing labels
    TalkBack: Missing text descriptions like author of a message
    Low text contrast
    Display size not supported
    Unsupported iOS features

    View Slide

  37. Motor Disability Vision
    Neurodiversity

    View Slide

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

    View Slide

  39. 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 Slide

  40. Helping neurodiverse users:
    • Autocorrection is enabled
    • Capitalization by sentences not!
    We can help users write better by enabling
    Text Capitalization by sentences.

    View Slide

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

  42. Found Issues
    Sentence Capitalization

    View Slide

  43. Let’s Fix It

    View Slide

  44. 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 Slide

  45. Touch Targets

    View Slide

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

    View Slide

  47. 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 Slide

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

    View Slide

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

    View Slide

  50. Capitalization
    and
    Auto-Correct

    View Slide

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

    View Slide

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

    View Slide

  53. Low Contrast

    View Slide

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

    View Slide

  55. MediaQuery HighContrast
    “Whether the user requested a high
    contrast between foreground and
    background content on iOS, via Settings ->
    Accessibility -> Increase Contrast.”
    MediaQuery.of(context).highContrast

    View Slide

  56. MediaQuery HighContrast
    TextStyle(
    fontSize: 16 * pixelMultiplier,
    fontFamily: fontFamilyEdmondsansRegular,
    color: MediaQuery.of(context).highContrast
    ? Colors.black
    : colorTextDisabled,
    );

    View Slide

  57. MediaQuery HighContrast

    View Slide

  58. Text Scaling

    View Slide

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

  60. Semantic Labels

    View Slide

  61. 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 Slide

  62. 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 Slide

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

  64. 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 Slide

  65. 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 Slide

  66. Fixing Messages
    Semantics(
    label:
    "Message from ${_author.name} ${_message.body} "
    "at ${DateFormat.Hm().format(_message.timestamp)}",
    child: MessageWidget(…)
    )

    View Slide

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

    View Slide

  68. 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 Slide

  69. We are done!

    View Slide

  70. TODO DONE LIST
    Fix touch targets for names and user avatars
    Fix sentence capitalisation
    Fix low text contrast (iOS)
    Check dynamic font scaling with textScaleFactor
    Fix missing semantic labels on buttons
    Fix missing semantic text descriptions like author of a message

    View Slide

  71. View Slide

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

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