Making Bootstrap a Little More Accessible
PreviousGetting Bootstrap to Play Nice With MasonryNextSpicing Up the Bootstrap Carousel with CSS Animation
Last updated
Was this helpful?
Last updated
Was this helpful?
By Rhiana Heath
Like many front-end developers, I work with Bootstrap often. Sometimes I might need it for a quick proof of concept.
Other times I may inherit a larger project which has Bootstrap entrenched in the Web Application. It's versatility and success has meant that you start to see it everywhere -- it is clearly a very useful and popular tool.
But first a quick recap.
Visual impairments
Hearing impairments
Motor impairments
Intellectual disabilities
Text
Normal
Bold
Ratio AA
Ratio AAA
Small
< 24px
< 19px
4.5:1
7:1
Large
> 24px
> 19px
3:1
4.5:1
For example when testing their very common Bootstrap Blue color used in links, progress bars and navigation bars. When these were put into the checker below shows that this scheme meets the requirements only if the text is of large size. However the text shown is 14px and normal font-weight, which is classified as small so does not pass this requirement.
The second way I tested was by viewing the site with high contrast settings. Generally what this means is inverting the colors, so instead of black text on a white background, you have white text on a black background which can be easier to see for people with partial blindness. In Chrome there is a plugin to view pages in high contrast. Both Windows and Mac's have a high contrast mode in their desktop settings, which will show the entire screen in high contrast. In Firefox this involves going into the settings, preferences, content and colors, changing the text to white, the background to black then un-ticking the following option.
Once the background-color was removed completely it was much easier to see under high contrast, see below. Another area where this was affected were text inputs. The same sort of principle applied, they have a white background-color by default.
Which means under high contrast you cannot make out the text you are typing. However after you remove this one line of CSS the visibility significantly improves in this mode with no visual difference for sighted users.
However in high contrast mode in Chrome it becomes unreadable. This is due largely to the color contrast ratio between the links and background not being high enough, making it disappears in this mode. The background would need to be darker or the links lighter. However even then it is difficult to see with this tool, so perhaps it's wiser to avoid just this color combination if possible.
Bootstrap has added a lot of features to the codebase to assist screen reader users. However in terms of pure color palette choices, most components were tested, and unfortunately not many of them passed the color contrast ratio tests or high-contrast readability settings.
Keep using Bootstrap in your website or application -- but keep it's accessibility blind-spots in mind.
Always upgrade to newer versions whenever possible as they do keep incrementally improving.
However, when I was tasked with making a Bootstrap-based Web Application accessible, I ran into a few problems. As Bootstrap is mainly used for design I evaluated how accessible their base design was for people with in terms of the colors.
Accessibility has recently gained a lot more momentum as awareness of accessibility issues has steadily grown in the programming community. It is the practice of ensuring your website or web-application can be easily used by people with disabilities. This can include many different types of impairments with a wide range of severity, however the main referred in the Web Content Accessibility Guidelines (WCAG) are:
Today there are four principles to consider when developing accessible content for the web. They are referred to by the acronym '': Perceivable, Operable, Understandable and Robust. Color choices comes under the 'Perceivable' column for Web Accessibility. That is, the content on the website should be easy to see. In particular, text and images should be easy to discern against their background with a high .
People with visual impairments of various degrees may view your website in different ways. Some may need to have the screen zoomed in, some may need to have the color settings changed to and others will also require the help of a screen reader or Braille reader.
Photo:
Additionally, nearly 10% of males will have some type of , having difficulty with certain color combinations. There are two ways I tested this. Firstly I tested for the color contrast ratio, and then I tested how the site performed under a high-contrast setting. This way you can ensure that no content will be lost on your site if people are viewing it in a different way.
The first test I performed was to put the colors of the text and background into a . It then calculates if it meets the 4.5:1 color contrast ratio for accessibility. Some can also calculate what it would like like for different levels of color blindness, and if it has enough contrast for that as well. From the Bootstrap site I tested their links, progress bars, navigation bars and their alerts to see if they were a high enough ratio for accessibility.
Taking into account their font-size and font-weights as per the in the table below.
They have made some progress, for example the alerts in their previous version 2, the ratios varied from 3.3:1 to 3.9:1, just below the minimum of 4.5:1. Which would be required as this text is 14px, so classified as small text. In the new version 3, with a very slight change, all ratios are now above 4.5:1. With this little change they were able to comply with guidelines, without having to compromise the design. This was after someone noticed it and raised an requesting them to address this.
I have spent a lot of time then going through and manually changing the colors in Web Applications so they meet this requirement. Alternatively the font-size and weight could be changed so it is classified as large text. I forked the and updated their code with the changes I made. This can be downloaded and used instead of the standard one or used as a reference point as you may want to make your own which suit your scheme and also meet the color contrast ratio requirements.
The high contrast test yielded some varying results. This is a common test during an accessibility audit. The most unforgiving combination seems to be Firefox in Windows, so most of my testing was using this browser/operating system as it is also a very for people with visual impairments to use. However testing in as many combinations of browsers and operating systems as possible is ideal as they all render slightly differently. One of the major problems I found was that bootstrap buttons either have very faint text under high contrast or none at all (with Firefox in Windows). I found this was due to the background-color property in CSS.
However this introduces a new problem: how to maintain the color for sighted users, however not using background-color in order to have it display in high-contrast settings. In Bootstrap 2 I found this was no problem as there were other CSS properties to control the look of the button, so removing the background-color had no visual impact to sighted users -- a 'win-win' there. In the repository mentioned, I've removed the background-color and replaced it with the CSS used in previous versions, slightly modified to meet the color contrast ratio and are also now visible in high contrast. Keep in mind, I only noticed this issue in Firefox. When checking this with high contrast in Chrome for example these buttons and inputs displayed fine. One thing that didn't though were Bootstraps inverted navbars. Ordinarily they look like this below.
Feel free to use or reference the file on GitHub instead of the standard one. Paypal also provides an which handles a lot of issues with keyboard accessibility for people with motor impairments.
If you find anything else, please take a moment to raise an issue with Bootstrap on their , definitely submit code which would address the problem. Otherwise perhaps look into using a front-end framework that has accessibility features already included.
While they're aren't many out there yet, offer one and their site is an fantastic example best accessibility practices.
