Web Accessibility Standards: A Primer for UX Designers

Written by David Gevorkian

Accessible design is an inclusive solution in providing a structural pathway for better navigation and a great user experience for people with or without physical, emotional, and mental limitations.

Adopting a user-centric mindset and complying with various web accessibility requirements mandated by Americans with Disabilities Act ( ADA), Section 508 and WCAG standards isn’t only crucial and required but is also practical. Otherwise, you’re risking your reputation, your brand, and your sales revenue. Aside from that, non-compliance can get you sued.

Considering web accessibility standards in UX development is not only about provisioning for the disabled. Its primary aim is to make the Web usable for everyone.

Why has web accessibility become more and more important nowadays?

The internet is now considered a necessity and therefore should be useful to diverse audiences. Web accessibility, aka universal design, is mostly about inclusiveness. For this purpose, complying with web accessibility standards provides equal opportunity and experience for all users — with or without medical conditions.

Moreover, web accessibility is crucial in today’s digital era as services become more and more digital. So, as a UX designer, optimizing your site is the moral and ethical thing to do. Besides, accessible designs help you avoid costly litigation.

Domino’s Pizza case

One example of a high profile case regarding web accessibility policies was Domino’s Pizza case. This was filed by a blind person against the defendant — Domino’s Pizza Store.

The plaintiff claimed that, on several occasions, he cannot order pizza through the company’s websites even with the assistance of his screen reader. Subsequently, the defendant’s website is incompatible with his assistive technology and it’s violative of the ADA standards.

Domino’s contended that making or retrofitting websites are costly. It also emphasized they are under no obligation to make their websites accessible for the visually impaired. But the plaintiff’s attorney rebutted that the blind and visually impaired should have full and equal access to websites and apps to participate in modern society.

This is one of the main reasons why web accessibility lawsuits are on the rise. In the US alone, from 814 to 2,285 cases, there’s a 181% increase of web accessibility litigations from 2017 to 2018. And this is primarily because businesses failed to see that websites and apps are considered places of public accommodations.

In US law, a place of public accommodation is defined as both public and private facilities used by the public. This includes retail stores, service establishments and all other government and private facilities.

In the Domino’s Pizza case, the Supreme Court refused to hear the defendant’s petition and allowed the Circuit Court of Appeals’ decision to remain. Wherefore, the lower court ruled that Domino’s websites and apps are inaccessible and prevent access to its goods and services of its physical pizza stores, which are considered places of public accommodations — a test that it failed to pass, pursuant to ADA compliance.

Understanding Web Accessibility

This term operates by giving everyone an equal opportunity in navigating and utilizing perceptively, simply and intuitively various digital assets, such as websites, apps, and browser-based technology. Furthermore, it is without fear of encountering web accessibility barriers that impede users to have a better online experience.

What is ADA?

The Americans with Disabilities Act of 1990 is a piece of legislation that protects everyone, especially those with diverse conditions from discrimination against improper accommodation in public places. Incidentally, public and private entities’ websites are interpreted by the court as places of public accommodation. Thus, covered entities are required to follow ADA web accessibility requirements to avoid possible litigation proceedings.

What is Section 508 and WCAG?

Section 508 is a federal law that requires federal government agencies’ electronic and information technology procured, developed and used — to be accessible by people with disabilities. Thus, being ADA compliant means developing a website that is usable and navigable by individuals with limitations.

On the other hand, Web Content Accessibility Guidelines ( WCAG) serves as a formal guide on developing accessible web content so it can be useful to everyone. It’s an internationally recognized standard that is significant in addressing accessibility issues. ADA, section 508, and WCAG standards are all developed with the common goal of making electronic and information technology accessible to everyone.

Differences in WCAG 2.0 and 2.1

WCAG 2.0 states that essential design concept should be categorized as:

1. Perceivable i.e. sers should be able to perceive all information in your content, including interface components.
2. Operable: Users should be able to navigate and operate your interface component with ease and success.
3. Understandable: All information and interface elements should be easy to understand and operate.
4. Robust: Content should be robust and reliable, so that it can be interpreted by various user agents and assistive technologies.

WCAG 2.1, is an updated version and newest addition to WCAG 2.0. It introduces 17 new standards that benefit individuals with diverse conditions, including mobile users. WCAG 2.1 is backward-compatible of WCAG 2.0 and observes identical structures, principles, and compliance levels.

What is VPAT?

The Voluntary Product Accessibility Template (VPAT) assesses the accessibility of a product according to Section 508 Standards. It’s a self-disclosing record presented by the vendor which describes each aspect of the Section 508 terms and how the product upholds each criterion.

Web accessibility standards into UX Design

Web accessibility standards should also apply as UX design best practices. Simple interfaces, alternative user pathways, among others makes the web so much more useful to people with disabilities. Ideally, web accessibility should be so ingrained in UX design that a website should be navigable with a keyboard alone, work with assistive technologies, and is easy to understand.

Enable keyboard navigation for web design

Most users, in general, prefer keyboard navigation, especially with hotkey shortcuts. However, for disabled users, enabling this feature is a must as they rely heavily on it. Hence, it’s crucial to design a keyboard-friendly layout and navigation.

Prioritize text clarity

Text clarity is a common issue encountered by visually impaired users. As a designer, you should prioritize amplifying clarity of letters and clarity of text blocks (legibility and readability).

Ideally, 4:5:1 should be the minimum contrast ratio between text and background. While the required body text should be at least 16 pixels. Then, line spacing must be around 25% of the font size. Including the 16-pixel minimum size above, space should be at least 4 pixels.

Additionally, authorizing font augmentation in style sheets by utilizing other measures aside from pixels, like em, pt, or relative sizes.

Don’t rely exclusively on color

Almost 10% of the population suffers from color blindness. While color-coding can be used as a fast and effective communication concerning functionality, don’t neglect to add labels to explain important functions. If unsure, it’s best to try looking at your interface in a black-and-white filter when designing for the visually-impaired.

Order content in HTML for screen readers

Since the inception of HTML and CSS separation, developers can make changes to what users see even without modifying the code structure.

And this is highly favorable to screen readers allowing them better usability. With this change, you can reorganize the code to make it suitable for screen readers without altering the screen layout. The navigation menu can stay at the top while the code stays at the bottom — this is a win-win for both sighted users and visually impaired.

Explanatory link text

Text descriptions are useful to users allowing them to better distinguish the links and evaluate whether to follow it. The description should give the user a hint where it leads. A good practice should be to include only the necessary and never too much.

Use a 40×40 pt. clickable area for touch controls

People with larger fingers sizes, or use assistive technologies, or are technically disabled, benefit from touch controls when navigating the web. So, when designing, aim using 40×40 pt. clickable area for touch controls because less than that can frustrate some users.

Do not forget to follow the accessibility checklist

Above mentioned tips will help to have a better UX in general. However, following everything stated in the accessibility checklist as mandated by WCAG will provide the most meaningful and relevant experience to all users. Don’t forget to follow the checklist starting from images, color, text, audio, navigation, site structure, forms to text elements.

What is an Accessibility Statement?

Publishing an accessibility statement linking from the footer of every page is a good practice to avoid lawsuits. It speaks to both your disabled audience as well as legal trolls.

A good accessibility statement should explicitly communicate your intent and commitment to follow accessibility standards and how your audience can reach you. Moreover, accessibility statement is best written before the development or redesign of the site. Having done so, helps you fix possible flaws so that you can remediate it at once before your website visitors notice it.

Usability & Accessibility Testing Examples

A subset of usability testing, accessibility testing (aka accessibility evaluation or assessment) , considers all users including those with disabilities. Its principal aim is to test both usability and accessibility. Incidentally, there are two kinds of accessibility testing — manual and automated.

As a designer, you should cater to all sets of people: the disabled, those with poor communications infrastructure, computer-illiterate users, those with an old system, users using NON-Standard Equipment, the elderly, and users who have restricted access. When designing, evaluate accessibility as early as possible and throughout the development process so you can easily spot and resolve possible issues.

Key Takeaways

The essence of web accessibility is to end all forms of discrimination that a person with or without a disability may experience while browsing the net. Thus, from a moral and ethical point of view, UX designers should comply with the standards set by ADA, Section 508, WCAG, and other relevant policies on accessibility. Complying with web accessibility standards has practical benefits too aside from litigation avoidance. Following accessibility standards also helps you have a good UX design and strong brand awareness.

Why will User Experience professionals be interested in this topic?

User Experience Professionals will be interested in this topic because web accessibility is necessary. Not following web accessibility standards and policies may result in costly lawsuits. Moreover, accessibility standards are inclusive. UX professionals can better design products and services to be more usable, interactable and navigable to everyone.

Want to learn more?

If you’d like to brush up on Accessibility and get industry-relevant skills, then consider to take the online course on Accessibility. This will earn you an industry-recognized Course Certificate that can advance your career. If, on the other hand, you want to go over the basics of UX and Usability, you could take the online course on User Experience. Good luck on your learning journey!

Originally published at UsabilityGeek by David Gevorkian, who started Be Accessible because of his passion for website accessibility and ADA compliance. He spent much of his career working for financial institutions creating websites and mobile applications.