Because digital accessibility isn’t a one-off project that gets carried out once, but an ongoing activity, guidelines have been drawn up. These are updated continuously. We previously wrote a goodreads article about accessibility in which we shared interesting links and articles. In this series of articles we’ll explain why digital accessibility matters so much, and share insights you can use yourself to meet the guidelines. In the first part we explained why this subject matters to you too and shared technical aspects. In this second part we explain what matters visually.
Visual priorities
Contrast
To make sure that both people with low vision and colour-blind users can see everything clearly, it’s important that strong contrast is used. The standard applied here is that plain text (normal paragraphs of text) must have a contrast value of at least 4.5:1. Once text is displayed larger, the contrast may be weaker, namely 3:1.
What sometimes happens in practice is that colours from the house style are carried through to the website, which makes it consistent for the branding, but not accessible.
Take, for example, a house style that includes the colours orange or yellow. If these colours are used as a background colour with white text, the text is readable for people with normal vision, but the contrast is too low for people with low vision. One solution is to use these colours only in visual elements that don’t necessarily contribute to the content of the page. That way the content stays readable and the house style is still carried through properly.
Wondering whether the colours within your website or application have enough contrast? Then you can use the contrast checker from WebAIMS.
Consistency
Interfaces, such as websites, contain many functional elements, such as buttons, links and input fields. By consistently giving these the same styling, you make it easier for people to understand how something works. This gives an interface a gentler learning curve.
Colour dependency
It’s important that colour isn’t the only indication that an element is clickable. When clickable elements are indicated by colour alone, it can be difficult or impossible for people with colour blindness to navigate a website.
Text links are a good example of this. They’re often indicated by giving them a different colour within a block of text. A “best practice” is therefore to underline links or add a visual element, such as an icon, to them.
Alternative layout
As mentioned in the functional priorities, there must be alternatives for users to view a website. The website or application must, for example, have the option to zoom in to 200% without breaking as a result. But the functions to have the website read aloud and/or switch to a black and white layout shouldn’t be missing either.
Line height and paragraph spacing
The line height must be at least 1.5 times the font size. The space between paragraphs must be at least 2 times the text size. There must also be enough space between letters and words. Text mustn’t overlap or sit too close together, so users can properly tell blocks of text and information apart.
Images
For images, it’s important that there’s no text in the image. According to the WCAG guidelines this is still allowed, as long as good alternative text is provided. In practice, however, we often see that this causes problems. Websites and applications are usually responsive, which means images are displayed in many different ways (for example landscape for desktop and portrait for mobile). This means the crop is always variable. As a result, the text in the image can end up being cut off. A good solution is to use text in HTML on top of a background image, so the text is guaranteed to be visible. This solution works both responsively and for users with reduced vision who use screen reading software.