Increase Your Product Quality Through Accessibility

Making your app accessible for everyone is more than a “nice thing to do” It also increases the quality of your app. Products that keep accessibility in mind are more flexible and easier to use. It’s up to us to direct this step. In this talk, you’ll learn about some of the things you can do to make your app more accessible, and how it makes your product stronger. You’ll walk away with the tools you need to detect accessibility issues, increase the usability of your app, and prevent regressions.

Transcript

1. INCREASE YOUR PRODUCT
   QUALITY THROUGH
   ACCESSIBILITY
   VICTORIA GONDA
   @TTGONDA · VICTORIAGONDA.COM
   @TTGonda
   

   View Slide

2. GO TO
   MENTI.COM
   @TTGonda
   

   View Slide

3. WHAT IS
   ACCESSIBILITY?
   @TTGonda
   

   View Slide

4. WHY SHOULD
   YOU CARE?
   @TTGonda
   

   View Slide

5. MAKES A BETTER
   PRODUCT
   A PRODUCT THAT IS CREATED WITH
   ACCESSIBILITY IN MIND PROVIDES A BETTER
   EXPERIENCE FOR EVERYONE.
   @TTGonda
   

   View Slide

6. WIDER AUDIENCE
   1 IN 4 ADULTS IN THE US HAVE SOME TYPE
   OF DISABILITY
   @TTGonda
   

   View Slide

7. DRIVE INNOVATION
   CONSTRAINTS ARE FUEL FOR CREATIVITY
   @TTGonda
   

   View Slide

8. LEGAL REASONS
   ADA COMPLIANCE
   @TTGonda
   

   View Slide

9. TREAT YOUR USERS WITH
   CARE
   LET’S CHANGE THE NARRATIVE “HEROIC
   DISABLED PERSON OVERCOMES OBSTACLES”
   TO “SOCIETY IS INCLUSIVE, ALL CAN
   SUCCEED.” - HABEN GIRMA
   @TTGonda
   

   View Slide

10. QUIZ TIME!
    @TTGonda
    

    View Slide

11. ACCESSIBILITY TOOLS
    > Screen reader
    > Display size and font size
    > Color changes
    @TTGonda
    

    View Slide

12. ACCESSIBILITY TESTING
    > Manual/user testing
    > Accessibility Scanner/Axe
    > Automated tests
    > Lint checks
    @TTGonda
    

    View Slide

13. @TTGonda
    

    View Slide

14. WGAC
    DIMENSIONS OF
    ACCESSIBILITY
    PERCEIVABLE, OPERABLE, UNDERSTANDABLE, ROBUST
    @TTGonda
    

    View Slide

15. PERCEIVABLE
    "INFORMATION AND USER INTERFACE
    COMPONENTS MUST BE PRESENTABLE TO
    USERS IN WAYS THEY CAN PERCEIVE."
    @TTGonda
    

    View Slide

16. QUIZ TIME!
    @TTGonda
    

    View Slide

17. LABELING
    Images and image buttons
    > Make sure they have a description. contentDescription
    for Android and accessibilityLabel on iOS.
    Inputs
    > Make sure inputs are clearly labeled with what they are for.
    @TTGonda
    

    View Slide

18. TIME BASED MEDIA
    Audio, video, and auto advance
    > Provide alternatives, or
    > Make them optional
    @TTGonda
    

    View Slide

19. TIME BASED MEDIA
    Audio, video, and auto advance
    > Provide alternatives, or
    > Make them optional
    Also
    > Allow rewinding and skipping
    @TTGonda
    

    View Slide

20. RELATIONSHIP AND
    ORDERING
    > Arrange the items on the screen in an
    order that makes sense
    > Group items together
    @TTGonda
    

    View Slide

21. SENSORY CUES
    Don't rely on only a visual or audio cue to convey
    information
    > This includes things like shape, color, size, visual location,
    orientation, or sound
    @TTGonda
    

    View Slide

22. ORIENTATION
    Allow both portrait and landscape
    > Yes, this might mean designing for both screen layouts
    @TTGonda
    

    View Slide

23. COLOR
    Color contrast
    > Make sure you have adequate color contrast on words and
    buttons
    @TTGonda
    

    View Slide

24. COLOR
    Color contrast
    > Make sure you have adequate color contrast on words and
    buttons
    Conveying information
    > Don't use color for the only visual means of conveying
    information
    @TTGonda
    

    View Slide

25. FONT AND DISPLAY SIZE
    > Your app should still be usable with
    large sizes
    @TTGonda
    

    View Slide

26. @TTGonda
    

    View Slide

27. OPERABLE
    "USER INTERFACE COMPONENTS AND
    NAVIGATION MUST BE OPERABLE."
    @TTGonda
    

    View Slide

28. QUIZ TIME!
    @TTGonda
    

    View Slide

29. NAVIGATION
    > Can everything be reached using a screen reader?
    > Does the order make sense?
    > And is the meaning clear?
    @TTGonda
    

    View Slide

30. TIMING
    Give users enough time to complete a task
    Allow extending time if needed, or don't put time limits at all
    @TTGonda
    

    View Slide

31. GESTURES AND POINTERS
    Multi-touch gesture actions should be accessible via a
    single touch
    And you should be able to back out of single touch ones, too
    @TTGonda
    

    View Slide

32. TOUCH TARGETS
    > Make sure items are large enough to interact with
    @TTGonda
    

    View Slide

33. UNDERSTANDABLE
    "INFORMATION AND THE OPERATION OF USER
    INTERFACE MUST BE UNDERSTANDABLE."
    @TTGonda
    

    View Slide

34. LANGUAGE!
    > Internationalization
    > Unusual words and idioms
    > Abbreviations
    @TTGonda
    

    View Slide

35. CONSISTENCY
    > Labeling
    > Ordering
    > Context
    @TTGonda
    

    View Slide

36. ROBUST
    "CONTENT MUST BE ROBUST ENOUGH THAT IT
    CAN BE INTERPRETED BY BY A WIDE
    VARIETY OF USER AGENTS, INCLUDING
    ASSISTIVE TECHNOLOGIES."
    @TTGonda
    

    View Slide

37. BUILD QUALITY APPS.
    BUILD FOR THE WORLD
    YOU WANT.
    @TTGonda
    

    View Slide

38. WORD CLOUD: WHAT
    THINGS CAN YOU
    REMEMBER TO LOOK FOR
    TO KEEP YOUR APP
    ACCESSIBLE?
    @TTGonda
    

    View Slide

39. THANK YOU
    VICTORIA GONDA
    RESOURCES: VICTORIAGONDA.COM/TALKS
    @TTGonda
    

    View Slide