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

アクセシビリティが高いFlutterアプリケーションを開発する

100059
November 30, 2021

 アクセシビリティが高いFlutterアプリケーションを開発する

FlutterKaigi2021
2021/11/30 19:45〜 Live レギュラートーク(30分)
https://fortee.jp/flutterkaigi-2021/proposal/d80e1204-3fd5-4c55-b728-83ee1dbf1d01

100059

November 30, 2021
Tweet

More Decks by 100059

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • ઋੴ ߊٱ (Sengoku Akihisa) • גࣜձࣾαΠόʔΤʔδΣϯτ • 2018

    - 2021 Ξϝʔόϒϩά iOSΤϯδχΞ • 2021- ݱࡏ WINTICKET FlutterΤϯδχΞ 2
  2. ΞδΣϯμ • Flutter ΞΫηγϏϦςΟ • Scale Factor • Suf fi

    cient Contrast • Screen Reader • ΞΫηγϏϦςΟରԠ 4
  3. Flutter ΞΫηγϏϦςΟ ࢀߟ • Flutter • Flutter.dev Accessibility • iOS

    • Human Interface Guideline Accessibility • Android • Material Design Accessibility 6
  4. Flutter ΞΫηγϏϦςΟ • Large Fonts • ϑΥϯταΠζ͕େ͖͘ͳͬͯ΋σβΠϯ่͕Εͳ͍Α͏ʹ͢Δ • σόΠεͰઃఆ͞Ε͍ͯΔϑΥϯτͷεέʔϧ஋Λ࢖༻ͯ͠ɺΞϓϦ಺ͷϑΥϯ ταΠζ͕ܾఆ͢Δ

    • Suf fi cient Contrast • ΞϓϦ಺ͷίϯςϯπ͕े෼ͳίϯτϥετൺ͕อͨΕ͍ͯΔ • Screen Reader • εΫϦʔϯϦʔμʔΛ࢖༻ͯ͠ɺΞϓϦͷίϯςϯπΛಡΈ্͛Δ͜ͱ͕Ͱ͖Δ 7
  5. Flutter Checklist • Active interactions:Ϣʔβͷಈ࡞ʹରͯ͠ͷϑΣʔυόοΫ΍ΞϓϦͷ࣮ߦ݁ՌͷϑΟʔυόοΫ͕͋Δ͔ʁ • Screen reader testing: εΫϦʔϯϦʔμʔΛ࢖༻ͯ͠ΞϓϦΛ࢖༻͢Δ͜ͱ͕Ͱ͖Δ͔ʁ

    • Contrast ratios: ίϯτϥετൺ͕े෼ʹอͨΕ͍ͯΔ͔ʁ • Context switching: Ϣʔβͷ֬ೝͳ͠ͰϢʔβͷίϯςϯπͷมߋ͍ͯ͠ͳ͍͔ʁ • Tappable targets: 48px *48px ͷλοϓྖҬ͕֬อ͞Ε͍ͯΔ͔ʁ • Errors: ΤϥʔͱҰॹʹमਖ਼ํ๏͕Θ͔Δ͔ʁ • Color vision de fi ciency testing: ৭֮ҟৗϞʔυͱάϨʔεέʔϧϞʔυͰ࢖༻ՄೳͰ͋Δ͔ʁ • Scale factors: ϑΥϯταΠζΛେ͖ͯ͘͠΋σβΠϯ่͕Εͳ͍͔ʁ 8
  6. iOSͱAndroidͷΞΫηγϏϦςΟ iOS 44px * 44px 3:1 Voice Over ̋ ×

    Android 48px * 48px 3:1 or 4.5:1(14ptະຬ) Talk Back ̋ ̋ λοϓྖҬ Boldίϯτϥετൺ Screen Reader ϑΥϯταΠζͷมߋ දࣔαΠζͷมߋ 9
  7. Flutter Framework Material • λοϓྖҬͷ࠷খ஋Ͱ͋Δ48px͕ఆٛ͞Ε͍ͯΔ • fl utter / lib

    / src / material / constant.dart • const double kMinInteractiveDimension = 48.0; • MaterialͷIconButtonͰ࢖༻͞Ε͓ͯΓɺσϑΥϧτͰ48pxͷλοϓྖҬ͕ ֬อ͞ΕΔ • fl utter / lib / src / material / icon_button.dart • BoxConstraints(minWidth: _kMinButtonSize, minHeight: _kMinButtonSize) 10
  8. Flutter Framework Cupertino • λοϓྖҬͷ࠷খ஋Ͱ͋Δ44px͕ఆٛ͞Ε͍ͯΔ • fl utter / lib

    / src / cupertino / constraints.dart • const double kMinInteractiveDimensionCupertino = 44.0; • CupertinoButtonͰ࢖༻͞Ε͓ͯΓɺσϑΥϧτͰ44pxͷλοϓྖҬ ͕֬อ͞ΕΔ • fl utter / lib / src / cupertino / button.dart 11
  9. ΞδΣϯμ • Flutter ΞΫηγϏϦςΟ • Scale Factor • Suf fi

    cient Contrast • Screen Reader • ΞΫηγϏϦςΟରԠ 16
  10. System Font Scale • MediaQueryData • ϝσΟΞʢγεςϜʣ৘ใʹ͍ͭͯ • MediaQueryData.textScaleFactor: ϑΥϯτͷεέʔϧൺ

    • MediaQueryData.size: ΞϓϦ͕දࣔ͞Ε͍ͯΔWindow Size • MediaQueryData.boldText: ϑΥϯτΛଠ͘͢Δࢦఆ • MediaQueryData.highContrast: ίϯτϥετΛ্͛Δࢦఆ 20
  11. ࣮૷࣌ͷ஫ҙ఺ • ࣮ࡍʹtextScaleFactorΛมԽͤͯ֬͞ೝͯ͠ΈΔͷ͕Ұ൪ྑ͍😅 • TextͷදࣔྖҬͷߴ͞ or ԣ෯Λݻఆ͍ͯ͠Δ ← ΄΅͜Ε •

    → PaddingΛ࢖͏ͳͲͯ͠ಈతͳϨΠΞ΢τʹमਖ਼ • → MediaQueryͰWidgetΛWrapͯ͠maxͷtextScaleFactorΛࢦఆ • จݴ͕௕͍έʔε΍2ߦͷέʔε • ยଆͷPadding͕ਖ਼֬ʹઃఆ͞Ε͍ͯͳ͍ 37
  12. ϨεϙϯγϒͳUI • DisplaySizeΛେ͖͘ʢදࣔྖҬ͕খ͘͞ͳΔʣͱ͖ʹσβΠϯΛҡ࣋ • LayoutBuilder • ImageͷAspectൺͷҡ࣋ • AspectRatio •

    Document • https://docs. fl utter.dev/development/ui/layout/adaptive- responsive#creating-a-responsive- fl utter-app 39
  13. Su ffi cient Contrast • 4.5 : 1 • 18ptະຬ

    Regular Text,14ptະຬ Bold Text • 3: 1 • 18ptҎ্ Regular Text,14ptҎ্ ,Bold Text , จࣈը૾ • W3Cͷਪ঑ • https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast- contrast.html 41
  14. meetsGuideline • widget͕ΞΫηγϏϦςΟΛຬ͍ͨͯ͠Δ͔Λ֬ೝ͢Δ͜ͱ͕Ͱ͖ΔMatcher • AsyncMatcher meetsGuideline(AccessibilityGuideline guideline) • AccessibilityGuideline •

    textContrastGuideline: ςΩετͷίϯτϥετ • androidTapTargetGuideline: AndroidͷλοϓྖҬ 48 * 48 • iOSTapTargetGuideline: iOSͷλοϓྖҬ 44 * 44 • labeledTapTargetGuideline: λοϓΤϦΞʹηϚϯςΟοΫϥϕϧͷ༗ແ 43
  15. meetsGuideline • FlutterGalleryͷDemoͷΞΫηγϏ ϦςΟͷςετʹ࢖ΘΕ͍ͯΔ • https://github.com/ fl utter/ fl utter/

    blob/ 24207183899d546983873dd6d6e 3b80a2825a982/dev/ integration_tests/ fl utter_gallery/ test/accessibility_test.dart 46
  16. ΞδΣϯμ • Flutter ΞΫηγϏϦςΟ • Scale Factor • Suf fi

    cient Contrast • Screen Reader • ΞΫηγϏϦςΟରԠ 47
  17. Widget Tree and Semantics Tree Card Text Text Button label:

    'FlutterKaigi' Label: 'Start' Button: true ɾɾɾলུ Text 56
  18. Semantics Widget Property • bool container (default false) • trueͷ৔߹ʹ৽͍͠SemanticsNodeΛੜ੒͢Δ

    • falseͷ৔߹͸਌ͷSemanticsNodeʹϚʔδ͞ΕΔʢ਌͕ڐՄ͍ͯ͠Δ৔߹ʣ • bool explicitChildNodes (default false) • trueͷ৔߹͸ࢠͷSemanticsNodeΛࣗ਎ͷSemanticsNodeʹϚʔδ͕ෆՄʹͳΔ • falseͷ৔߹͸Ϛʔδ͢Δ͜ͱ͕Մೳ • bool excludeSemantics (default false) • trueͷ৔߹ʹchildͷSemanticsNodeΛআ֎͢Δ 57
  19. Widget Tree and Semantics Tree Card container: true Text label

    'Flutter' label: 'FlutterKaigi' Button: true Label: 'Start' ɾɾɾলུ Text label 'Kaigi' Button container: true button: true Text label 'Start!' 58
  20. Widget Tree and Semantics Tree Card container: true Text label

    'Flutter' label: 'FlutterKaigi' ɾɾɾলུ Text label 'Kaigi' Button container: true button: true Text label 'Start!' merge merge Button: true Label: 'Start!' 59
  21. ExplicitChildNodes Card container: true explicitChildNodes: true Text label 'Flutter' Button:

    true Label: 'Start' ɾɾɾলུ Text label 'Kaigi' Button container: true button: true Text label 'Start!' Label: 'Kaigi' Label: 'Flutter' 60
  22. Semantics Class • MergeSemantics: childͷsemanticsΛϚʔδ • ExcludeSemantics: childͷsemanticsΛআ֎ • BlockSemantics:

    Widgetͷഎޙʹ͋ΔSemanticsΛແޮʢStackͷ WidgetΛҰॹʹ࢖༻Մೳʣ • OrdinalSortKey: ಡΈ্͛ॱংΛorderʹԠͯ͡ιʔτʢSemantics ͷsortKeyʹࢦఆʣ 61
  23. SemanticsͷLabelͷ෇͚ํ • WCAG΍WCAGͷୡ੒ํ๏ूΛࢀߟ • https://waic.jp/docs/WCAG21/ • https://waic.jp/docs/WCAG21/Techniques/ • ྫᶃ :

    ը૾಺ʹίϯςϯπΛཧղ͢ΔͨΊͷจࣈؚ͕·ΕΔ • ಉ͡จࣈΛSemanticsͷLabelʹ෇༩ • ྫᶄɿ૷০໨తͷը૾ • Semanticsͷ৘ใΛ෇༩͠ͳ͍ 62
  24. ࣮૷࣌ͷ஫ҙ఺ • ࣮ࡍʹ֬ೝͯ͠ΈΔͷ͕Ұ൪ྑ͍😅 • ը૾ • Exclude or Labelͷ෇༩ •

    CustomWidget • ଐੑͷ෇༩ʢButton, SelectedͳͲʣ • Mergeͯ͠1ͭͷSemanticsNodeͱͯ͠ಡΈ্͛Δ 63
  25. ΞδΣϯμ • Flutter ΞΫηγϏϦςΟ • Scale Factor • Suf fi

    cient Contrast • Screen Reader • ΞΫηγϏϦςΟରԠ 64
  26. ։ൃͰ͸ʁ ػೳ։ൃ ΞΫηγϏ ϦςΟͷ νΣοΫ ΞΫηγϏ ϦςΟͷ νΣοΫ ΞΫηγϏ ϦςΟͷ

    νΣοΫ ΞΫηγϏϦ ςΟରԠ ΞΫηγϏϦ ςΟରԠ ΞΫηγϏϦ ςΟରԠ • ݄ʹ1ճͷΞΫηγϏϦςΟΛߦͳ͍ͬͯΔ • ׬੒ͨ͠ػೳ΍ը໘ͷΞΫηγϏϦςΟΛνΣοΫͯ͠ɺͦͷޙ͙͢ ʹमਖ਼ͷରԠΛߦ͏ 65