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

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 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 Quality Through Accessibility and Inclusive Design

More Related Content

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

More from Michael Larsen (8)

Recently uploaded (20)

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

Editor's Notes