Table of Contents:
ADA compliance refers to following accessibility guidelines set by the Americans with Disabilities Act (ADA). While the ADA has standards for physical accessibility — things like automatic doors and ramps — they also have standards for website accessibility. In addition to the ADA, the Web Content Accessibility Guidelines (WCAG) is another organization that’s commonly referred to as a source for guidance on accessibility. Together, these organizations help outline how to make your website work for everyone.
It can be easy to assume that everyone can click, scroll, and see screens in the same way you do. However, of people in the U.S.,
While accessibility guidelines will continue to change as technology does, this checklist will help you develop for the four principles of accessibility:
Not all users can navigate your site by visual cues. Create a site map that makes sense for users who have to navigate it sequentially. Prioritize continuity in the user journey, making key information easy to find. In addition to being better for screen readers, this is just good UX practice.
In addition to a site map that guides the structure of your site, you can also include an HTML sitemap page that shows users all their options at once and can help them find what they need. This is typically linked in the footer of your site.
It can be tempting to make forms more concise by only including placeholder copy within the form fields such as “email address” or “password.” But screen readers can’t read placeholder text, making it impossible for someone using one to correctly fill out a form. Easy fix: Label each form field above the field itself.
Alt text is a brief description of an image that will appear when the image does not — such as when the image doesn't load or when someone is using a screen reader. Alt text also helps Google pull relevant images when someone is searching via the "images" filter option. To write good alt text:
Transcripts provide a text version of audio, while captions display the words on screen. Without these accommodations, deaf users would miss out on the content completely. Plus, they allow audio/video content to be more easily followed in noisy environments or when audio is unavailable.
This is just good practice. While visual context might help some users, phrases like ‘click here’ or ‘more’ are confusing and should be avoided. Instead, try things that make the destination of the link or button clear.
Not everyone has a mouse or can use their mouse in the same way you can. Instead, people with visual or motor disabilities often rely on their keyboard. Ensure elements like navigation and sliders can be controlled by keyboard only using the tab and arrow keys. Enabling keyboard navigation is primarily achieved using semantic HTML. Keep reading to learn more.
Semantic HTML involves using tags to designate the meaning and structure of web content. Screen readers don’t just read the visible text on a page; they scan the page's code. While visual clues help some users, clues within the code help screen readers convey the correct context. Here are some of the most common semantic HTML tags you should be using on your site:
<h1>, <h2>, <h3> etc.
Indicates different types of headlines on a page, making topics and transitions more clear.
<article>
Marks article entries and helps reduce <div> tags which can lead to invalid HTML. Plus, search engines often put more weight on any content wrapped with this tag.
<section>
Designates distinct sections of your content such as in a blog.
<header>
Indicates the header section of a page that typically contains navigation links.
<footer>
Specifies content in the footer section of a website such as company information and other useful links.
<video>
Not only indicates video content but also makes it possible to display videos without using Flash and includes information such as captions.
<aside>
Can be like a section tag, but one that focuses on secondary content such as a sidebar or a post-article CTA.
Very similar to semantic HTML, ARIA labels provide additional context to elements on a webpage that might not otherwise make sense to someone using assistive technology. While HTML is the foundation, ARIA is the reinforcement for when HTML alone is insufficient. For example, complex elements, non-semantic widgets, and lack of visible text can necessitate ARIA labels.
ARIA labels fall into several main categories or “roles” that help define an element’s purpose. Here is some of the most common code:
role=navigation
Labels sections containing groups of links that allow users to navigate around the website or page content.
role=main
Specifies the primary, central content of the webpage that viewers want to access.
role=form
Identifies sections containing form controls like text boxes and buttons where users can enter and submit information.
role=search
Labels parts of a page that allow users to search within the website or page content, usually with a text input.
For icons, you may have to use a more nuanced type of ARIA label called aria-hidden. Some icons are purely decorative and don't convey meaningful information or actions. To avoid redundant or confusing output from screen readers, aria-hidden="true" hides the icon from assistive tech while keeping it visible on the screen.
For example:
<a href="#" aria-label="Visit Us On Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
To meet accessibility standards, websites must maintain a minimum color contrast ratio between text and background colors. The current WCAG 2.1 guidelines require a 4.5:1 contrast ratio for normal text and 3:1 for larger text. This higher contrast makes text legible for users with low vision or color deficiencies. Developers should test color combinations using online contrast checkers or browser tools.
Low contrast can make text appear blurred or washed out, rendering it extremely difficult or impossible to read for users with vision impairments. Following these contrast standards ensures all users can easily perceive and understand a website regardless of their visual abilities.
Similar to an intuitive site map, predictable design helps reduce confusion for all users. For example, if the search bar on the home page is in the top left, it should stay there on all other pages. If a button labeled “Connect Now” takes you to a contact form, it should do that on all pages.
While automation is powerful, it's not a magic solution. Some aspects of accessibility require human judgment and testing with real users. Combined with automated tools, user testing can help ensure a strong foundation for an accessible website.
You’ve probably seen this icon in the lower right-hand corner of some websites.
It’s an accessibility widget that allows users to select different tools to help them navigate the site, such as highlighting certain sections of the site, increasing font size, and more. Here at Vye, we use accessiBE but there are other options to choose from.
There is a lot that goes into website accessibility. While there are easy things you can do to make your site better for everyone, other items might require some expertise to execute.
Check out our website capabilities to see what else is possible and reach out if you want to talk with one of our developers.