A Beginner’s Guide to Web Accessibility

The ADA’s Domino Effect on Web Accessibility

Since the Americans with Disabilities Act (ADA) was enacted in 1990, the growth and influence of the digital world on the physical has raised questions and concerns about how technology and the World Wide Web serves online users with disabilities. The act prohibits discrimination based on disability, but in the early nineties the digital landscape was not nearly as ingrained in everyday life as it is now. In the last 30 years, this act has expanded to accommodate new media and to advocate for online users with disabilities.

While web accessibility has always been an important topic, it has been shrouded in a lack of understanding and, therefore, has not always been enforced. In October 2019, a lawsuit against Domino’s peaked discussion and speculation about the responsibility of businesses to ensure an accessible digital presence. The lawsuit, initiated by a blind customer who was not able to order food from the chain’s website, was escalated from a lower court judgment to the Supreme Court. The Supreme Court denied the petition from Domino’s, resulting in a win for the plaintiff as well as a bright spot for disability rights advocates. This unprecedented result has since created a ‘domino’ effect of nervousness for business owners across the country who may not currently have accessible websites or digital applications.

With a new precedent that increases the likelihood of penalties for websites that don’t comply with accessibility standards, now is the time to learn, adjust, and open your online presence for use by a wider audience.

Fundamentals of ADA Compliance & WCAG Standards

As the internet became a mainstream public forum and lacked direct regulation under the ADA, the Web Content Accessibility Guidelines (WCAG) were developed as a tool for web developers. The current version of the WCAG (WCAG 2.1) lists pages of best practices and guidelines to make your website accessible. It’s very comprehensive and overwhelming, to say the least.

You may ask yourself, how do I even know where to begin? How can I avoid or reduce the likelihood that someone might file a complaint or lawsuit against me? More than that, is there a surefire way I can provide a website that is accessible and easy to use for everyone?

We’re glad you asked. To start off, it’s important to have a baseline understanding of web accessibility standards.

What is ADA Web Accessibility and Compliance?

Although there are currently no specific federal guidelines mandating online accessibility, it is best practice to optimize your website in a way that allows users with disabilities to access it. Not only it is best practice, but it also is good business; you never know how creating an inclusive environment for online users may positively impact a potential customer’s view of your company.

Lucky for business owners, there is already an established set of guidelines to help you update your web standards—this is where the WCAG comes in. The Web Content Accessibility Guidelines (WCAG) were first established by the World Wide Web Consortium (W3C) in 1999. These guidelines have since been universally accepted as the gold standard when it comes to accessible web design. When a site adheres to these recommendations, it is considered compliant with the Americans with Disabilities Act, providing a quality user experience for everyone.

Levels of WCAG Compliance

The most updated WCAG standards are established within WCAG 2.1. Conformance to these guidelines is broken down into three different levels of accessibility: A, AA, and AAA. If a website is at level A, it meets the minimum accessibility standards of WCAG 2.1. In turn, a level AA site meets both expectations of level A and AA.

As a general rule, all websites should strive to conform to at least level A requirements. However, many large, public-facing websites and applications are often expected to meet level AA. Level AAA is considered the highest standard to reach for, but requires your site to be adjusted in ways that can seem extremely daunting and perhaps even impossible depending on your website set up. Regardless, whether you are the sole proprietor of a small business or a CEO of a Fortune 500 corporation, everyone should aim to reach some level of accessibility.

Core Aspects of WCAG 2.1 and ADA Compliance

The WCAG operates on four principles:

1. Perceivable
2. Operable
3. Understandable
4. Robust

Principle 1: Make Web Content Perceivable

The perceivability principle means that all content on your website should be available to all users in a way that they can perceive. Depending on their background, technical experience, and abilities, all users perceive information differently. Many users with disabilities that affect their ability to navigate the web rely on assistive technologies (ATs) to consume information and navigate around the internet. However, if your website isn’t compatible with these ATs, then you are essentially shutting the door to any users who rely on those tools.

There are a handful of practical adjustments you can make to your website so that its user interface and information are perceivable by assistive technologies.

Create Text Alternatives for Non-Content Elements

For users with visual impairments, any images or visual aspects of your site may be difficult or impossible to digest. By ensuring each meaningful image, graphic, icon, or logo on your site has descriptive alt text, you allow users with screen readers and similar tools to perceive and digest the purpose of your images. Descriptors and content can also be added in the form of aria labels to icons, symbols, and other graphic elements. For graphics and images that are purely decorative and do not communicate any meaning to users, you may omit alt text. Keep in mind that alt text also helps search engines index and organize images so they can show up in search results. If you’d like a decorative-only image to contain alt text for SEO purposes, you can indicate in the code that an image description should be skipped by screen readers. For elements such as icons, no alt text is needed as long as there is a title near the icon explaining what the image represents. This avoids redundancy for visitors who use screen readers.

Provide Alternatives for Time-Based Media

While audio-only or video-only features on your website may be appealing in some cases, WCAG 2.1 expects that a text alternative is also available. For example, users with ATs may be unable to perceive that your video provides instruction on product assembly unless you provide a text description of how to assemble that product as well. Luckily, many platforms such as YouTube and Vimeo provide ways of adding your own captions to videos.

Make Content Adaptable

There are a number of ways to create adaptable content in order for a wide scope of users to perceive it regardless of how their AT may format the site. Make considerations to the way content is laid out and coded so the structure makes sense. Other aspects to think through are any sensory characteristics a site may have, such as instructions that may say, “click the button to the right.” Due to the reformatting of content by assistive technologies, this directive may not accurately depict which button is being described. A better description would be, “click the button labeled ‘next’.”

Principle 2: Create a Website that is Operable by all Users

Many users with mobility, dexterity, or other impairments depend on keyboards or other ATs to navigate a site. This being the case, you should work to ensure that your site doesn’t pose a roadblock to any user in operating your site’s menu and user interface. To begin, consider the following:

Ensure Your Site is Keyboard-Accessible

Users depending on a keyboard to navigate your site should be able to tab through your content without getting trapped in an iframe or stuck within a pop-up.

Give Users Enough Time

If time-limited content such as a slider exists on your site, users should be able to either turn off the time limit or choose to extend the limit. For any information that lasts longer than five seconds, controls should be available to pause, stop, or hide the information. For sliders, it is recommended that you turn off the auto-play altogether and offer availability for users to click through the slider images at their own pace.

Consider Physical Reactions to Website Features

For users prone to seizures or other physical reactions, your website should not include anything that flashes more than three times per second.

Make Your Site Easy to Navigate

In the same way you would create a page structure and content that allows users the freedom to choose where they want to go, consider ways to help users with disabilities navigate, find content, and determine where they are in your site. This may include menu labels, breadcrumbs, or other navigational features to show where they are located in the site and how to get to additional pages.

Vary Input Modalities

Consider the way that users tend to use your site. Do they need two fingers to pinch and zoom?  Make sure functions like this can be used with a single point (like a cursor or keyboard click) as well.

Principle 3: Ensure Content is Understandable

When visiting a website, you fully expect that its content and the way it works to come intuitively to you. It is important that we not exclude users with disabilities in this expectation. When making adjustments to optimize your site to be understood by a broader audience, focus on readability and predictability of content, as well as input assistance.

Write Readable Content and Code

While writing content at a level understandable to your users’ reading levels is important, copy is not the only thing that should be readable. One consideration to make is that since screen readers rely on HTML language attributes to load pronunciation rules and more, be sure to include the proper markup in your code.

Content Should be Predictable to all Users

The pages on your website should appear and operate in predictable ways to your users. One way of doing this is by making sure no content changes occur when an element is simply on focus. For example, a form should not submit automatically when a screen reader tabs through form fields and lands on the submit button. Your form should be set up that in order to submit, a visitor utilizing tabs would have to first tab to the submit button, and then activate that button to complete the submission.

Ensure Opportunity for Web Input Assistance

If a user makes a mistake, they should be able to correct the mistake. Your website is even more effective if you can avoid opportunities for user mistakes altogether. A clear way to accomplish this is to ensure that any errors (a required form field was not filled out, e.g.) are clearly stated with text descriptions or aria attributes. This helps users understand where an error occurred and how to fix it.

Principle 4: Build a Robust Web Environment

The necessity for a robust website is threaded into all other principles, but the importance cannot be stated enough. A broad scope of users and assistive technologies should be able to read and interpret your content. Building your website or app’s code with best practices in mind will ensure that it is compatible with current assistive technologies, as well as any technologies that may be used in the future.

How can I Make a Site Compatible?

One way to make your content compatible is by the way it is parsed in code. Ask your developer if start and end tags are complete, elements are nested properly, IDs are unique, and elements don’t contain duplicate attributes.

How to Optimize Your Website to Meet Accessibility Guidelines

The number of rules and suggestions that make up WCAG 2.1 can be overwhelming, and this list we provided is not exhaustive by any means. Admittedly, Webspec does not currently have an accessible website. Following the release of a new brand identity in the Fall of 2019, Webspec plans to launch a new site in early 2020 tailored to meet the needs of users with ATs. With web accessibility expectations still relatively new to web developers and agencies across the country, it goes without saying that we all have some work to do.

Even if you do have a firm grasp on all of the standards and what they mean, it can be a challenge to strategize the best way to implement those changes on your website. Webspec has worked with state agencies, large corporations, and small businesses towards this end. Reach out to us about an ADA compliance audit, and we’d be happy to help you get started. Let’s work together towards a more accessible web environment!

To learn more and view a complete guide on WCAG 2.1 standards, click here.