Don't mix different font types. Stick to the default font (Sans Serif).
Use bold, color, italics, and ALL CAPITAL LETTERS, etc. sparingly; each has its own function.
Don't use underlines for emphasis. Users will think an underline is a hyperlink.
Use real text rather than text within graphics. Text within graphics cannot be read by screen-readers. For example:
This is real text in a color box.
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page. When assigning headings, imagine that you're making a table of contents for readers. While most users won't interact with in, this virtual 'table of contents' will help screen-reader users navigate your page far more easily. See the Headings section for more information.
Do not rely on color alone to convey meaning or importance. That information may not be available to a person who is colorblind and it will be unavailable to screen reader users.
Optimize font color use for readability and accessibility.
Make sure your content is clearly written and easy to read.
To learn more, visit the Color Contrast page.
It is recommended that you type directly into the rich text editor then use the functions in the text editor to add style and formatting. Creating the text elsewhere and attempting to copy / paste it into the text editor will bring in a lot of unnecessary HTML code and formatting, which can render your content inaccessible without your knowledge.
To paste without formatting, most browsers support the shortcuts Ctrl+Shift+V (Windows) and Option+Shift+Cmd+V (Mac). Additionally, the text editor provides a Paste as Plain Text option (
) and a Paste from Word option (
). These will generally remove some, but not necessary all, of your formatting. If you've already pasted your text into the text editor, highlight it and click on the Tx icon in the text editor. This will remove all the formatting from your text.
The 'bold' tag is used to highlight text.
If the text should be emphasized semantically, use the 'strong' tag instead (<strong>). In order to fix this, simply remove the styling in the text editor and re-apply it. This will update it according to current standards and fix the problem.
If the text is a heading, an 'H' tag (such as H1, H2, H3...) should be used instead.
If the text is highlighted as a purely visual effect, CSS should be used to do this.
The italics-tag 'i' is used to highlight text.
If the text should be emphasized semantically, use the 'emphasize' tag instead (<em>). In order to fix this, simply remove the styling in the text editor and re-apply it. This will update it according to current standards and fix the problem.
If the text is a heading, an H-tag (such as H1, H2, H3...) should be used instead.
If the text is highlighted as a purely visual effect, CSS should be used to do this.
Please note that even though 'i' tags are commonly used for inserting icons, this is considered bad practice.
In the text editor, click the "Source" button.
Press Ctrl+F (Windows) or Cmd+F (Mac) to open a search bar. Search for "<font".
Each time that it appears, delete the text: "<font>" and "</font>".
These may sometimes seem more complicated (e.g. "<font color="red" style="font-family: Verdana, Arial, Helvetica, sans-serif;">"), but just delete anything between "<font" and ">".
The HTML center tag has been used to center content. The use of HTML for styling is against accessibility standards but these standards were not previously widely considered. As a result, older versions of the text editor used it in that incorrect way. By removing the incorrect styling and using the current version of the text editor to re-style it, it will self-correct and resolve the issue.
Go to the element's properties. Remove any alignment settings. Save. Now reopen the properties and choose the appropriate alignment.
