Is Bootstrap ADA Compliant?

If you have a business, chances are you have a website for it. You’re also probably aware that ADA (Americans with Disabilities Act) compliance applies to your website, just like it does for stores and offices with physical addresses. 

However, if Bootstrap was used to build your site some elements and settings aren’t ADA compliant. That puts you at risk of being sued. The only way to ensure compliance is to have a website accessibility audit performed followed by the remediation of all the non-compliant issues found. 

What is Bootstrap?

Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. It’s completely free to use and helps developers build websites quickly without having to write hours of CSS code. These and other attractive features help explain its popularity. 

Wonderful as all of that is, Bootstrap does have one glaring flaw: many of its non-compliances are built-in. So, whether you created your company’s website yourself or had a developer do it for you, if you used Bootstrap, you could have added non-compliant elements without even realizing it.

Out-of-the-Box Non-Compliancies

Maybe your website was created with the most recent version of Bootstrap. You might have heard this version has improved accessibility features. This is true, but you can’t rest easy because no version of Bootstrap is completely compliant.

Be aware that ADA website compliance must be 100%. One non-compliant element makes your entire website non-compliant. And disabled users haven’t been shy about suing businesses with inaccessible websites in recent years. 

Here are some examples of Bootstrap’s built-in non-compliant elements:

Color – Bootstrap’s developers readily admit the default colors that come with it aren’t accessible. They don’t comply with the 4.5:1 WCAG 2.1 (Web Content Accessibility Guidelines) non-text color contrast ratio. This ratio provides enough contrast between the text and background on a page, which helps users with low vision or who are colorblind see things more clearly.

Layout – Many disabled users rely on assistive technology instead of a mouse. Websites created with early versions of Bootstrap make it hard for these users to navigate pages in a logical order with their keyboards.

Inputs – One problem that arises from the previously mentioned color contrast issue is disabled users might not be able to fill out online forms. This happens to disabled users with low vision on some Bootstrap websites. When they change their browser settings to high contrast to improve their view of a page, the input fields stay black. They can’t see what they’re typing, so they can’t fill out any forms.

Baked In Compliancies

Bootstrap has made an effort to improve accessibility in its more recent versions. They’ve added ARIA attributes to help disabled users who depend on assistive technology like screen readers to navigate websites.

Other examples of Bootstrap’s improved accessibility features include:

• Interactive elements, like dropdown menus now work with touch, mouse or keyboard users.
• Website media can be slowed down.
• Scrolling has been improved through the use of a scroll behavior property.
• Content that is hidden from sighted users can still be accessed by screen readers through special classes.

These efforts to increase accessibility are certainly welcome and show the developers are serious about improving access to Bootstrap websites. But someone with no knowledge of ADA compliance and WCAG guidelines may still create a non-ADA compliant website using Bootstrap. 

The Bottom Line

Now that you know some Bootstrap elements and settings aren’t compliant, you may be certain your website is not ADA compliant. If you do nothing, you risk being hit with an expensive lawsuit. Also, since the CDC estimates that 1 in 4 Americans have a disability, you’re shutting out a significant portion of the population. 

The best option is a manual website accessibility audit of your site. That way, all non-compliant issues can be remediated and you can be certain your Bootstrap-created website is truly ADA compliant.