Back to Accessible Content Guide

As editors we often copy content from an exterior source and past it into the WYSIWYG editor.  This can cause problems for accessibility, as  styles or formats from the previous application will sometimes be carried over.  This can overwrite or conflict with the format intended for the website.

For example, Microsoft Word has styling built-in so that your document looks nice. This is copied when you copy text from Word – so when you paste normally, it will paste those styles too.  It is important to note that you may not be able to see these styles on the webpage, however, they may still be in the code.  This can cause issues when using the accessibility toolbar.  For example, here are some screen shots from a page where the colour contrast tools on the accessibility toolbar are being used.  The first image shows how it looks when the formatting from word is carried over.  The second image is how it should look, where the user has pasted as "plain text".

Content example with white highlighting obscuring the accessible toolbar colour contrast settings
1. The colour contrast tools aren't displaying correctly as they are interrupted by the formatting from Word 
Content example showing the colour contrast tools working correctly
2. The colour contrast tools are displaying correctly as the formatting has been removed.

Plain text

To ensure best accessibility practice, as well as best compatibility with the website, anything that we paste needs to be "plain text". We can then take this plain text and format it using the WYSIWYG editor – applying headings, lists, links and more where required. We can then follow the accessibility best practices in this guide, and the website editor will ensure that it all remains styled as the design intends – improving aesthetic at the same time as accessibility compliance.

Two ways to get plain text:

  1. When initially pasting into the editor, instead of pressing CTRL+V as we usually would to paste, instead use 'CTRL+SHIFT+V' – this command pastes specifically as plain text, so everything will appear as simple text in the editor, ready for you to format.
  2. You can also paste in as usual, but highlight everything that you have pasted and use the ‘remove formatting’ button in the editing toolbar – the ‘T’ with a small ‘x’ to the right (see the image below). This will remove all formatting, pasted or otherwise, so the text then becomes plain.

WYSIWYG editor with text higlighted, showing the remove format button which is a Tx