“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
There is also a solid business case for accessibility.
According to the World Wide Web Consortium (W3C), studies show that thanks to their increased usability, accessible websites have better search results, lower maintenance costs, reach a larger audience and have faster download times.
As a digital agency, we work towards meeting the conformance level AA of the Web Content Accessibility Guidelines for sites that we produce but it’s helpful for clients to also understand how their choice of colour scheme or font can impact accessibility. Here are some key areas to consider.
Fonts are a key part of a website and most organisations will have preferred fonts as part of their brand guidelines which dictate how the brand is to be portrayed in print and online.
Is the Font readable at all sizes?
This comes into effect when looking at condensed fonts such as Oswald (Google Fonts). At a large size these fonts are perfectly readable however at a smaller size, such as 16 pixels, these can become very difficult to read. If a client’s brand guidelines specify a condensed font it’s important that we flag the issue and suggest a secondary font to use for body copy.
Google font v commercially licenced font
A lot of fonts will require a commercial web licence if they are to be used on a website. These can range from £15 to £300, however often we are able to suggest options for a free alternative.
2. Colour Contrast
The World Health Organisation estimates there are 217 million people who have moderate to severe vision impairment and they can find it difficult to read text from a background colour if it has low contrast, so it is important to consider the sufficient contrast between text and backgrounds.
The World Wide Web Consortium (W3C) says that the contrast ratio between text and its background should be at least 4.5 – 1. This is conformance level AA.
You can increase a font’s size/weight to increase a contrast ratio as the text will then be easier to read. The best tool we have found for this is WebAIM: Color Contrast Checker. This is recommended by W3C for checking against different font sizes.
There may be times where the client’s brand itself throws up more significant challenges. For example, if a client’s brand colours are white and yellow this will almost certainly result in an automatic fail for accessibility. In a situation like this, we’ll flag the issue and explain the impact on their site before working together to come up with a solution, such as including a secondary high contrast colour.
Check out these yellow websites – you’ll see most use a high contrast colour like black or grey to make them easier to view
We will also take colour blindness into consideration. Colour blindness affects 1 in 200 women but is much more prevalent in men, affecting 1 in 12.
There are a number of apps/extensions that can help you to simulate how a site looks to different kinds of colour blindness including Colorblinding (Chrome) and Sim Daltonism (Mac) however, the main combination of colours you should avoid are:
- Green & Red
- Green & Brown
- Blue & Purple
- Green & Blue
- Light Green & Yellow
- Blue & Grey
- Green & Grey
- Green & Black
3. Focus Indicators
Focus Indicators are an important part of accessibility as they help users know which element has a keyboard or click focus and help then understand where they are when navigating your site.
These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel syndrome, and power users who prefer this type of navigation.
The elements on a site which should have a focusable state are links, menu items, buttons and form fields (search). They need to have a focus indicator that makes them look different from the elements around them.
Browsers such as Chrome already have their own version of this in their CSS, however at Sotic, we will amend these to work with the client’s branding.
4. Labels – Forms
When filling out a form on a website, the label tells users what information belongs in a form field while placeholder text is an additional hint, description, or example of the information required for a particular field.
Some forms replace field labels with in-field placeholder text to reduce clutter or shorten the form but this has negative consequences for accessibility.
Placeholder text has a low contrast so it’s very hard to read, particularly in Firefox which adds an opacity: .5 to all placeholders, further limiting readability.
Screen readers, used by those with severe visual impairments to use a computer, rely on form labels. Screen readers do not read placeholder text aloud meaning that blind or visually impaired users may miss the hint completely.
All forms should have labels to help the user know what information they need to input. This also helps them to avoid losing context with what they’re writing.
For more information on the importance of using form labels this check out this blog.
This is just the tip of the iceberg when it comes to designing and developing accessible websites and it’s a continual learning curve. If you would like to discuss anything in this blog in more detail then please do get in touch email@example.com.