Accessibility must be considered when adding or editing content with the Rich Text editor.
Here’s a breakdown of each option and what you need to consider.
Text Size
Large text
Text size can easily be increased using the text size menu.
Figure 1: Text size options
However, large text is not the same as a heading. Where you need a proper heading, use the survey, page and question title fields, which are output as headings automatically, rather than enlarging body text in the editor.
Avoid small text
By default, text is set to 14px. We don’t recommend using smaller than 14px. Avoid text smaller than 12px.
Text styling
Accessibility implications for text styling options.
Bold and Italic
Tags: <strong>/<b> and <em>/<i>
Example: Bold and Italic.
Many screen readers do not convey any difference when announcing text in strong or em tags. Consider how wording can be used to emphasise text.
Strikethrough
Tags: <strike>
Example: Strikethrough
Avoid or minimise use of strikethrough text. Strikethrough could make reading more difficult for users with cognitive or vision impairments. Also, many screen readers will not announce any difference for strikethrough text.
Always use wording along with the strikethrough style to convey the same meaning.
Underline
Tags: <u>
Example: Underline
Avoid if possible. Underlined text may be mistaken for a link by sighted users.
Alignment
The Rich Text editor allows the following alignments
- Left
- Centred
- Right
- Justified.
Where possible use left-aligned text to increase legibility.
Indenting text
Indented text does not have any major accessibility concerns.
However, it will not announce any differently for screen reader users. Consider using wording as well as indent to convey information.
Lists
Structuring content into lists when appropriate is great for accessibility. There are two types of lists bullets (unordered) and numbered (ordered).
Lists can help users to scan read text efficiently. They are well supported by screen readers.
- WCAG 2.2 AA checkpoints: 1.3.1 Info and relationships (Lists)
Links
Links can easily be made accessible with the following considerations.
Use meaningful link text.
Clear link text can enhance usability for all users. It is essential for screen reader users and can also improve SEO (search engine optimisation).
Good link text:
- Makes sense out of context: "View Consultation Schedule"
- Has the first word or words those which are most relevant to task: "Read Background Documents"
- Provides information about the link if linking to a file or video: "Watch proposal video"
Poor link text examples:
- "Read more" or "More"
- "Click here"
- URLs
- File names.
Warn users when a link triggers an action
Advanced link types create a change of context which should be conveyed to the user in the link text.
Examples:
- Send email (Opens mail application)
- Link name (Opens a new window / tab).
Caution:
If using the email type link, consider users who don’t have their mail app available. Also provide the destination email address as part of the link tag.
Phone numbers
Provide an alternative (such as email, chat or text message) to voice calls for users who do not make voice calls. For example, deaf or hard of hearing users.
- WCAG 2.2 AA checkpoints: 2.4.4 Link purpose
Images
Images should be used with accessibility in mind including:
Providing alt text: refer to our alt text guide for more info.
Avoiding images of text (apart from logos)
Images of text can be difficult for users who rely on screen magnification. Images of logos are excluded from this WCAG checkpoint.
- WCAG 2.2 checkpoints: 1.4.5 Images of text (AA)
Tables
Please follow accessibility guidance when adding tables. Refer to this tutorial on accessible tables from the Web Accessibility initiative (WAI).
Tables Concepts.
CSS (Cascading Style Sheets)
Our Rich Text editor allows custom CSS. We advise this is done by someone with accessibility knowledge.