What is Web Accessibility and Why is it Essential?

Let’s say you want to try out this popular restaurant. You walk up to it and realize there’s no door. Through the windows, you can see people happily enjoying their meals, but there’s no way for you to go in. There’s no number for you to call to order takeout. You can’t join the people inside, and there’s no way for you to get a taste of what they’re eating. That’s what it’s like for people with disabilities when they come across a business that does not prioritize accessibility. If your company was subjected to an ADA compliance audit, what would it reveal? Are you providing equal access and opportunity to all, both physically and digitally? Or have you failed to practice web accessibility?

What is Web Accessibility?

We live a huge part of our lives in the digital world through online shopping, Netflix, social media, work, etc. Most of us are no longer constrained by the physical world. Unfortunately, not everyone can say the same. Digital equality is not a reality for all. Not everyone can access the internet or fully engage with most digital experiences. This is where web accessibility comes in.

Web accessibility is based on the idea of universal design — where all digital products and services must be accessible and usable to everyone, including those with disabilities and the hardware/software that they are using. For example, everyone should be able to navigate your website and fully engage with your mobile app, regardless if they are visually or hearing impaired or have another disability effecting the way they do things.

All you need to know about Web Accessibility

ADA

The ADA or Americans with Disabilities Act is a civil rights law that was passed in 1990. This law protects disabled individuals from discrimination by requiring all goods, services, privileges, and activities that take place in places of public accommodations to be accessible to them. Places of public accommodations include restaurants, schools, doctor’s offices, commercial facilities, etc. In today’s world, because social and economic activities today also occur online, the ADA now includes websites and digital products.

Section 508

Section 508 is part of the Rehabilitation Act that requires all U.S. government agencies to make sure that their ICT (information and communications technology) is accessible to all, regardless of their abilities. This means that the agencies must provide computers, phones, software, PDF documents, online training, etc. that can be used by federal employees with disabilities. It also requires that all information and resources that are available to the public should be accessible to disabled individuals. In additional to Section 508 applying to U.S. government agencies, it also applies to anyone who receives federal funding.

VPAT

VPAT stands for Voluntary Product Accessibility Template. A VPAT is a document that shows a comprehensive analysis of an electronic and information technology (EIT) vendor’s product according to the accessibility standards stated in Section 508 of the Rehabilitation Act. The document is used by buyers to more easily assess the compliance of EIT products and service offerings to these standards.

WCAG

WCAG is short for Web Content Accessibility Guidelines. WCAG was created by the primary international standards organization of the internet, the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These are the technical standards of web accessibility that you can reference and use as a guide when designing a digital product or service such as a website or mobile app.

Email and PDF Accessibility

It’s not just web page accessibility that you have to consider. Web accessibility covers all digital products, services, and information. This means that the content of your emails and PDFs must also be accessible to everyone, regardless of their abilities. For email accessibility, it means applying accessibility techniques such as including content that is easily readable, using headings, including alternative text on images, using descriptive links, and using colors that pass color contrast ratios as recommended by WCAG.

For PDF accessibility, this means the content in your PDF documents and forms is also accessible. The characteristics of an accessible PDF file include a lot of the same characteristics as an accessible website or email; namely, searchable text, navigational aids such as headings and links, colors within contrast ratios, and compatibility with assistive technology.

How to Apply Web Accessibility

There are a lot of different ways to ensure web accessibility. You’ll find plenty of techniques listed in the WCAG. Below are a few examples of techniques that you can use to help people both with and without disabilities having a positive user experience as they navigate your website and digital content.

Use a 44×44 CSS pixel clickable area for touch controls

Web accessibility is not just for the disabled but can be highly beneficial to people who have a larger finger size. According to web accessibility guidelines, a 44×44 pixel clickable area is ideal for touch controls because anything smaller can be frustrating to users who require a larger area. This could be due to finger size or limited dexterity or someone having to use assistive technologies to help them navigate digital content.

Prioritize Text Clarity

Text clarity simply means that the text is both legible and readable. Each letter should be distinguishable. The minimum contrast ratio between the text and the background provided by the W3C should be followed. Relative styles should be used for all font sizes and text resizing should not be restricted in any way. Text-only needs to be able to resize up to 200% of its original size.

Don’t rely exclusively on color

Nearly 10% of the population is color blind. While color can be a fast and effective medium of communication regarding functionality, it can exclude color blind individuals from perceiving the same information. For this reason, it is important that you also provide labels that explain these functions. For example, instead of just highlighting an input field with red to communicate an error, include a label such as an exclamation point.

Descriptive link text

Avoid using meaningless link text such as “click here.” Users who use screen readers may not be able to distinguish the links from each other, making them unable to tell where a link will lead them. Instead, make sure to use text descriptions that provide users with an idea of where the link will go. Just don’t go overboard; keep it short and sweet.

Order HTML content correctly for screen readers

A screen reader will read every element on a web page to its user in the HTML order it appears. Depending on how the HTML of the content is ordered, this could mean that content is presented in a different way than intended. The visual appearance of the content should match the HTML order of the content. Otherwise, if these orders do not match, a blind user who is working with a sighted user may be confused when they encounter content that is in a different order. Additionally, a keyboard only user may struggle to predict where their focus will go next if the HTML source code does not match the visual order.

We see this when developers use CSS to change the visual layout of the page. For example, if your blog article page has a navigational menu placed at the top of the page in the HTML layout but it appears visually at the bottom, this will lead to two different experiences depending on the user.

Enable keyboard navigation for web design

Imagine not having a mouse and the only way to navigate a web page is with your keyboard. Give it a try on a website your familiar with. How easy is it? Are you able to access all the functions in the order you expected? How well are you engaging with the content? Unfortunately, not all websites have keyboard navigation and not all users can use a mouse.

To ensure keyboard accessibility, create a keyboard-friendly design for your website which includes a logical and intuitive keyboard navigation order (i.e. left to right, top to bottom). Your website’s underlying source code is structured in such a way that the reading order is correct. This is also includes using CSS techniques to ensure all of your interactive elements such as links and form fields include a focus indicator such as an underline or outline.

Remember to use an accessibility checklist

The tips we mentioned above must be followed if you wish to ensure web accessibility. However, since there is a lot more to digital accessibility than these few techniques, you should use a WCAG web accessibility checklist during development and with every website update. This helps you keep track of what you’ve already done and what you still need to do in order to create a meaningful and relevant digital experience for all your users.

Conclusion:

Accessibility, both physical and digital, is a moral and ethical issue. One that can harm your company and your brand in more ways than one if not applied correctly. There are more than 85 million Americans living with a disability. Making sure that your digital products and services are accessible to these individuals is the right thing to do. In an increasingly digital world, you have the power to help ensure that no one is left out or left behind.