Do more with the text editor

The text editor on your site is a powerful HTML editor. Along with accessing various styles through the toolbar, you can add and edit HTML directly.  

The text area allows a  subset of HTML tags and classes so that we can more easily maintain the usability and accessibility of your site. 

Edit HTML source code

The text editor creates HTML code from the styles and text that you add to the editor. There may be times you'll want to edit the HTML directly. Here's how to view and edit the HTML source code.

1. Click Edit to begin editing your page
2. Within the Body or Text Area toolbar of the WYSIWYG editor, click Source. 
3. This will bring up a code editor that allows you to directly edit the HTML.
4. When you're done you can either click Source to return to the text editor or simply click Save. 

Call out other languages with "lang"

If the text in your website uses multiple languages, you'll want to indicate what language is being displayed. The lang attribute is used to identify chunks of text in a language that is different from the document’s primary language. For example, this page you are reading is written in English and screen readers will announce the text in English. The lang attribute identifies the language of text content and informs the screen reader to announce text in the correct language. 

Given this text in French:

Sauf pour ce qui est écrit en mauvais français.

Using inspect through the browser, you can see the lang attribute in action. 

<p lang="fr">Sauf pour ce qui est écrit en mauvais français.</p>

To add the lang attribute in the WYSIWYG,

1. click on the Source button
2. find the non-English text, in this example it's French
3. within the <p> tag add lang="fr"

This will work with other HTML elements as well.

Note: When the lang attribute is missing, it violates SC 3.1.1:Language of Page (Level A).

Lang attribute resources

Here's more on the lang attribute

• Using the HTML lang attribute

Call out abbreviations with <abbr>

When using a new or unfamiliar abbreviation or acronym, use the abbreviation element <abbr>  to provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means. Learn more about using <abbr>.

Given this HTML:

You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language).

You will see:

You can use CSS (Cascading Style Sheets) to style your HTML (HyperText Markup Language).

To add an <abbr> element in the WYSIWYG:

1. click on the Source button to edit the HTML
2. find the abbreviation 
3. Surround the acronym with <abbr> before and </abbr> after