際際滷

際際滷Share a Scribd company logo

Senses Working Overtime: Improving Software Quality Through Accessibility and Inclusive Design

Download as PPTX, PDF
Michael Larsen
Michael Larsen

Using Inclusive Design principles, we can make the development of software applications better for everyone as well as making Accessibility easier to achieve.

1 of 30
Download to read offline
SENSES WORKING OVERTIMEImproving Software Quality Through Accessibility and Inclusive Design KWSQA 28 February, 2018 Michael Larsen (@mkltesthead)
ACCESSIBILITY VS INCLUSIVE DESIGN Accessibility: The design of products, devices, services, or environments for people with disabilities. Accessibility allows for design compatibility with a persons assistive technology. Inclusive Design: The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible without the need for special adaptation or specialized design
WHY CARE? Nearly 1 in 5 people have some form of disability. Many people not considered disabled have some sort of disability even if it is simply wearing glasses. Design taken for granted one day may be insufficient the next.
SITUATIONAL DISABILITIES Primary Disability: When a user has a persistent issue (low vision, low hearing, limited mobility, cognitive disability) Situational Disability: Where a situation may make a person without a primary disability have an issue that is a near equivalent:
SITUATIONAL DISABILITIES Background noise (hearing) Distracted tasking (cognitive) Small text/non-scaled web page (vision) Foreign language (literacy)
???
TEN PRINCIPLES OF ACCESSIBILITY 1. Avoid making assumptions about the physical, mental, and sensory abilities of your users whenever possible. 2. Your users technologies are capable of sending and receiving text. Thats about all youll ever be able to assume. 3. Users time and technology belong to them, not to us. You should never take control of either without a really good reason.
TEN PRINCIPLES OF ACCESSIBILITY 4. Provide good text alternatives for any non-text content. 5. Use widely available technologies to reach your audience. 6. Use clear language to communicate your message.
TEN PRINCIPLES OF ACCESSIBILITY 7. Make your sites usable, searchable, and navigable. 8. Design your content for semantic meaning and maintain separation between content and presentation. 9. Progressively enhance your basic content by adding extra features. Allow it to degrade gracefully for users who cant or dont wish to use them. 10. As you encounter new web technologies, apply these same principles when making them accessible.
EXAMPLE: SOCIALTEXT CONTENT MENU
PRACTICE EMPATHY: BE HUMBLE Humanize: Be empathetic, understand the emotional components. Unlearn: Step away from your default [device-specific] habits. Switch into different habit modes. Model: use personas that help you see, hear and feel the issues. Consider behaviors, pace, mental state and system state.
PRACTICE EMPATHY: BE HUMBLE Build: knowledge, testing heuristics, core testing skills, testing infrastructure, credibility. Learn: what are the barriers? How do users Perceive, Understand and Operate? Experiment: Put yourself into literal situations. Collaborate with designers and programmers, provide feedback.
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS WAVE. Web Accessibility Evaluation Tool. http://wave.webaim.org/
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Developer Tools: aXe
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Screen Readers: VoiceOver NVDA JAWS
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Color Contrast: Color Contrast Analyzer Colorblind Accessibility Extension
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Cognitive Analysis: Hemingway
ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Example Site: W3C Before and After
THINKING INCLUSIVELY Ensure that images are described with alt tags and that the picture is described meaningfully. Provide a skip link at the top of the document.
THINKING INCLUSIVELY Use the lang attribute in tags Make buttons that are scalable (not tied to literal images). Use images with universal meaning (a smiley face can be rendered once, no translation required).
THINKING INCLUSIVELY Use <div> tag sparingly, especially where keyboard focus is important. Make content available in a variety of formats. Allow for multiple ways to enter the date (text field and date picker).
THINKING INCLUSIVELY Allow Pinch-to-Zoom to let the user determine the amount of zoom and focus needed to view the page. Make touch areas large enough to interact with without requiring rescaling. Encourage the use of proportional fonts.
THINKING INCLUSIVELY Write simply and use space to aid reading. Encourage high contrast designs.
THINKING INCLUSIVELY Make sure elements that appear on the screen appear on a printed page, too. Simple interfaces are usable interfaces. Do not make navigation or discovery more difficult than necessary.
TOOLS CANNOT MAKE JUDGMENT CALLS Tools identify issues, can assert known states Tools can confirm presence of tags Tools cannot confirm a comparable experience Tools cannot determine appropriateness
SUMMARY The farther along a product gets in its development, the more difficult it is to make modifications to its design. Inclusive Design early in product development can make a more usable product for everyone. Inclusive Design will make last mile modifications for Accessibility much easier to implement.
SUMMARY Think of yourself in the future, with the possibility that a significant disability (or disabilities) may be part of your everyday experience. Remember that not everyone is the same as you; Practice empathy Include these design factors into the process from the beginning Think about the future you may end up benefiting from your own design
REFERENCES Wikipedia. Accessibility. https://en.wikipedia.org/wiki/Accessibility (accessed July 8, 2017) British Standards Institute. 2005. What is Inclusive Design?. http://www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html#p30 (accessed July 8, 2017) Disabled World. Defining Disability Diversity in Society. https://www.disabled- world.com/disability/diversity.php (accessed July 8, 2017). Census Bureau Reports. Nearly 1 in 5 People Have a Disability in the U.S. https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html (accessed July 8, 2017) World Health Organization. World Report on Disability. http://www.who.int/disabilities/world_report/2011/en/ (accessed July 8, 2017) North Carolina State University. The Principles of Universal Design. https://www.ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm (accessed July 8, 2017)
REFERENCES Sydik, Jeremy J. 2007. "Design Accessible Web Sites: Thirty-Six Keys to Creating Content for All Audiences. Pragmatic Publishing Gareev, Albert and Larsen, Michael. 2015. Black Box Accessibility Testing: A Heuristic Approach, http://www.associationforsoftwaretesting.org/wp-content/uploads/Black-Box- Accessibility-Testing-A-Heuristic-Approach-.pdf (accessed July 8, 2017) WAVE. Web Accessibility Evaluation Tool. http://wave.webaim.org/ (accessed July 8, 2017) W3C. Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG) Overview. https://www.w3.org/WAI/intro/wcag (accessed July 8, 2017) W3C. Web Accessibility Initiative. Before and After Demonstration. https://www.w3.org/WAI/demos/bad/ (accessed July 8, 2017) Pickering, Heydon. 2016. Inclusive Design Patterns: Coding Accessibility into Web Design. Smashing Magazine GmbH
Michael Larsen Twitter: @mkltesthead Blog: https://mkltesthead.com

More Related Content

Senses Working Overtime: Improving Software Quality Through Accessibility and Inclusive Design

  • 1. SENSES WORKING OVERTIMEImproving Software Quality Through Accessibility and Inclusive Design KWSQA 28 February, 2018 Michael Larsen (@mkltesthead)
  • 2. ACCESSIBILITY VS INCLUSIVE DESIGN Accessibility: The design of products, devices, services, or environments for people with disabilities. Accessibility allows for design compatibility with a persons assistive technology. Inclusive Design: The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible without the need for special adaptation or specialized design
  • 3. WHY CARE? Nearly 1 in 5 people have some form of disability. Many people not considered disabled have some sort of disability even if it is simply wearing glasses. Design taken for granted one day may be insufficient the next.
  • 4. SITUATIONAL DISABILITIES Primary Disability: When a user has a persistent issue (low vision, low hearing, limited mobility, cognitive disability) Situational Disability: Where a situation may make a person without a primary disability have an issue that is a near equivalent:
  • 5. SITUATIONAL DISABILITIES Background noise (hearing) Distracted tasking (cognitive) Small text/non-scaled web page (vision) Foreign language (literacy)
  • 6. ???
  • 7. TEN PRINCIPLES OF ACCESSIBILITY 1. Avoid making assumptions about the physical, mental, and sensory abilities of your users whenever possible. 2. Your users technologies are capable of sending and receiving text. Thats about all youll ever be able to assume. 3. Users time and technology belong to them, not to us. You should never take control of either without a really good reason.
  • 8. TEN PRINCIPLES OF ACCESSIBILITY 4. Provide good text alternatives for any non-text content. 5. Use widely available technologies to reach your audience. 6. Use clear language to communicate your message.
  • 9. TEN PRINCIPLES OF ACCESSIBILITY 7. Make your sites usable, searchable, and navigable. 8. Design your content for semantic meaning and maintain separation between content and presentation. 9. Progressively enhance your basic content by adding extra features. Allow it to degrade gracefully for users who cant or dont wish to use them. 10. As you encounter new web technologies, apply these same principles when making them accessible.
  • 11. PRACTICE EMPATHY: BE HUMBLE Humanize: Be empathetic, understand the emotional components. Unlearn: Step away from your default [device-specific] habits. Switch into different habit modes. Model: use personas that help you see, hear and feel the issues. Consider behaviors, pace, mental state and system state.
  • 12. PRACTICE EMPATHY: BE HUMBLE Build: knowledge, testing heuristics, core testing skills, testing infrastructure, credibility. Learn: what are the barriers? How do users Perceive, Understand and Operate? Experiment: Put yourself into literal situations. Collaborate with designers and programmers, provide feedback.
  • 13. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS WAVE. Web Accessibility Evaluation Tool. http://wave.webaim.org/
  • 14. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Developer Tools: aXe
  • 15. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Screen Readers: VoiceOver NVDA JAWS
  • 16. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Color Contrast: Color Contrast Analyzer Colorblind Accessibility Extension
  • 17. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Cognitive Analysis: Hemingway
  • 18. ACCESSIBILITY AND INCLUSIVE DESIGN TOOLS Example Site: W3C Before and After
  • 19. THINKING INCLUSIVELY Ensure that images are described with alt tags and that the picture is described meaningfully. Provide a skip link at the top of the document.
  • 20. THINKING INCLUSIVELY Use the lang attribute in tags Make buttons that are scalable (not tied to literal images). Use images with universal meaning (a smiley face can be rendered once, no translation required).
  • 21. THINKING INCLUSIVELY Use <div> tag sparingly, especially where keyboard focus is important. Make content available in a variety of formats. Allow for multiple ways to enter the date (text field and date picker).
  • 22. THINKING INCLUSIVELY Allow Pinch-to-Zoom to let the user determine the amount of zoom and focus needed to view the page. Make touch areas large enough to interact with without requiring rescaling. Encourage the use of proportional fonts.
  • 23. THINKING INCLUSIVELY Write simply and use space to aid reading. Encourage high contrast designs.
  • 24. THINKING INCLUSIVELY Make sure elements that appear on the screen appear on a printed page, too. Simple interfaces are usable interfaces. Do not make navigation or discovery more difficult than necessary.
  • 25. TOOLS CANNOT MAKE JUDGMENT CALLS Tools identify issues, can assert known states Tools can confirm presence of tags Tools cannot confirm a comparable experience Tools cannot determine appropriateness
  • 26. SUMMARY The farther along a product gets in its development, the more difficult it is to make modifications to its design. Inclusive Design early in product development can make a more usable product for everyone. Inclusive Design will make last mile modifications for Accessibility much easier to implement.
  • 27. SUMMARY Think of yourself in the future, with the possibility that a significant disability (or disabilities) may be part of your everyday experience. Remember that not everyone is the same as you; Practice empathy Include these design factors into the process from the beginning Think about the future you may end up benefiting from your own design
  • 28. REFERENCES Wikipedia. Accessibility. https://en.wikipedia.org/wiki/Accessibility (accessed July 8, 2017) British Standards Institute. 2005. What is Inclusive Design?. http://www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html#p30 (accessed July 8, 2017) Disabled World. Defining Disability Diversity in Society. https://www.disabled- world.com/disability/diversity.php (accessed July 8, 2017). Census Bureau Reports. Nearly 1 in 5 People Have a Disability in the U.S. https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html (accessed July 8, 2017) World Health Organization. World Report on Disability. http://www.who.int/disabilities/world_report/2011/en/ (accessed July 8, 2017) North Carolina State University. The Principles of Universal Design. https://www.ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm (accessed July 8, 2017)
  • 29. REFERENCES Sydik, Jeremy J. 2007. "Design Accessible Web Sites: Thirty-Six Keys to Creating Content for All Audiences. Pragmatic Publishing Gareev, Albert and Larsen, Michael. 2015. Black Box Accessibility Testing: A Heuristic Approach, http://www.associationforsoftwaretesting.org/wp-content/uploads/Black-Box- Accessibility-Testing-A-Heuristic-Approach-.pdf (accessed July 8, 2017) WAVE. Web Accessibility Evaluation Tool. http://wave.webaim.org/ (accessed July 8, 2017) W3C. Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG) Overview. https://www.w3.org/WAI/intro/wcag (accessed July 8, 2017) W3C. Web Accessibility Initiative. Before and After Demonstration. https://www.w3.org/WAI/demos/bad/ (accessed July 8, 2017) Pickering, Heydon. 2016. Inclusive Design Patterns: Coding Accessibility into Web Design. Smashing Magazine GmbH

Editor's Notes

  • #3: References Wikipedia. Accessibility. https://en.wikipedia.org/wiki/Accessibility (accessed July 8, 2017) British Standards Institute. 2005. What is Inclusive Design?. http://www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html#p30 (accessed July 8, 2017)
  • #4: Disabled World. Defining Disability Diversity in Society. https://www.disabled-world.com/disability/diversity.php (accessed July 8, 2017). Census Bureau Reports. Nearly 1 in 5 People Have a Disability in the U.S. https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html (accessed July 8, 2017) World Health Organization. World Report on Disability. http://www.who.int/disabilities/world_report/2011/en/ (accessed July 8, 2017)
  • #19: https://www.w3.org/WAI/demos/bad/