Senses Working Overtime - Improving Software Through Accessibility and Inclusive Design

SENSES WORKING
OVERTIME
Improving Software Quality Through Accessibility and Inclusive Design  
 
Test Masters Online Conference 
17 October, 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 person’s 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.
That’s about all you’ll 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 can’t or don’t 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
▪ Developer Tools: 
aXe

ACCESSIBILITY AND
Screen Readers:
VoiceOver
NVDA
JAWS

ACCESSIBILITY AND
Color Contrast: 
 
Color Contrast Analyzer 
 
Colorblind Accessibility 
Extension

ACCESSIBILITY AND
Cognitive Analysis: 
 
Hemingway

ACCESSIBILITY AND
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.

▪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).

▪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).

▪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.

▪Write simply and use space to aid reading. 
▪Encourage high contrast designs.

▪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

Senses Working Overtime - Improving Software Through Accessibility and Inclusive Design

More Related Content

What's hot (10)

Similar to Senses Working Overtime - Improving Software Through Accessibility and Inclusive Design (20)

More from Michael Larsen (8)

Recently uploaded (20)

Senses Working Overtime - Improving Software Through Accessibility and Inclusive Design