Design for Accessibility

Research At Work

5 min readApr 30, 2021

Web Accessibility Research and Study for HOMEGROW, an online Real Estate application, and its D2C MVP V1.0 Development.

Product Overview

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.

What is Web Accessibility

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.

Where The Industry Stands

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.

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.

WCAG 2.1 has identified 4 major types of disabilities to provide recommendations on how to design web products.

Vision impairment
Hearing impairment
Mobility difficulty
Thinking and understanding

(example: elderlies, someone with autism or learning difficulties)

Following that, WCAG 2.1 has set up 4 fundamental design principles

Perceivable
Operable
Understandable
Robust

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.

“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

The Statistics

“ 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

Share of homeowners in United States, 2015

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.

The Examples of Design for Web Accessibility

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

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.

“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

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

“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

But how this affects the D2C MVP? Why should we care?

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.

The Recommendation

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,” ﬁxes are imperative for release

S3 — Critical, major High priority, important to ﬁx

S2 — Minor, low priority, should be taken care of later

S1 — Cosmetic, ﬁx when given sufficient time and resource

S4

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.

S3

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 ﬂashing 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.

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

The Conclusion

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.