The Complete Guide on Web Accessibility

How to Make Your Website Accessible and Compliant

Businesses and brands have a lot to consider when creating – and updating – their websites. They have to choose the right designs, make sure calls to action are appropriately placed, check that everything works on mobile, and, of course, practice good SEO. But another part of web design that can sometimes get overlooked in the process is Web Accessibility.

Website accessibility is all about making sure everyone can use your site, even if they may have a disability. Accessibility – and related compliance requirements – have gotten more of a spotlight in recent years, largely due to a rise in lawsuits and other legal trends. If your business has a website, now is the time to make sure it’s compliant with any required accessibility standards.

Not sure where to begin? Our guide is the perfect starting place: We cover everything you should know about online accessibility, standards, and how a website becomes accessible. We’ll also dive into the details of accessibility guidelines, current examples, and mistakes to avoid when updating. Let’s start with a few common questions businesses have about this field and everything they should know about website updates.

What Exactly Does Accessibility Mean?

Accessibility refers to ensuring content and services are available to people with disabilities. In other words – anything that a person without disabilities can do on a website, a person with a disability should ideally be able to do as well.

What kind of disabilities are we talking about? That can vary and may include many physical and mental disabilities.

Common examples include:

• Auditory problems, where website visitors may not be able to hear, or not easily distinguish different sounds. This can be problematic when playing videos, podcasts, or other audio elements on a site.
• Visual disabilities require the use of a screen reader to read any text on a website. Other visual problems can make it difficult to read text if the contrast is low, or difficult to perceive the colors that a website uses.
• Physical and neurological disabilities that make it impossible to use a mouse or touchpad. In this case, visitors navigate websites with the help of keyboard controls and shortcuts. More severe mobility issues may also mean visitors can only use touchscreens to navigate sites.
• Cognitive disabilities make it more difficult to understand complex language or instructions on a website. This may also mean individuals need extra time to complete certain steps, which means that timers and similar elements are problematic.

Keep in mind that disabilities like these can come in many forms. Sometimes, they are permanent. Sometimes, issues are the result of aging and come on gradually. Some disabilities may only cause problems in certain conditions, such as under bright lights. Other disabilities may be temporary, like a broken arm. The CDC estimates that around 26% of American adults have some kind of disability.

What are the Benefits of Accessibility?

The first advantage of accessibility is that the website becomes usable by those with disabilities, which expands the potential pool of buyers a business has. But there are many other advantages to updating a website for accessibility, such as:

• Improving the menu design and navigation so visitors can find what they are looking for more easily. This is especially important if you have product pages and can address web traffic issues like a high bounce rate on your landing pages.
• Improving readability and text formatting for all users.
• Improving the site experience on mobile devices.
• Fixing problems with poor contrast or color choices to make the site look more aesthetically pleasing.
• Improving the site experience for those who have slow or intermittent internet connections.
• Improving the site experience for the elderly
• Getting better results from web forms and CTAs.
• Making the checkout process easier for all users to understand.
• Applying the same content guidelines to social media and email for broad digital improvements.

Is Web Accessibility Required by Law?

For most businesses in the United States, the answer is yes. That’s due to the ADA (Americans with Disabilities) Act, which was first put into practice in the early 1990s. This Act was originally made to provide civil rights protections for those with disabilities, making sure that they have equal employment opportunities and equal access to businesses and related services. Originally, much of the ADA applied to buildings and physical accessibility.

Over time, court rulings and memos from the Department of Justice indicated that the ADA also applied to the services businesses offer online with their websites, especially if that business also has a brick-and-mortar location. When the average American business takes a look at accessibility compliance, this is the primary law that’s discussed.

Nonetheless, it’s crucial to acknowledge that individual states might impose their own accessibility mandates via specific legislation. Furthermore, industry organizations and standards bodies often endorse web accessibility best practices.

Are There Different Requirements for Government-Related Accessibility?

Government accessibility is mandated in the Rehabilitation Act of 1973 and later amendments. Specifically, Section 508 – a term that often comes up in compliance-related issues – discusses the use of electronic information.

Government requirements via this mandate are often more stringent than business requirements via the ADA. This is because government services absolutely need to be as accessible as possible so that all citizens can access and use them, regardless of disability.

This is why (as we will discuss in-depth below), accessibility guidelines often have separate tiers for business compliance and government compliance. If you provide services or content through a government contract, government accessibility requirements may apply to your business as well.

How Do I Know If My Website is Accessible or Not?

Website accessibility is the sum of many parts. That can make it difficult for a business to know where to start and how to understand what needs to be changed.

There are a couple of solutions for this. The first is an accessibility audit or a program that runs an automated check on a website to look for any compliance issues. There are many auditing tools available online, some good and some not great.

The best auditing tools are made specifically for ADA and Section 508 compliance and can provide detailed lists of potential problems that web developers can go through. Some auditing tools even include options for visual indicators that point out specific spots of a webpage that are problematic.

Common tools used by businesses include these web accessibility evaluation tools. Some brands may choose a simpler approach and use popular screen readers to run through their website text and look for problems.

However, an auditing tool is only a first step. Automated audits can’t check everything, and they can only report on what appears to be accessibility problems. They require interpretation and use by experienced people with the right web development skills. Audits also need developers to take the reports and make specific changes in both design and code.

This is why it can be complicated to work on accessibility updates in-house, and why many businesses prefer to partner with an agency experienced in auditing and accessibility development like Blue Atlas Marketing.

Are There Official Guidelines for Website Accessibility?

Yes. They are known as the Web Content Accessibility Guidelines, or WCAG, and are currently on version 2.2. Most individual laws don’t make specific website requirements – that would be too complex and require too many updates. However, some cite the WCAG as the proper guidelines to follow, and the standards are internationally accepted, making them the best way to meet compliance requirements no matter where you plan on offering products or services.

The WCAG is collected and published by the World Wide Web Consortium, W3C, and the Web Accessibility Initiative, or WAI. These groups work with experts around the world to develop standards and ratify them through several phases of consensus.

Alistair Duggin, Head of Accessibility at GDS, explains the four ‘POUR’ principles of accessibility.

There’s a lot of information in the WCAG 2.1, but it can be summarized by referencing four pillars, the four things that a compliant website should be:

• Perceivable: Individuals with disabilities should be able to perceive all available website content. This pillar closely relates to our senses – sight, hearing, and touch-related interactions. If a user doesn’t have one of those senses, then a website should still be perceivable to them.
• We’ll talk about how this is done in more detail below. Still, it typically means offering an alternative way to perceive content and ensuring no content is locked behind only one “sense,” like a video that must be seen to be understood, or a header image that must be seen to be read.
• Operable: There are many ways a visitor can operate a website. They can click on menus, choose dropdown options, select products to put in a cart, fill out web forms, select buttons, scroll down a page, and so on. All these operations should also be available to individuals with disabilities, even if they can’t use certain devices.
• That means a website should be fully navigable for people who use a keyboard or can access a landscape touchscreen. It also includes people using a joystick instead of a mouse or those using a mouse/touchpad but only with limited movements. Again, we’ll go into some details below.
• Understandable: All the content on the website should be understandable to users. This means that screen readers must be able to correctly read out all text, with no behind-the-scenes coding problems that make the reader nonsensical.
• On a deeper level, this pillar also applies to all text and how easy it is to understand: Websites should use clear language and avoid overlong explanations or confusing technical jargon that the average visitor won’t understand.
• The website’s instructions for web forms, CTAs, etc. should be clear, and the exact phrasing should be used for all similar actions. This not only helps those who may have cognitive disabilities but makes the site a lot friendlier for everyone.
• Robust: This means that website content should work with any type of assistive technology that visitors may be using. That includes screen readers, joysticks, and so on.
• Content should also work well on alternative devices like tablets or smartphones, as well as across all common browsers like Chrome and Safari. Content should be created in such a way that it will continue to work with these devices/browsers over time, even if new technology and updates come along. This usually means choosing smart, durable coding options and keeping the website properly updated.

WCAG Levels of Conformance

Additionally, if you look through the WCAG 2.1, you will see that its “success criteria” is divided into three different tiers, conformance levels called A, AA, and AAA:

• Level A: This is a baseline level of conformance for online content. It’s a starting place, but shouldn’t be the end goal for any business with a website.
• Level AA: AA conformance is the goal for businesses with their websites. These standards are achievable for any website without being too difficult or complex. Following these guidelines will ensure reasonable accessibility for those with disabilities.
• Level AAA: This is the highest conformance level and is typically reserved for government websites and related services. Average business sites may find it difficult to implement this level of conformance without drastic changes to web design.

The WCAG is periodically updated to account for new devices and technology, as well as ever-evolving web coding approaches. In fact, the WCAG 2.1 is due to be updated to the WCAG 2.2 with new information, something that’s taking a little longer than expected due to factors like the COVID-19 pandemic but should happen within the next year or so.

However, the WCAG’s focus is not on specific types of coding or design elements that websites should use. While the guidelines include some potential web accessibility techniques developers can use, they are only examples and not requirements. This allows developers to choose the best approach for a specific site – using HTML5 tags instead of including ARIA categories, for example, or sticking with CSS while still making the necessary layout changes.

Does Website Accessibility Compliance Change Over Time?

The general requirements for websites don’t really change – they need to be accessible to people with disabilities, and there’s not much more to add. However, technology does change over time, and this means that specific standards are occasionally updated.

For example, some laws were updated to expand the definition of electronic documents or specify that websites are also covered. The WCAG updates we mentioned above change the guidelines to consider new kinds of assistive technology and new tech like mobile devices.

How Long Does a Website Accessibility Update Take?

It’s difficult to set a timeline until a website has been audited and an updated plan has been created. If the changes are minimal and easy to make with basic edits, the project may take a week or two. If the website is large and needs a broad redesign, including new color and graphics choices, then the update can take months or more. An experienced development agency will be able to give you a more precise estimate.

How to Make a Website Accessible

We’ve already used broad explanations to talk about website accessibility and how it’s done. But what do those standards look like when actually put into place? What can you reasonably expect to change on a business site to make it compliant? Let’s look at some of the most common updates and why they’re necessary.

• Alt text on images: Image metadata has space to add alt text, which a screen reader will automatically read aloud to listeners. Alt text should always helpfully describe an image as concisely as possible so those who cannot see it know why the image is there. If an image contains much information, like a graph or infographic, it should also be created to work with screen readers.
• High contrast, especially for text backgrounds: Text color should always be at a high contrast to the background so those with visual problems won’t have trouble reading it. This is also true of menu colors, buttons, and other areas where color differentiation is vital to website navigation.
• Clean, well-spaced fonts: This not only looks better but is a boon to those with certain kinds of visual impairments, dyslexia or related conditions, and attention deficit disorders. Sites may also have an on-page option to increase text spacing, etc.
• Magnification support: A website should be easy to magnify with assistive technology to make text larger – without losing valuable information. That usually means the text will automatically rearrange to continue fitting on the screen when magnified. This also helps make sure the site is optimized for mobile devices.
• Clear glossaries, site maps, and tables of content: These additions aren’t just helpful for newcomers, they are also very important for those with visual disabilities trying to navigate the site and find what they want. It can also be helpful for those with various neurological conditions, learning disorders, and so on.
• Easy keyboard navigation between selection options: Keyboard navigation should be easy to use with the Tab and Shift keys, allowing users who cannot use a cursor to move through the website quickly. That means including logical, quick progression across menus and any buttons or selection options on the webpage. No option should be inaccessible by a keyboard. Keyboard navigation should also move through any in-text links and allow users to follow them. It’s also a best practice to include basic skipping options on a webpage so keyboard users can immediately skip to the most important button or content. Adding search functions is also very helpful.
• Descriptive tags for website elements: Screen readers don’t just read the visible text you see on a site and alt tags – they can also read a wide variety of other tags that can be placed to describe different website elements and why they are there. Descriptive tags can indicate where a web form is, for example, and what specific information that form is asking for, as well as telling listeners when something is a button, navigation element, menu, etc. That makes these tags vital for website interaction. However, tags must also be placed accurately and should replace any coding that screen readers would find confusing. There are a variety of approaches for this, including ARIA (Accessible Rich Internet Applications) and the newer tagging options that HTML5 provides.
• Colors friendly to those with color blindness: Certain shades should not be combined in menus or navigation because they can confuse those with color blindness.
• Captions and subtitles: Any audio content on a website, like a video or podcast, should be accompanied by captions and subtitles so that those with hearing loss (and those who don’t want to turn the volume on) can understand. If a video tackles a particularly complex topic or has a lot of dialogue, it’s a good idea to provide a separate transcript. Likewise, those with vision problems may need audio to describe what is happening in an important video clearly, so audio clips also have an important role.
• Logical and consistent header use: Headers help break apart content and identify different sections or categories for a webpage. Header use should always be consistent: If an H1 header is used in one location, H1 headers should be used in that situation throughout the website. H2 and H3 headers should always be used in descending order.
• Reactive elements that change when used or highlighted: Menu options, buttons, and other form control elements should always make it clear when they are highlighted, changing to a different color or design. This should work if the element is highlighted by the keyboard or mouse cursor.
• Autofills: When possible, websites should use autofill features for web forms to make it easier for individuals with disabilities to fill out forms, and help improve accuracy while saving time. Again, this is one of those features that also helps the average visitor!
• Clearly differentiated anchor text: Any text that includes a link should make that link visually apparent and should indicate when that link is used.

Accessibility and Lawsuits

In recent years, there has been a growing trend of ADA-related lawsuits that every business with a website should be aware of. These lawsuits specifically target websites and claim that the sites don’t meet accessibility compliance as required by the ADA.

There are several problems with this. First, these lawsuits are filed in select locations and states with their own specific accessibility requirements, in hopes that the courts will be more willing to consider the suits.

Second, these suits have grown exponentially in recent years and many appear to have a common goal – getting a swift settlement from the company before the matter can even reach a court, or soon afterward (and it’s not only websites that are being targeted with this tactic).

Third, the lawsuits often use cheap accessibility auditing tools and point to the reports generated to show that websites aren’t compliant. As we’ve mentioned, this is not a reliable way to examine website accessibility, but case law is fuzzy in this field and the limits are being tested.

This is another reason that website accessibility is more important than ever before. Not only do you not have to worry about fines or lost business, but it’s also less likely you’ll be targeted by a lawsuit. Your business will also have solid evidence that you have made your website compliant with current laws.

Accessibility, Overlays, and Specific Mistakes to Avoid

With so many approaches to accessibility, it’s important to avoid making mistakes that won’t meet compliance requirements or may make your site even less accessible. Here are some of the problems we notice websites making when they approach accessibility the wrong way.

• Using an accessibility overlay instead of changing the site. An overlay is an extension added to your website to give it accessibility features, like increasing the text size or using an on-site screen reader. At first glance, this may seem like a way to make a website compliant without needing in-depth changes or code alterations. In practice, it’s not a good idea. Overlays are too limited to cover all compliance issues, and their options don’t work the same across every site. The features they add can interfere with apps or assistive technology that individuals with disabilities may already use. They also can’t affect things like video captions or keyboard navigation. Ultimately, direct changes are the best way to ensure a website is accessible now and in the future.
• Adding too many unique keyboard shortcuts. Website shortcuts are theoretically an easy way for frequent users to save time. However, individuals with disabilities already rely on their own keyboard shortcuts for navigation and browsing the internet. Adding unique website keyboard shortcuts can mess up those innate shortcuts and make the site difficult or impossible for keyboard users to navigate.
• Using too many tables. Tables are an easy way to display detailed information, like tier packages of a service. However, they don’t play well with screen readers. Screen readers tend to have a lot of trouble parsing exactly what a table is trying to say, and can quickly confuse visitors who rely on this assistive technology. It’s better to keep tables very simple and clearly labeled or to use a different design element instead.
• Coding that places elements in different locations. Some websites use code techniques to relocate certain content to a different spot (making it appear at the top of a webpage, for example) without needing to move the content in the code itself. The big problem is that screen readers can’t tell the difference. They will read out the content where it’s located behind the scenes. It’s best to avoid this option when using style sheets or other design options.
• Flashy or distracting graphics and animations. This can be dangerous for those with epilepsy and similar conditions. It’s also generally poor website design to make animations that distract from important content you want your visitors to focus on. If your website needs flashing animation like an embedded GIF, it should be coded to turn off after a few seconds.
• Relying on a single audit report. Again, audits need to be used by developers with experience in accessibility to be useful. Even the best audits will only catch about 70% to 80% of the changes that need to be made to a site to make it fully accessible. Experts and additional reports are the best way to assure accessibility. Some services also offer ongoing reports so that companies can monitor accessibility regarding new content.

Key takeaways

Key takeaways for enhancing web accessibility include adopting best practices and guidelines to ensure websites are perceivable, operable, understandable, and robust for all users, including those with disabilities. Focus on accessible web optimization through compliance with ADA accessible website guidelines and the Web Content Accessibility Guidelines (WCAG). Implementing these strategies not only broadens your audience by making your site more inclusive but also mitigates the risk of legal challenges.

Make Blue Atlas Your Accessibility Partner for Web Development

Planning for a web accessibility update can quickly grow complicated. If your team is feeling overwhelmed by the idea, contact Blue Atlas Marketing today. We can provide consultations and advice on what your unique website needs to become accessible. When the time is right, our experienced developers can help with website updates, redesigns, and new additions. We’ll also be happy to answer any questions you have about the process, accessibility, and more.