Accessibility issues to watch out for in Bootstrap 4
Bootstrap 4 is very thoroughly built to meet digital accessibility standards. For the most part, things are semantically correct, relative units where there should be relative units, classes to hide things depending on if you still need screenreaders to see them, etc.
Bootstrap 4 accessibility documentation
There are just a few things that seem to have been overlooked?
UPDATE: I haven’t looked at this since July 2017, so it’s super possible a great much of this has been addressed. So jot that down.
The most obvious accessibility issue with Bootstrap 4 is color contrast, and there are many, most of them linked to the main color palette.
WebAim color contrast checking tool:
Success, Info, Warning, Danger
The colors associated with the classes
text-danger all fail the minimal color contrast against a white background. Bummer. https://v4-alpha.getbootstrap.com/utilities/colors/
Info: a light blue
FYI, nothing recognized as yellow will ever go with white and I am very sorry, that’s life. If you darken this color until it passes you now have brown.
Danger: a red
This all applies to these colors used with the
.bg- helper classes:
Additional Note: You might want to also watch out for these colors used with Bootstrap 4’s frequently used background greys. For example, the basic link blue
#0275d8 works on white, but not on one of their medium greys
#eceeef. Look out for the light grey
#f7f7f7 as well.
Links in the Breadcrumb component do not have sufficient contrast either.
#eceeef has a contrast of only 3.98:1
The Bootstrap 4 Accordion component also uses that same link color against that same background color.
(Otherwise the Accordion is nicely done.)
Honestly, I’m a little surprised with Bootstrap 4 on this. Color contrast is one of the easiest things to evaluate and one of the easiest things to fix.
In some of the color options for the Bootstrap 4 Navbar component, you’ll find some links don’t have sufficient contrast with the background.
.nav-link elements are black with an alpha transparency that comes out to around
#808080 which fails against the background
.disabled version of
.nav-link is even lighter, so that will fail as well.
.navbar-text element has the same issue — it’s too light.
Watch out for the
.btn-outline- color helper classes as well — some of them like
.btn-outline-secondary don’t pass.
.table-striped creates a text/background color combination that doesn’t quite check out.
There are a lot of reasons to avoid carousels, but that’s a different topic. Bootstrap 4’s Carousel component has an accessibility gap you might want to take note of.
Play/Pause: There is no built-in component to play/pause an automatically rotating carousel.
A good resource on accessible carousels (if you can’t talk your client out of using one).
W3C Web Accessibility Initiative | Carousel Concepts
Overall, for a carousel, this one is nice. It’s semantically solid and keyboard navigable, so cool.
I’m a little surprised Bootstrap 4 has so many color contrast issues, since it’s a relatively easy thing to check for. Overriding Bootstrap 4 styling can be a real pain, so it’d be nice to see these things sorted out before beta.
In the meantime, embrace digital accessibility as the Right Thing To Do, consider it part of your web development workflow, and always keep trying to make the internet better.