Rhiana Heath currently works as a front end developer at Strategic Data. Coming from a background in education and psychology, combined with her life long love of computers, she offers a different and unique perspective into web accessibility.
Bootstrap and Color Accessibility
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.
However, it was when I was tasked with making a Bootstrap-based Web Application accessible that I ran into a few problems.
As Bootstrap is mainly used for design I evaluated how accessible their base design was for people with visual impairments in terms of the colors.
But first a quick recap.
What Is Bootstrap?
It is estimated that as many as 4.7 million websites, or 1.79% of all websites, use Bootstrap. It is also the number one project on Github with developers encouraged to contribute to the source code.
Bootstrap is quick to set-up, with a large amount of documentation and easy to follow instructions and guides on how to use their front-end framework. The Bootstrap team are continually releasing new versions and updates, and in their they have promoted several accessibility-focussed features in their most recent version release (3).
But how accessible is Bootstrap really? Before we can tackle that, we need to define what we mean
What Does Accessibility Mean?
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 four types of disability referred in the Web Content Accessibility Guidelines (WCAG) are: