Design for accessibility is not just a buzzword anymore. The rising awareness of designing it to be accessible by everyone becomes the fundamentals of any product development. If we don’t think about accessibility at the beginning stage of the product, the outcome will eventually get back to us, on the other hand, if we always put accessibility one of the essential key elements into the success of our product we will have much better chance to be successful in the journey of promoting our new products.

1. Design for
Accessibility
Web Accessibility
Research and Study
for the D2C MVP V1.0
Development
By Ruilin Zhang

2. Table of Content
4 Product Overview
6 What is Accessibility
8 Where the industry stands
14 The statistics
19 The examples
26 The recommendation
31 The conclusion
33 Glossary
34 Resources
!3

3. Product Overview
!4

4. Our organization’s new product line is a consumer-based
D2C solution that empowers the homeowners with the
abilities to monitor and be informed of their home value.
Design for web accessibility is set out for the overall
success of the product.
!5

5. What is Web
Accessibility
!6

6. WAI and W3C have published a series of web
accessibility guidelines for making Web content more
accessible, primarily for people with disabilities but to
extend to everyone including the disabled to have access
to the web and internet in whole.
!7

7. Where the Industry Stands
!8

8. WAI-ARIA 1.0 has defined the foundational standards for all web products.
ACM SIGACCESS supports the international community of researchers and
professionals applying computing and information technologies to
empower individuals with disabilities and older adults.
ACM ASSETS sponsors extensive researches and studies on Assistive
Technologies and findings related to computing for people with disabilities
and older adults.
CSCW Conference provides a platform to introduce and talk about the
latest publications to address accessibility issues.
!9

9. With the emphasis of accessibility computing by the
recognizable organizations, design for accessibility is no
longer an option but a requirement for all web
development regardless of the stage of the production.
!10

10. Vision impairment
Hearing impairment
Mobility difficulty
Thinking and understanding
(example: elderlies, someone with autism or learning difficulties)
WCAG 2.1 has identified 4 major types of disabilities to provide
recommendations on how to design web products.
!11

11. Following that, WCAG 2.1 has set up 4 fundamental design principles
The guidelines recommend every organization when designing a digital product to
understand the need to think about the different ways that people interact with content.
Perceivable
Operable
Understandable
Robust
!12

12. “Accessibility of web content requires semantic
information about widgets, structures, and behaviors, in
order to allow assistive technologies to convey
appropriate information to persons with disabilities.” (1)
- WAI-ARIA 1.0
!13

13. The Statistics
!14

14. “ Can you afford to be less knowledgable than your competitors?
The web is the ultimate environment for empowerment, and he
or she who clicks the mouse decides everything.” (2)
- [Designing Web Usability], Jakob Nielson, ACM
!15

15. 0
1.25
2.5
3.75
5
Hearing Visual Motor
4.5
22
Resource: https://disabilitycompendium.org/sites/default/files/user-uploads/2017_AnnualReport_2017_FINAL.pdf
%
Country: US | Year: 2016 | Age range: 18-64
%
%
!16

16. Share of homeowners in United States, 2015
71%
24%
5%
Age 25-64
Age 65+
Ageunder25
Resource: https://www.statista.com/statistics/211032/us-homeownership-age-distribution-projection/
!17

17. Based on the statistics demonstrated in the graphs, it’s not hard to
conclude that there are 8.5% of the D2C’s majority users have some
kind of disabilities that require the accommodated design to access
our website. the number is, in fact, a lot higher if we consider the
fourth type of disability based WCAG’s guidelines, as well as put the
user agents into consideration such as highly limited devices, for
example, mobile phones.
!18

18. The Examples of Design
for Web Accessibility
!19

19. Keyboard accessibility is a common accessibility design in most
HTML and CSS code. It provides keyboard users the freedom of
navigating the website.
“Keyboard accessibility is one of the most important aspects of
web accessibility. Many users with motor disabilities rely on a
keyboard. Blind users also typically use a keyboard for
navigation.” (3)
-Web AIM/Web accessibility in mind
!20

20. Imaging some users to use the “Tab” and “SPACE” keys to navigate the D2C website just
like what is shown in this video. Failing to provide this basic function makes our product
inaccessible and unusable to those users.
!21

21. “Important visual information often disappears
when color documents are viewed by color
blind people.” (4)
- [Accommodating color blind computer users],
Luke Jefferson, Richard Harvey, ACM
!22

22. “An estimated 253 million people live with vision impairment: 36 million
are blind and 217 million have moderate to severe vision impairment.”(5)
The most common types of color blindness are due to the loss or limited function of red or green cone
photopigments. This type of color blindness is commonly referred to as red-green color blindness
(Deuteranopia). they are unable to see not only green but also the constituent colors with it.
!23

23. “Not to use color as the only way to
explain or distinguish something.” (6)
- [Meeting government accessibility requirements, and
understanding WCAG 2.1], www.gov.uk
!24

24. Low High
The “Home Protection” section on our D2C website uses colors to indicate home risk levels.
This design approach is very effective for data visualization. However, it will fail to convey the
message when not including the alter-text to support the meaning of the colors.
But how this affects the D2C MVP? Why should we care?
!25

25. The
Recommendation
!26

26. In this study, Norman Nielsen’s severity scale method is
used to measure the impact of missing WCAG 2.1
accessibility guidelines. (7)
S4 - Catastrophic, "Show-stopper," fixes are imperative for release
S3 - Critical, major High priority, important to fix
S2 - Minor, low priority, should be taken care of later
S1 - Cosmetic, fix when given sufficient time and resource
!27

27. - Provide text alternatives (‘alt text’) for non-text content.
- Not use color as the only way to explain or distinguish something.
- Not use images of text.
- Let people play, pause and stop any moving content.
- Allow user return to what they were doing after they’ve interacted
with the status message or modal input.
S4
!28

28. - Use text colors that show up clearly against the background color.
- Make sure your service is responsive
“ for example to the user’s device, page orientation and font size they like to use.”
- Not use blinking or flashing content - or let the user disable animations
- Make sure the features look consistent and behave in predictable ways.
- Use descriptive titles for pages and frames.
- Make sure users can move through content in a way that makes sense.
- Use descriptive links so users know where a link will take them, or what downloadable
linked content is.
- Use meaningful headings and labels, making sure that any accessible labels match or
closely resemble the label you’re using in the interface.
S3
!29

29. It’s recommended to follow the
guidelines that go under S4 and S3 or
the D2C MVP is not ready for launch.
!30

30. The Conclusion
!31

31. Most of the development of an accessible user interface doesn’t
require a lot of additional time, and the final product will be easy to
use for all categories of people: the colorblind, people with hearing or
motor impairment and people without any disabilities.
It’s never too early to think about accessibility. Designing for
accessibility doesn’t have to be all or nothing. Taking steps toward
better accessibility is better than not making any effort at all!
Establishing the belief of accessibility at the beginning of any product
design helps to build a solid path for the success of the product.
!32

32. Glossary
ASSETS - Special Interest Group on Accessible Computing
ACM DL - Association for Computing Machinery Digital Library
SIG CHI - Special Interest Group on Computer-Human Interaction
CSCW - computer-supported cooperative work
W3C - World Wide Web Consortium
WAI - Web Accessible Initiative
ARIA - Accessible Rich Internet Applications
WCAG - Web Content Accessibility Guidelines

33. Resources
(1) https://www.w3.org/TR/wai-aria/
(2) https://dl.acm.org/citation.cfm?id=519216
(3) https://webaim.org/techniques/keyboard/
(4) https://dl.acm.org/citation.cfm?id=1168996
(5) https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858
(6) https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag
(7) https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag
ASSETS: https://assets19.sigaccess.org/technical_papers.html
ACM DL: https://www.acm.org/publications/digital-library
ACM DL: https://www.acm.org/publications/digital-library
SIG CHI: https://sigchi.org
CSCW: http://cscw.acm.org/2019/index.html
W3C: https://www.w3.org/WAI/
https://disabilitycompendium.org/sites/default/files/user-uploads/2017_AnnualReport_2017_FINAL.pdf
https://www.statista.com/statistics/211032/us-homeownership-age-distribution-projection/

34. The end of
the report
7.16.2019