The ADA law requires all businesses to create an accessible website. Comply with ADA standards by following these website accessibility rules.
It’s crazy to think that there was a time when businesses didn’t have to provide wheelchair access to their premises. But if your website doesn’t meet the guidelines for accessible web content, you’re like a store with stairs and a missing access ramp. You are breaking the law, overlooking your customers with disabilities and scaring away potential customers.
The Americans with Disabilities Act mandates that every website, not just large corporate websites, must be accessible to all users. And there are severe penalties for those who do not comply with the law. It also makes good business sense to make your website accessible to all users, as a frustrating website will put off potential customers.
Creating an ADA-compliant website is not a one-time task. No website is 100% accessible – it is a constant endeavor to be ever more accessible. But the effort is worth it – for your company and your customers. Here are my best tips for making your website more accessible.
The most important aspects of website accessibility
First, let’s take a look at the most important elements – the ones that affect every page of your website. By tackling these points first, you can ensure that you get the most value for your money, so to speak.
Desktop and mobile navigation also work without a mouse
Many users rely solely on keyboard navigation, and this is one of the most important elements of website accessibility. People with motor disabilities or tremors may not be able to use a mouse, so your website should be fully navigable using the keyboard only.
All focus elements have clear outlines
Website elements are “focused” if the user can interact with them in some way, e.g. by clicking on a link or changing an option. Users with disabilities use screen readers or other aids to change focus so that they can move around the website and click where they want. All focus elements should interact with keyboard shortcuts and have a clear (at least 2 px) border so that they are visible to all users.
Make sure that your color contrast meets the requirements
Sharp color contrasts help users with visual impairments to recognize your website design and read your text more easily. Standards for color contrast can be found in the W3.org guidelines here.
Use jump links
Including a skip link as the first focusable element on each page allows keyboard users and assistive technology users to skip parts of the page that are repeated on each page, such as the top navigation. This allows users to find the main content quickly.
underline link texts only
No longer underline the text to emphasize it. Only linked text should be underlined. Otherwise, this can be confusing and frustrating for users who expect underlined text to contain a link.
Use a language explanation for each page
Specifying the main language of a web page in your code enables screen readers to read the content correctly. For this reason, it is also important to specify all the places in the code where the language on the page can change.
Underline links in the text
Don’t rely on color alone to indicate that a sentence or word is linked in the text. Always underline linked text instead. This is the standard for all online content, so follow it. With most WordPress themes, you can activate or deactivate this for the entire website.
Other important factors for accessibility
Many of these other points only affect certain parts or elements of your website. They’re all important, but you may have to roll up your sleeves to figure them all out.
Eliminate empty buttons or links
Removing broken or empty buttons and links is one of the best SEO practices and improves your search ranking. But there’s more. Empty and broken buttons and links are confusing and frustrating for users with disabilities. Therefore, test your links and buttons regularly to make sure they all work.
Make sure that the forms are accessible
If your forms are not accessible, you run the risk of turning away users and losing leads. To make your forms accessible, you should check the following:
- The fields are labeled, and the required fields are clearly marked with “required” and not just an asterisk.
- all CAPTCHAs are accessible
- Input errors can be read by screen readers
- Successful entries can be read by screen readers.
Subtitles for your videos
If your videos do not contain accurate subtitles, users with hearing impairments will not know what they are saying. So your expensive video is useless when it comes to achieving a conversion, and you risk putting off a potential customer if you don’t include video captions.
Use meaningful link anchors
A link anchor should describe what happens when it is clicked. So instead of “Click here”, your anchor text could read “Click here to book your tickets”.
Stick to organized headings
When creating headings and subheadings in your content, use h1 for the main heading, h2 for the next important heading and so on. Do not jump around in the order. For example, if you title your page with h1, do not use h3 for the first subheading. Use h2. You can find more information about heading structures here.
Insert buttons to pause automatically played content
Any video or audio files that play automatically when a user visits your website should include an explicit pause button. Video and audio files can be confusing for anyone when they land on a website, not just users with disabilities. An option to pause the video or audio content is appreciated by everyone.
Alt text should be accurate
Alt text, also called alt tag or alt description, is the text that accompanies an image. If the image cannot be loaded, the alt text is displayed in its place. Making sure the alt text is correct not only makes it easier for users to understand the context of the image being displayed, but it also improves your search engine rankings and is good SEO practice.
Notify before opening a link in a new tab
Opening a new tab or window without warning can be confusing for people with visual or cognitive impairments. If they can’t see what’s happening in their browser, they lose the ability to click the back button and return to the page they were on before. So make sure that the option to notify users before opening a new tab or window is activated each time a link is created.
Never use capital letters
Words in capital letters can be difficult for anyone to read, especially for people with reading difficulties. In addition, screen readers often read the text in capital letters letter by letter and not as a whole word, which can be very confusing for people who rely on screen readers.
Do not use parallax, input animations and background videos
Movements on the screen can be confusing or difficult to navigate for some users and can cause motion sickness for others. If you need to use animations, parallax or videos on your website, you should give users the option to disable the display of these features on your website.
Use numerical pagination instead of infinite scrolling
Websites that load more and more content as you scroll down are called “infinite scroll,” and designers love them because they eliminate the need for pages. However, the infinite scrolling is difficult to use without a mouse or for users who rely on a screen reader. Instead, use pagination to make it easy for everyone to navigate your website.
Provide accurate headings for tables
For people who use screen readers and other accessibility aids, it is essential that you organize your tables correctly. Utilities use markers in the HTML code to separate the header cells from the data cells and to inform the user of their relationship to each other. W3 provides some guidelines for different types of tables.
Jump and anchor links move the keyboard focus
For users who rely on the keyboard instead of the mouse when scrolling and clicking on links, it is important that the focus can be moved together with the clicked jump or anchor links. You can see an example of this here.
Making pop-ups accessible
First check whether you need a popup, as it can be confusing for certain users. If you opt for a popup, create a popup that is accessible:
shift the focus to the popup when it opens and allow screen readers to indicate that a popup has opened.
Lock the focus of the tab key on the popup so that users cannot leave the popup without closing it.
Ensure that the “Close” button is clearly labeled and works with a keyboard or the “Escape” key to close the popup.
The focus must be designed so that it returns to the previous position on the page after the pop-up window is closed, so that the user does not lose what they were doing when they opened the pop-up window.
Let a professional web designer help you with the accessibility of your website.
I know that meeting the accessibility requirements of a website can be overwhelming. But it’s crucial from a legal, ethical and business perspective, so you can’t ignore it.
If you need help making your website accessible, fill out our short project enquiry form and we can arrange a meeting to discuss your project in detail. It’s just an exploratory meeting – completely free of charge and without obligation. But it’s a conversation that could save your business from a non-compliance lawsuit, and it could help you reach more customers and convert more leads.
