Techniques
Make interactive elements obvious
- Design clear and unambiguous link styles; do not use those styles for non-linked text;
- Design obvious buttons styles and reserve those styles for buttons and links.
Links or buttons?
Links should take users to other pages (for example, the next page in a sequence; a page on another site); buttons should perform operations on the same page (for example, ‘print’; open a modal dialogue) – make your links look like links and your buttons look like buttons, this will help users predict what will happen next.
A button which has been styled to look like a link
- <button>See dates</button>
Users will expect this to take them to another page. They may attempt to right-click it to open it in a new window. If this is the intended behaviour then this should be coded as a link; if this is not the intended behaviour then the button should not be styled to look like a link.
A button which has been styled to look like a button
- <button>See dates</button>
Users will expect this to show them the dates without taking them to another page. If this is not the intended behaviour then a link should be used instead.
Links which have been styled to look like buttons
There are occasions where links can be appropriately styled like buttons, this is generally when users will be able to accurately predict that they will take them to another page (for example, “Log in”, “Search”, submitting a form)
Note: although these may be styled as buttons they must be coded as links so that their nature can be correctly conveyed to screen reader users.
- <a href="...">Search</a>
Users will expect this link to perform a search and present them with a list of search results on a different page.
Ensure your colour combinations have sufficient contrast
When specifying the colour palette you must ensure that any colours you have chosen for text content and its background has sufficient contrast to allow users with visual impairments to be able to read the content.
- Ensure your text has a contrast ratio of at least 4.5:1 with its background, or 3:1 is it is large text (18pt or larger, or bold and 14pt or larger);
- Ensure graphics that convey information and user interface components, such as input fields and buttons have a contrast ratio of at least 3:1 with their backgrounds;
- When you are using colour alone to differentiate links from text (such as when the links are not underlined) then you must ensure the link has:
- a contrast ratio of at least 4.5:1 with its background, and
- a contrast ratio of at least 3:1 with the surrounding text, and
- an additional change in appearance – such as an underline – when you hover over or focus on it.
You can check the contrast ratio of your text to background colours using WebAIM’s contrast checker
Avoid using background images behind text
Background images or gradients can quickly result in colour contrast issues, for example, when the text or the window is resized, the text shifts against the background. Dark text that was against a light sky may now appear over a dark mountain, making it very difficult to read. A busy background image often reduces the legibility of text placed over it.
Specify text styles that facilitate readability
- Whilst no minimum line-height is specified in WCAG 2.1, we recommend using a line-height of at least 1.5 times the text size – this provides enough ‘breathing space’ for users to be able read text comfortably;
- Speak with your content producers to understand whether or not there are aspects of their content that require larger font sizes and provide those as selectable styles in your template or content management system;
- Design for comfortable reading by not forcing content producers to make lines of text that are too short or too long – aim for around 65 characters per line for comfortable reading (45-75 characters per line is acceptable); obviously, shorter lines of text will be needed for captions and forms;
- Do not prevent users from being able to specify the following styles (by, for example, them applying their own CSS to your site) for all text, assuming they are not already set accordingly in your CSS:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size
Use relative font sizing
- Set a comfortable font size for body text. Although there is no WCAG requirement for font size, an equivalent to 12pt (16px) is generally recommended. Do not use text smaller than 9pt (12px) – footnotes are often as small as 9pt;
- Use relative measurements (em, rem, %) for all font sizes, including body text, headings and menu items.
Why can I not use pixels for font sizes as everyone can use zoom to make text larger?
Whilst zooming in increases font sizes, it also increases the size of non-textual elements, such as images and menus bars. Some users want to increase the size of the text without increasing the size of other elements.
Most images are not scalable and can deteriorate significantly when magnified, and zooming in can trigger changes to layouts on desktop screens, invoking designs for tablets and mobiles. Users often just want to see the intended desktop design, with larger text.
If you use relative font sizes in your CSS, users can use their browser’s ‘text size’ option (rather than zoom) to increase text size without magnifying any other elements; if you use absolute measurement (px, pt) the text will not be resized by the browser’s ‘text size’ option, forcing them to enlarge the entire page.
Avoid placing text into images
- Users with visual or cognitive impairments, including dyslexia, rely on being able to change the colour, size, spacing, even the font family, to be able to understand written text. If you use images of text, users will not be able to alter the appearance of the text accordingly;
- Users whose primary language is not the language in which the content of your site is delivered will only be able to translate words if the content is provided as text. Images of text cannot be translated;
- Users often need to resize content to be able to read it. Images of text suffer from a loss of quality when resized, so images of text can easily become less legible than actual text;
- If you need to use a specific style of text, for presentation purposes, try to use CSS and web fonts to achieve the effect. This will still allow users to change its appearance to suit their needs;
- If you absolutely must use an image of text, ensure the Alt Text exactly matches the text in the image.
Limit all style information including text sizes to CSS
Separate style and content. Not only does this drastically reduce workload when redesign time arrives, it also significantly benefits users who need to make changes to text colours, sizes, families, to allow them to read text more easily.
Do not apply styles directly to text containers such as paragraphs, divs, spans and table cells – doing so will remove all of the advantages of using CSS.
Do not restrict device orientation
A user in a wheelchair may have their tablet in an orientation that does not match the preferred orientation of your website or app. The user may not be able to change orientation easily, to use the app.
Allow users to resize content without having to scroll in more than one direction
Your site must allow users to magnify the text, up to 400% of the default size, without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS px;
- Horizontal scrolling content at a height equivalent to 256 CSS px.
Use bold and italic sparingly
- Use these styles solely to highlight key words and key phrases – do not attempt to convey any further meaning or information using these styles;
- Do not use bold or italics for whole paragraphs;
Note: bold and italicised styles, even when deployed using semantic HTML elements, <strong> and <em>, are not communicated by screen readers, so this information will only be conveyed to users who can see the text. One way of conveying bold or italic text to screen reader users is to add a visually hidden text prefix and suffix, denoting the beginning and end of the emphasised text.
What users see:
- This is italicised text;
- This is bold text.
What screen reader users hear:
- This is (begin italics) italicised (end italics) text;
- This is (begin bold) bold (end bold) text.
Specify a single font for body text
Avoid using several fonts in your designs.
- Not all fonts render well in screens;
- Content producers may not choose the most appropriate font for their content if there are a number of options within their template or content management system;
- If necessary, use a second font for headings – for example, to emphasise that they are headings, with a semi-bold, extra bold or black weight – but use it exclusively for that purpose.
Examples
Avoid excessive text styles
| It is difficult to read blocks of text if they are presented in uppercase letters. It also looks like the author is shouting! Do not use all capitals in your content, use sentence or title case only. | IT IS DIFFICULT TO READ BLOCKS OF TEXT IF THEY ARE PRESENTED IN UPPERCASE LETTERS. IT ALSO LOOKS LIKE THE AUTHOR IS SHOUTING! DO NOT USE ALL CAPITALS IN YOUR CONTENT, USE SENTENCE OR TITLE CASE ONLY. |
| Italics are also more difficult to read than regular text, especially online, and they can cause problems for those with cognitive impairments due to the change in shape of the letters | Italics are also more difficult to read than regular text, especially online, and they can cause problems for those with cognitive impairments due to the change in shape of the letters. |
| Avoid putting whole sentences and paragraphs in bold text. Bold text is less easy to read than regular text and its nature is not conveyed to screen reader users. | Avoid putting whole sentences and paragraphs in bold text. Bold text is less easy to read than regular text and its nature is not conveyed to screen reader users. |
| Avoid using underline as a style. It is less easy to read and users expect underlined text to link to other content. Reserve underlined text for links. | Avoid using underline as a style. It is less easy to read and users expect underlined text to link to other content. Reserve underlined text for links. |
| Do not right align text. Right-aligned text is difficult to scan. | Do not right align text. Right-aligned text is difficult to scan. |
| Do not justify text. Justified text uses flexible spacing between words and characters to ensure the text is lined up on both the left and the right. These spaces can create “rivers” of white space which make it difficult for users with dyslexia and other reading difficulties. | Do not justify text. Justified text uses flexible spacing between words and characters to ensure the text is lined up on both the left and the right. These spaces can create “rivers” of white space which make it difficult for users with dyslexia and other reading difficulties. |
| Avoid using fonts that are not in your template as they may not be supported by the user’s operating system. Depending on the font, they may also be more difficult to read. | Avoid using fonts that are not in your template as they may not be supported by the user’s operating system. Depending on the font, they may also be more difficult to read. |
Use text rather than images of text
This heading is an image which has been heavily compressed to reduce its file size, and then enlarged. It is very difficult to read.
This heading is text and can be enlarged without any reduction in quality.
Text that has too low a contrast ratio
This text has too low a contrast ratio with its background so is very difficult to read.
Videos
References
WCAG 2.1
- 1.1.1 Non-text Content (A)
- 1.4.3 Contrast (Minimum) (AA)
- 1.4.4 Resize text (AA)
- 1.4.5 Images of Text (AA)
- 1.4.10 Reflow (AA)
- 1.4.12 Text Spacing (AA)
EN 301 549 v 2.1.2
- 9.1.1.1 Non-text Content
- 9.1.4.3 Contrast (Minimum)
- 9.1.4.4 Resize text
- 9.1.4.5 Images of Text
- 9.1.4.10 Reflow
- 9.1.4.12 Text Spacing