Lamiae
Extrait du cours Bootstrap: A SitePoint Anthology
Making Bootstrap a Little More Accessible
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.
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 visual impairments in terms of the colors.
But first a quick recap.
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:
1. Visual impairments
2. Hearing impairments
3. Motor impairments
4. Intellectual disabilities
POUR Accessibility Principles
Today there are four principles to consider when developing accessible content for the web.
They are referred to by the acronym ‘POUR’: 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 color contrast ratio.
So How Can You Tell If the Colors Are Accessible?
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 high contrast and others will also require the help of a screen reader or Braille reader.
Additionally, nearly 10% of males will have some type of color blindness, 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.
Color Contrast Ratio Test
The first test I performed was to put the colors of the text and background into a color contrast checker. It then calculates if it meets the 4.5:1 color contrast ratio for accessibility.
Some checkers 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.
……
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Bootstrap: A SitePoint Anthology (5,39 MO) (Cours PDF)
