Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Creating Accessible LibGuides

What are best practices when adding text to my LibGuide?

Use clear fonts

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.

An image of text being shown solely in an image

 

Use headings and lists appropriately

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.

 

Ensure proper contrast between the font and the background

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.

 

Type directly into the rich text editor

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 (Paste as Plain Text icon) and a Paste from Word option (Paste from Word icon). 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.

Common Text-Related Errors

Description

The 'bold' tag is used to highlight text.

 

How to fix it:

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.

 

Description

The italics-tag 'i' is used to highlight text.

 

How to fix it:

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.

How to fix it:

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 ">".

 

 

Description:

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.

 

How to fix it:

Go to the element's properties. Remove any alignment settings. Save. Now reopen the properties and choose the appropriate alignment.

Image properties dropdown menu    Image properties dialog box with Alignment section indicated

GW Libraries • 2130 H Street NW • Washington DC 20052202.994.6558AskUs@gwu.edu