If you’re feeling lost or new to web accessibility, the following articles will help contextualize the content within this article, if read first:

  1. What is the AODA?
  2. Introduction to Web Accessibility
  3. WCAG 2.0 At a Glance

Introducing WYSIWYG

For website content creators, reading and formatting content is the most important component of achieving website accessibility. As a content creator, you will be working within a WYSIWYG editor (What You See Is What You Get editor) to write and format content for webpages. They allow content editors to create webpages without knowing code. Learning to use WYSIWYG editors properly is key to producing content that can be accessed by everyone, regardless of ability.

Specific screenshots and instructions in this article will be provided based on the WordPress.org CMS, however the concepts and strategies provided would be useful in many web authoring situations.

WYSIWYG Examples

Below are two examples of WYSIWYG editors that might be used in the WordPress Content Management System. If you are using WordPress, your editing interface might look different depending on what plugins are installed.

Editing interface for the WordPress Content Management System
Above is a screenshot of the Classic WordPress WYSWYG editor, which is WordPress’s older editor. Some websites still use this editor. It has since been replaced by the Gutenberg WYSWYG editor.
Gutenberg editing interface for the WordPress Content Management System
Above is a screenshot of the Gutenberg WordPress WYSWYG editor, which is newer. This editor was released on December 6, 2018.

Getting Started

There are two important steps to creating and formatting accessible content:

  1. Ensuring there is no unwanted formatting (hidden or otherwise) in your written content.
  2. Using the tools provided in the WYSIWYG editor to apply the formatting needed, which is called ‘semantic markup’. Marking up your content with these tools ensures that underlying code is created accessibly.

Preparing Clean Content

When creating web content, it is always best to write your content directly in the WYSIWYG editor. But, if you will be pasting content into the editor instead (which is more likely), you will want to ensure that your content is clean and free of extra formatting.

Assuming you are writing your content in Microsoft Word, we recommend the following:

  • Focus on including content, headings, and lists.
  • Use the headings bar when creating headings. Headings and subheadings should be hierarchical. Don’t just change the text size. Learn more about writing titles and headings and formatting titles and headings. Learn more in the Creating Accessible Word Documents article.
  • Don’t worry about styling the content. Don’t change the text size or colour. Don’t change the line spacing. Use the default font. Don’t apply extra fonts.
  • Do not add two spaces after periods. One space is sufficient.
  • If you need to paste in content from other sources, follow these instructions from Microsoft to use the Paste Text Only feature. This will strip all extra formatting, ensuring that only clean content makes it to your webpage.
  • Do not worry about mocking-up the content to make it look like a webpage.

Pasting Content into the WYSIWYG Editor

Once your content is ready, it’s time to paste it into the WYSWIYG editor.

Pasting in content that you created using clean content steps above

If you wrote your content using the steps above, you should be able to paste it into either version of the WordPress WYISWYG editor and most other CMS WYSIWYG editors without any issues.

Pasting in content from other sources

Sometimes we must copy content from other sources — like websites, articles, e-books, and other Word documents. This content might have hidden formatting that we don’t want to bring into our editor. When content is pasted into a WYSIWYG editor, this formatting can come along for the ride, and may create a frustrating experience when you try to edit it or mark it up later. It may also cause confusion for adaptive technologies when trying to read your content.

The solution to this is something called converting to plain text. This process is also called stripping HTML. Prior to pasting the content into the editor, it is converted to plain text. Once it’s been converted, it can safely be pasted into your editor.

Please note that converting to plain text will remove all formatting. This is intended. Once the content has been stripped, it will be marked up in the WYSIWYG editor.

Some methods of converting to plain text are described below.

WordPress CMS Classic Editor

If you are using the WordPress CMS Classic Editor, you can convert to plain text and paste into the WYSIWYG editor in 1 step.

Paste as text button

Look for the Paste as Text toggle.

Click this once to toggle on Paste as Text mode, then paste your text into the editor. Once you are done, click it again to toggle it off.

Many other Content Management Systems have a similar feature. Look for a tool called, Paste as plain text or Strip formatting.

Microsoft Word

Follow these instructions from Microsoft to use the Paste Text Only feature.

Paste your text into a new Word document, and then copy/paste it into your WYSIWYG editor. This is an interim step, so you do not need to save the Word document.

Online Tools

There are several online tools that perform this function, including www.striphtml.com and codebeautify.org/html-stripper.

Paste your content into the box provided and click Strip HTML. You will then copy/paste the stripped content into your WYSIWYG editor.

Marking Up Content

Applying the formatting tools found in a WYSWYIG editor is called ‘marking up’ content. These formatting tools include headings, lists, bold, italic, hyperlinks, and so on. When you markup content in your WYSIWYG editor, the underlying code is built in a way that is accessible — and not just to adaptive technologies. Properly marked up content is more accessible to search engines as well. It is critically important to mark up your content using these tools.

Formatting flyout in the Classic WordPress editor with paragraph and heading options
WordPress Classic Editor headings tool

To mark up content in the WordPress CMS Classic Editor you highlight it, then select a formatting option. It works the same as Microsoft Word and other word processors.

In the WordPress Gutenberg Editor every component of a page is called a ‘block’. The example screenshot depicts a heading block, which can be set to a heading level.

A heading block in the WordPress Gutenberg editor with heading level options
WordPress Gutenberg Editor headings block

Moving on to Writing and Formatting Content

With this introduction complete, you are ready to continue to the Writing Content and Formatting Content articles.

The Writing Content article describes how to write your content to ensure that it meets accessibility guidelines. The Formatting Content article describes how to use the mark up tools within your WYSIWYG editor properly.


  • Photo by pixelfit via Getty Images. Used with permission.

Is this page useful?

Back to Top