Design For Accessibility: Getting it right from the start
Download as PPTX, PDF0 likes110 views
The document focuses on the importance of designing for accessibility from the outset of development, emphasizing universal design principles that enhance usability for individuals with diverse abilities. It highlights critical accessibility features, such as operability, understandability, and perceptibility, while also providing actionable recommendations for implementing these features in digital products. Furthermore, it underscores the financial and operational benefits of addressing accessibility issues early in the development process.
Design For Accessibility: Getting it right from the start
- 1. Design For Accessibility Getting accessibility right from the start
- 2. About me - Android, Accessibility - 8+ years financial programming experience - 2+ years production support
- 3. What is accessibility? Source: Microsoft
- 5. Examples YY/MM CVV Credit card number
- 6. Examples CVV 1234 5678 2468 1357
- 7. Examples YY/MM CVV xxxx-xxxx-xxxx-xxxx Credit card number Expiry date (YY/MM) CVV
- 8. Measure twice, cut once Time Source: Deque 1x 3x 12x 95x Requirements Design Development Testing Production Cost Before commit Automated testing Manual testing
- 9. Measure twice, cut once Time Source: Deque 3 9.5 15.5 37.5 Requirements Design Development Testing Production Cost (Hours) Majority of accessibility issues (67%)
- 10. Refinement is an opportunity Source: Ehrlich and Rohn, 1994 Requirements Production Development Increasing cost of changes Decreasing design alternatives
- 11. Framing decisions User Want Hear what users say User Need See what users do Hunch Sense what users like Product Idea Idea Product Idea Product User Source: Bryan Zmijewski
- 12. Where does accessibility fit in? A B C D Source: J. Dippel
- 13. Universal design principles 1. Equitable Use: The design is useful and marketable to people with diverse abilities. 2. Flexibility in Use: The design accommodates a wide range of individual preferences and abilities. 3. Simple and Intuitive Use: Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level. 4. Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities. 5. Fault Tolerant: The design minimizes hazards and the adverse consequences of accidental or unintended actions. 6. Low Physical Effort: The design can be used efficiently and comfortably and with a minimum of fatigue. 7. Size and Space for Approach and Use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility.
- 14. Simple and intuitive Affordance: An action possibility in the relation between user and an object.
- 16. The four principles of digital accessibility Operable Understandable Robust Perceivable
- 17. … and some kind of prioritisation* Issues that could cause harm, distress, or otherwise make something unusable Where something may be difficult to use, but a workaround can be found Additional features specifically targeted at making the experience pleasurable * my recommendations are purely advisory, you need to evaluate the situation for yourself in context
- 18. Text Make sure there is text associated with everything ● Alternative text / content description ● Captions Except when: ● The image is decorative ● The same information is provided within an immediate context (same screen, same area) Perceivable
- 19. Colour Percevable ● Color should not be the only mechanism by which something is identified. ● Elements to consider: ○ Links ○ Graphs ○ Tabs ○ Elements that have an internal state ● Contrast is not a requirement on disabled controls
- 21. Keyboard accessible Operable Keyboards are the most versatile input types Make sure users can ● Reach everything via tab presses ○ Build focus order into the structure rather than manipulating it with code! ● Interact by pressing space or enter ● Have access to the same features provided by all gestures ● The focus highlight is clearly visible
- 22. Font size Perceivable ● Allow for font scaling ● Be careful how containers are sized ● Scale up to 200%without the loss of ○ Content: Give users the ability to expand when content is contracted ○ Functionality: Make sure views are scrollable
- 23. Orientation Percevable Support both landscape and portrait mode ● Allow rotation in the midst of flows
- 24. ● Usually some kind of semantic sugar ○ Not just bold and big! ● Used as navigational hooks for users Headings Operable
- 25. Pause, stop, hide Operable Anything that plays: ● Must be able to be paused ● Respect user settings like reduced motion / animations off
- 26. Enough time Operable Ensure users have enough time to complete an action ● Allow users to inform the system if they need additional time ● Android has a “time to take action” setting built in
- 27. Target size Operable Make sure components are large enough to be interacted with ● iOS: 44 x 44 ● Android: 48 x 48dp ● Web: 44 x 44 CSS pixels
- 28. Actions Operable In a list of elements where each element has several different interactable components, use actions: ● Allow streamlined iteration over the list ● Avoid repetitive unwanted focus
- 29. Error identification Understandable Use a combination of colours and icons! Tell assistive tech that this updates frequently: ● iOS: updatesFrequently trait ● Android: liveRegion
- 30. Labels and instructions Understandable Inputs require either: ● Labels ● Instructions So users know what input data is expected
- 31. Role, name, value Robust Role: ● The type of element, e.g. button, label, check box Name: ● A unique name of the element on the screen, e.g. submit, play, etc. Value: ● The current state of the element, e.g. disabled, checked, selected, 25% ● A description of what will happen when activated
- 32. Headings Pause, stop, hide Enough time Keyboard accessible Error identification Input labels or instructions Role, name, value Operable Understandable Robust Perceivable Putting it all together Text descriptions Colour supported Font scale Orientation Target size Actions
- 33. Communication skills - Assume good intent* - There are three kinds of money: - Smart: work on known potential issues (i.e. accessibility) before development - Good: make it work for everyone - Bad: deal with regressions, complaints and lawsuits - Accessibility is about human beings, not about numbers - It’s a discipline akin to security, performance and safety - Disabled people are impacted the most, however a lot of features we should support help more than just disabled people - Just because you need a feature doesn’t make you disabled - Exact numbers are impossible to obtain, and would be even harder to maintain ■ If we start by giving numbers, we create an unmaintainable precedent - You do not need to ask for permission to do a good job
- 34. How do you eat an elephant? !
- 35. How do you eat an elephant? … one bite at a time
- 36. Conclusion - A lot of issues can be resolved before development takes place - Benefits of catching issues early: - Saves the business money - Less time dedicated to - Doing the wrong thing - Doing the thing wrong - Fixing regressions (firefighting) - Effort per user ratio is minimized - We know what the potential issues are in advance - For ~ 70 criteria reducing to principles can be helpful - Identify silos and increase communication
Editor's Notes
- #38: This story highlights the importance of taking ownership, not leaving what can be done to another person, and ensuring that important things are followed up on.