Future Proofing Your Sofware: Design Inclusively

Future ProofYour Software
✤ Design Inclusively: Don’t Make YOURSELF Obsolete  
 
Pacific Northwest Software Quality Conference 
8 October, 2018
✤ Michael Larsen (@mkltesthead)

Future Proofing? Really?
Not future proofing of technology
Future Proofing for US
If we are lucky enough, all of us will deal with
the effects of AGING

The High Cost of “Living”
Baby Boomers first reached standard retirement age in
2011. Roughly 10,000 Baby Boomers retire every day
and will continue to do so for another 11 years. 
 
 
Generation X will see their first age 65 retirees in 10
years.

The High Cost of “Living”
A large number of active digital users
will find interacting with their devices
more challenging if they are not
already having issues.

Common Aging-Related Issues
VISION — general need for
reading around age 45, reduced
ability to determine contrast and
distinguish colors.

MOBILITY — arthritis and other
physical conditions (Parkinson's
disease, etc.) can diminish the
ability to perform fine motor
control tasks

HEARING —loss of perception of
higher frequencies, midrange and
lower frequency sounds at lower
decibel levels. Tinnitus and
Meniere’s Disease

COGNITIVE —Alzheimer's
Disease, diminished short-term
memory, distractions, and a
difficulty focusing on complex
tasks.

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

Accessibility vs  
Inclusive Design
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”

Primary Disabilities 
Primary Disability: When a user
has a persistent issue (low vision,
low hearing, limited mobility,
cognitive disability)

Situational Disabilities
Situational Disability: Where a
situation may make a person
without a primary disability have
an issue that is a near equivalent

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.

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.

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.

Accessibility and Inclusive Design
Tools
WAVE: 
 
Web  
Accessibility  
Evaluation  
Tool
http://wave.webaim.org/

Tools
Developer Tools: 
aXe
Axe-core

Tools
Screen Readers:
VoiceOver
NVDA
JAWS

Tools
Color Contrast: 
 
Color Contrast Analyzer 
 
Colorblind Accessibility 
Extension

Tools
Cognitive Analysis: 
 
Hemingway

Tools
Example Site: 
 
W3C Before and After

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.

Think Inclusively
Make Resizing Text Easy
- WCAG 2.0 (1.4.4 - Resize text, Level AA)
- Users should be able to resize text up to 200 percent without loss of content or
functionality.
- Double the text size used and allow for the content and the container to resize
without any issues to readability or usability.
- Avoid using definite pixel sizes
- Text scales uniformly and that the spacing and organization of other content on
the page remains consistent.

Think Inclusively
Increase Line Space and Paragraph Space 
- Paragraph spacing that is 1.5 times the line height and paragraphs
are proportionally separated.
- Space between paragraphs should also increase so that it is at least
1.5 times as distant as the line spacing.
- By creating an alternating style sheet, with a click of a button, text
can be displayed in its normal mode and this more greatly spaced
option.

Think Inclusively
If using Color to Express Meaning, Also
Use Explicit Text 
- For many, as they age, color perception
diminishes.
- Design systems to also include a clear
indication of what colors are actually
trying to convey
- Include the word to help make that
meaning easier to interpret.
PASS
CAUTION
FAIL

Think Inclusively
Where Color is Used, Search for
Additional Label Text 
- In the case of creating icons, searching for a particular
class with a color value should also include searching
for a specific label or include text that will make sense
with that color.
 
-Creating a round circle that is filled with red (as an
indicator that something is wrong) should also contain
a text string that says "Fail" or at least an "F" or
equivalent to help make sure the meaning of the circle
is clear.
PASS
CAUTION
FAIL

Think Inclusively
Explicit Link Text
- Make link text as explicit as possible
pertaining to what the link is and where it
will take you.
- Spelling out that specific purpose will be
much more helpful than a generic link text
that says "Click here".
- Easy automation win: look for the text
"Click here" on any page and determine if
there are more than one instance of the
phrase.
GOOD:
View our quarterly
report
Read our newsletter
See the Results of our
latest survey
BAD:
Click Here
Click Here
Click Here

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

Summary
- Aging is a part of life that (if we are lucky) we all will
face.
- By designing our software up front to take into
consideration the issues we face when we age, we
effectively "future proof" our software and help ensure
that it will be responsive to us and easy to use well into
the future.

Future Proofing Your Sofware: Design Inclusively

References
✤ Wikipedia. “Accessibility”. https://en.wikipedia.org/wiki/Accessibility
✤ British Standards Institute. 2005. “What is Inclusive Design?”. http://
www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html#p30
✤ Disabled World. “Defining Disability Diversity in Society”. https://
www.disabled-world.com/disability/diversity.php
✤ 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
✤ World Health Organization. World Report on Disability. http://
www.who.int/disabilities/world_report/2011/en/
✤ North Carolina State University. The Principles of Universal Design. https://
www.ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm

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
✤ WAVE. Web Accessibility Evaluation Tool. http://wave.webaim.org/
✤ W3C. Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG)
Overview. https://www.w3.org/WAI/intro/wcag
✤ W3C. Web Accessibility Initiative. Before and After Demonstration. https://
www.w3.org/WAI/demos/bad/
✤ Pickering, Heydon. 2016. Inclusive Design Patterns: Coding Accessibility into Web
Design”. Smashing Magazine GmbH

Michael Larsen 
Twitter: @mkltesthead
Blog: https://mkltesthead.com

Future Proofing Your Sofware: Design Inclusively

Related slideshows

More Related Content

Future Proofing Your Sofware: Design Inclusively