Digital accessibility is becoming a hot topic among business and organizational leaders. And for a good reason. Millions of potential users are bouncing away from inaccessible websites daily, resulting in an often untapped market advantage by making websites accessible. Over the past 10 years, there has also been a substantial increase in website accessibility lawsuits and demand letters under the Americans with Disabilities Act (ADA), resulting in significant liabilities and fines. But how do you make your website more accessible? Let’s dive in.
Why Making Your Website Accessible is Critical
The internet is about making information and communication universally accessible (hence the name “the world wide web”). And it is in that spirit that we understand why improving website accessibility is so important: people with visual, auditory, motor, and cognitive disabilities deserve the same ability to access opportunities and resources as everyone else.
According to the Centers for Disease Control, more than 61 million Americans, or roughly 26%, are considered disabled — many of whom rely on assistive solutions to access the internet, including screen readers and keyboard-only navigation. This number increases to 1 billion when considering the world population. Not only is this demographic increasing as the population continues to trend older, but they also control a significant portion of disposable income.
Websites aren’t the only frontier for accessible design, either. Apps and mobile web versions are increasingly becoming the primary way users access internet services and platforms.
Challenges to Making Websites Accessible
If there were easy fixes for how to make a website more accessible, more organizations would do it. Instead, there is a growing and stark “accessibility gap” between leading corporations, such as Amazon and Apple, who have fully embraced accessibility with comprehensive and robust solutions, and small and medium-sized businesses. Moreover, 97% of the top one million websites contain Web Content Accessibility Guideline (WCAG) violations despite the ADA being in place for 30 years.
The challenges to improving website accessibility are due to the technical knowledge, time, and resources required. The average small business owner does not have the skill or bandwidth to handle an accessibility project, and web developers are often untrained in best practices. And the costs only get more substantial when attempting to retroactively make your website accessible rather than building an entirely new website from the beginning with accessibility in mind.
How to Make a Website Accessible
Website accessible design is built around the WCAG technical standards. These standards are published by the World Wide Consortium (W3C) and provide the best practices to make websites perceivable, operable, understandable, and robust for everyone. Most U.S. and international laws regarding digital accessibility are based or built on the WCAG “gold standard.”
While most websites will require professional solutions to reach ADA and WCAG compliance and be considered protected from litigation, according to a 2022 report by WebAIM, the vast majority (nearly 97%!) of web accessibility issues fall within just six categories.
These are the six most common accessibility issues:
- Poor text-to-background contrast
- Lack of alt-text
- Empty Links
- No input form labels
- Empty buttons
- Missing language designation
If website hosts were solely able to address these six areas, the ability of people with disabilities to access information and navigate websites would improve significantly. The number of liabilities and blaring WCAG violations websites would also greatly diminish.
Poor Text-to-Background Contrast
When there is not a strong enough contrast between text and background color or images, words and letters can blend in and become invisible to people with low visual acuity. If the contrast is too weak, even people with perfect vision will struggle to distinguish the poorly formatted text.
According to WCAG best practices, the regular text should have at least a 4.5:1 luminance ratio, and large text at least a 3:1 ratio with its surrounding elements. There are hundreds of measurement tools online to test color contrast to ensure visibility and compliance.
Lack of Alt-Text
Screen reader users either have difficulty reading displays or can not do so at all, meaning they need text alternative descriptions for all visual elements on a webpage, including images, videos, and infographics.
Alt text is a tag added into an HTML script for an image that is hidden from normal display users but can be detected by screen reader tools. The descriptions must consider content and context to convey the meaning and intent of the image accurately.
Empty Links
When images, such as shopping carts, social logos, and search icons, are hyperlinked but do not provide a text description for what they do or are intended for, they are barriers for people who rely on screen readers. Each of these elements should contain anchor text in their <a> tags identifying them so someone who is being dictated a website can understand.
Accessibility checkers can be used to quickly scan websites to identify empty links. However, manual review and testing of a website are ultimately needed to ensure full compliance with these standards. At this time, automated tools cannot account for ambiguous or uncontextualized anchor text and will provide false negatives if they are being used.
No Input Form Labels
Wherever input or form elements exist, such as a sign-up field or questionnaire, there should always be <label> elements associated with a <input> field. When these are missing, designed poorly, or unclear, users will be confused about what the input fields are for and how to interact with them.
Empty Buttons
There are similarities between empty links and empty buttons, but they are different errors. Hyperlinks use the <a> tag, are triggered with the “Enter” key, and redirect users to a new page or a section. Buttons are designated with the <button> tag and are generally identified within a bordered box and are used to execute actions with either the Spacebar or Enter key, such as opening a media player, downloading a file, or adding a product to a cart.
When buttons do not have concise, descriptive text in a “value=” attribute, they create barriers for those using screen readers. These errors can be identified through the help of accessibility testing software.
Missing Document Language
Websites should include language declarations, search engines, and screen readers by adding an appropriate language value to an xml:lang= attribute. For English, this should look like xml:lang=”en” lang=”en”. These declarations should be included in a website’s theme and all web page headers.
When these values are not found, assistive technology users can be adversely impacted. Screen readers, Braille keyboard displays, and speech synthesizers all use language declarations when conveying information.
How to Add Accessibility to a Website — Available Tools & Methods
As mentioned above, various tools and methods are available when designing for accessibility, including automated accessibility checkers and manual testing. These tools are best implemented when building a website from the ground up.
However, for older websites not designed initially for accessibility, these solutions may not be enough. Accessibility checkers can identify thousands of errors on a website simply by scanning through it. These errors represent countless hours of work needed to address them, not to mention the knowledge on hand necessary to know how to fix them and why.
Accessibility overlays are one viable solution quickly emerging to solve the price and skill gap in web-accessible design. Leading overlay providers are using AI to recommend fixes for errors and allow users to manually review and accept remediations, which then make code-level changes to a website.
