Using the WYSIWYG Editor

Accessibility must be considered when adding or editing content with the WYSIWYG (What You See Is What You Get) 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. 

Text size options drop down menu- Screen shot of SmartSurvey admin

Figure 1: Text size options 

However, it’s also important to use a heading tag so large text is structured for screen reader users and search engines. 

Unfortunately, it’s a little tricky to do this with the editor. We will be providing guidance on how to do this.  

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 WYSIWYG 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.1 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.1 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.1 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. 

We will provide further guidance on this topic soon. 

  • WCAG 2.1 AA checkpoints: 1.3.1 Info and relationships – Data tables (A) 

CSS (Cascading Style Sheets) 

Our WYSIWYG editor allows custom CSS. We advise this is done by someone with accessibility knowledge. 

We will provide further guidance on this topic soon. 


Was this guide helpful?