OK Flutter ! Elle est où la rampe d'accès

Talks sur l'accessibilité avec Flutter

Transcript

1. OK, Flutter ! Elle est où la rampe d'accès ? Cédric Creusot - Sénior Android @beNext @Calimeraw - twitter
2. Pourquoi l'accessibilité ?
3. Des chiffres 1,7 Millions de Français 207 000 Aveugles 932 000 Malvoyants Moyen 80% possesseurs d'un ordinateur 6% autres appareils 14% smartphones
4. Déficiences visuelles > Glaucome > Rétinopathie Diabétique > DMLA > Rétinopathie Pigmentaire > Cataracte > Neuropathie Optique
5. Expérimenter les déficiences EyeView
6. Des solutions logicielles existent > Lecteurs d’écran : > Windows > JAWS > NVDA > Mac OSX > VoiceOver > Android > TalkBack > iOS > VoiceOver
7. VoiceOver > Apple > Existe systématiquement depuis OSX 10.4 et sur l’iphone depuis la version 3 > Leader du marché sur mobile 78% d’utilisations sur mobile > Gratuit > Permet de naviguer sur un iPhone sans avoir besoin de regarder l’écran
8. TalkBack > Google > Présent sur Android > 14% de part de marché > Rebrand en Voice Accessibility Suite depuis Android 8.0 > Gratuit > Permet la navigation sur Android sans avoir besoin de regarder l’écran
9. Comment rendre son application en Flutter accessible ?
10. Tips > Outils d’inspection pour l'accessibilité : > Accessibility Scanner - Android > Accessibility Inspector - iOS > Polices de grandes tailles > Un contraste suffisant
11. Tooltip Tooltip({Key key, @required String message, double height: 32.0, EdgeInsetsGeometry padding: const EdgeInsets.symmetric(horizontal: 16.0), double verticalOffset: 24.0, bool preferBelow: true, bool excludeFromSemantics: false, Widget child }) > Label descriptif d’un bouton > IconButton, FloatingActionButton, PopupMenuButton: > Propriété : tooltip
12. Semantics Semantics({Key key, Widget child, bool container: false, bool explicitChildNodes: false, bool excludeSemantics: false, ... bool button, ... VoidCallback onTap, ... Map<CustomSemanticsAction, VoidCallback> customSemanticsActions }) > Widget qui permet de donner une description des widgets dans les arbres de Widgets > Utiliser dans la plupart des Widget de Flutter > 2 Arbres de Widgets : > Un arbre pour l’affichage > Un arbre pour les lecteurs d’écrans
13. SemanticsNode SemanticsNode({Key key, VoidCallback showOnScreen }) > Représente graphiquement un Semantics dans l’arbre des Semantics
14. SemanticsDebugger SemanticsDebugger({Key key, Widget child }) > Widget qui permet l’affichage de l’arbre des Semantics. > WidgetsApp.showSemanticsDebugger ou MaterialApp.showSemanticsDebugger
15. MergeSemantics MergeSemantics({Key key, Widget child }) > Widget qui fusionne le Semantics avec ses descendants
16. ExcludeSemantics ExcludeSemantics({Key key, bool excluding: true, Widget child }) > Widget qui permet de jeter tout les Semantics qui sont ses descendant et lui même.
17. BlockSemantics BlockSemantics({Key key, bool blocking: true, Widget child }) > Widget qui permet d’exclure tout les Semantics qui lui sont parents. > Utile pour un Drawer ou une Alert
18. Conclusion > Penser à la taille et au contraste du texte de son application > Pensé à utiliser Tooltip > Bientôt disponible sur Desktop dans les embedders > Semantics est complexe et très customisable > Ne permet pas de réorganiser le parcours de l’arbre des Semantics
19. Merci !
20. Références : https://www.aveuglesdefrance.org/quelques-chiffres-sur-la-defici ence-visuelle https://www.didierboelens.com/2018/07/semantics/ https://medium.com/flutter-community/a-deep-dive-into-flutters- accessibility-widgets-eb0ef9455bc https://flutter.dev/docs/development/accessibility-and-localizatio n/accessibility Github : https://github.com/ccreusot/FunFacts