Guidance on ensuring online resources are accessible for users.
There are a number of considerations that must be made in the application of text to ensure that content is accessible, these include:
- Using sans-serif fonts (Roboto is one)
- Using fonts that are compatible with screen readers
- Ensuring a good default text size
- Using optimum line length and character count
- Ensuring adequate character and line spacing
- Ensuring adequate contrast
- Avoiding hyphenation of text
- Avoiding justification of text
For further information see each of the relevant sections below.
Sans-serif fonts are made up of simple characters which are grouped into words but stand apart in appearance, this makes it easier to read for users with dyslexia and some forms of visual impairment to read them. Serif-based fonts include embellishments on the letters which can make them appear to join together when grouped and this makes them harder to read.
Web-friendly fonts that are compatible with screen readers should always be adopted as there will be a number of users who require assistive technology to access online services and information.
Minimum font sizing
We observe minimum sizes for fonts to ensure legibility. Mobile devices might use a slightly different sized font. The aim is to make better use of the smaller screen space whilst also ensuring that the text is easily readable and not too small.
Optimum content sizing
Although some elements of site layout may stretch across the full length of the screen, columns of text should not. Long lines are hard to read for all users and prohibitively difficult for users with conditions such as dyslexia. The optimum line length for websites is generally accepted as between 50-60 characters long, equating to typically between 10 and 15 words. Using columns with a capped width will enable greater readability for all users.
Character and line spacing
The space between characters should be maintained at the font presets, no reduction in kerning (the space between letters) should be manually applied by designers or developers. Traditional typographic principles for line spacing also translate to screen and it is a general rule that line spacing should default to a minimum of 30% over the font size used. For example, if the font size is 16 pixels the line spacing would be around 21 pixels, for type sizing expressed in ems the value of 1.3em would be applied to line spacing.
A good quality of contrast between the background and font colour is essential to ensuring readability of content. As a general rule dark text should be used on light backgrounds and light text on dark backgrounds. Avoiding the use of mid-tones guards against potential contrast issues on screen.
Several contrast checkers are available online for comparing how accessible your background and text colour combinations are, one WCAG compliant version is available at: https://contrastchecker.com.
Hyphenation of text
Hyphenation should be avoided as splitting words over columns makes the content harder for some readers with conditions such as dyslexia to understand.
Justification of text
Justification should be avoided as the act of creating uniform columns requires the spacing between words and letters to be adjusted to fit. This results in unpredictable spacing which can make words and sentences hard to read for users with a range of conditions including dyslexia.