What About My Website
How to make your website ADA compliant
Learn how to make your website ADA compliant using WCAG and Section 508 below!
When it comes to making your website ADA compliant, the go-to recommendation revolves around the WCAG 2.0 guidelines — including for Section 508 Standards. This resource outlines several recommendations or goals for making your website ADA accessible to users across the U.S.
The core principles that guide WCAG include the following:
- Perceivable: You want users to be able to perceive all the information that appears on your site, like text, images, video, and more. Even if a user can’t see your website’s text or listen to your website’s video, you need to provide an alternative.
- Operable: You want users to have the capability to navigate your site and use all its features. Any user, for example, should have the means to use your main navigation and any site tools, like calculators.
- Understandable: You want users to have the means to understand your website content. That means users can understand your site’s text, images, videos, and tools. For example, your site may include instructions for using a feature, like a calculator or a contact form.
- Robust: You want users to have the ability to receive the same experience, even if using assistive technologies. For example, people reading your content versus those using a voice reader should get the same content even if it’s delivered differently.
Need help becoming ADA compliant?
Becoming ADA compliant is important and time-consuming. That’s why businesses invest in ADA compliance services, like those from ADA Compliance Pro. With our services, your company can achieve ADA compliance instantly, thanks to our AI-powered system.
Request a free proposal today to learn more about our ADA compliance services now!
Those principles translate into these actionable items for ADA compliant websites:
| Rule | Action Item |
|---|---|
| Captions | For all live video, provide captions. You can add captions to your live videos using software or professional services. |
| Audio descriptions | Provide audio descriptions for all pre-recorded content. You can also add a link near the content that directs users to your audio description. |
| Contrast ratio | Maintain a contrast ratio of at least 4.5:1 for text and images of text. Exceptions include large text or images of large text, logotypes, or incidental text or images of text. |
| Text resizing | Allow users to resize site text (without any assistive technology) up to 200%. The resize must not cause a loss of content or site functionality. This ADA compliance item does not apply to captions or images of text. |
| Images of text | Avoid using images that feature mostly text to convey your content unless users can customize the image or the image is essential. If you want to use these kinds of images, like for pull quotes, substitute them using CSS, which can stylize text. |
| Navigation options | Offer users more than one option for locating a page on your site, unless that page is the result or step in a process, like completing an online checkout. Adding an HTML sitemap, site search, and consistent navigation menu can help you accomplish this to-do. |
| Headings and labels | Use headings or labels to describe the topic or purpose of content. Aim for descriptive and straightforward labels or headings. You should also label all site elements, like a pricing table or contact form. |
| Focus visible | Anyone accessing your site with a keyboard should have the ability to see the keyboard focus indicator — or the outline that appears on a form field — on-site elements like links, form fields, and menus. Add this feature to your website with CSS. |
| Language | For any website content that isn’t in your default language, add a language attribute to the page. A site that uses English, for instance, may add a language attribute for a page with content in French. |
| Navigation consistency | Provide a consistent navigation location and organization for users. Your navigation menu, for instance, should always appear in the same spot (like the left-hand side) and with the same menu items. |
| Identification consistency | Site elements with the same function should have consistent identification. You can label and name these elements, for example, and use identical alt text for elements with the same purpose. |
| Error suggestion | Offer users suggestions for fixing input errors, like the format of a phone number in a contact form. You can provide correction recommendations via text. |
| Error prevention | Any pages that generate legal commitments or financial transactions, modify or delete user-controlled data, or submit user test responses must be reversible, checked for errors, and confirmed before submission. Create an order confirmation page, for example, or allow users to cancel orders within a specific period. |