Designing Acessible Distributed Systems Apps with Dart

Designing Acessible Distributed Systems Apps with Dart - Talk slides for DartUP 2020.

Transcript

1. Renaldi Gondosubroto Designing Acessible Distributed Systems Apps with Dart
2. A Bit About Myself • 12x AWS, 2x Azure Certified and 2x Google Cloud Certified • Personal field of interest is in penetration testing and accessibility practices • On the side: Running meetups, hackathons, doing tech talks and VR tech enthusiast Renaldi Gondosubroto Founder and Developer Advocate @ GReS Studio @Renaldig @renaldigondosubroto
3. Widget Tree & Semantics The Backend Architecture The Motivation 01 02 TABLE OF CONTENTS 03 Accessibility Tests 04 What we Got Out of it 05
4. Understanding the Motivation
5. • Simplicity in design • Creating IoT hub for edge hardware • Designed to connect with databases, namely Google Cloud The Evolution of IoT in Dart
6. Establishing the Context An IoT-based Alarm System
7. A Bad Example
8. The Backend Architecture
9. Clients Are Always 01
10. Building the Widget Tree AlarmSystem LoginScreen AlarmsPage Home AlarmResults Settings
11. Semantics for Widget Tree
12. Understanding and Following W3C and A11Y • Some in-built Semantics already exist • Utilizing ExcludeSemantics to prevent repeats • Perform a self-audit of your app by following the A11Y project accessibility checklist • Use W3C tools (if web app) and follow through with W3C guidelines • Structure app in such a way that we can see important content before scrolling • Reduce input needed by text through providing buttons, check boxes, etc for input needed
13. Excluding the Semantics
14. Debugging the Semantics with showSemanticsDebugger: true
15. • Test with TalkBack/VoiceOver • Use global and local context menus Screen Readers
16. Creating Appropriate Accessibility Tests
17. Color Vision • Ensuring controls are legible in colorblind and greyscale • Using color_blindness package to simulate color blindness • Imperative in alarm systems due to the need for distinction in alert levels • Create tests based on it
18. Button Layout Action Explain Test that explanation and action is executed as expected Create Create the button Ensure button has an action Event to explain which control was just pushed Test
19. Users Don’t See Your Backend
20. Only The Display Matters
21. Code Design Patterns • WAI-Aria design patterns • E.g. Follow through with live regions • Enhance user experience on the side
22. ANALYSIS Server Status Downed No Alerts
23. What we Got Out of it Better practices for future groundwork Better client feedback Better Analytics
24. Simple It’s simple to implement Simplicity Users appreciate the simplicity you present Usability Build onto the usability on your apps The Wrap-up Design Create better design for your clients Feedback Work on getting feedback regularly from clients throughout the usability development Future Build it as a pathway towards future developments
25. Thank You! Connect with me! @Renaldig @renaldigondosubroto