Text Content Considerations

Contact the IT Accessibility Coordinator

Kristine Neuber
IT Accessibility Coordinator

Assistive Technology Initiative
MS: 6A11
Voice: 703-993-9815
Fax: 703-993-4743
kneuber@gmu.edu

Images improve the visual appeal of your website. They can, however, become an accessibility barrier for some individuals with disabilities when they are improperly used (e.g., flickering images) or not labeled appropriately (i.e., individuals who are blind or have low vision).

Relevant WCAG Guideline(s): WCAG 1.4.3 (Contrast – Minimum) opens a new window, WCAG 3.1.1 (Language of Page) opens a new window

For information on how to create accessible images, see below:


Set the page language

Add a lang attribute on the opening html tag to declare the primary language of the text in the page. This ensures that assistive technologies with support for multiple languages will read the content properly.

add lang attribute to opening HTML tag

 

Setting language in “parts”

When a specific section of the web page contains content in another language, add a lang attribute to an element surrounding that content. See the image below for an example:

setting "lang" attribute for part of a web page

 


Use effective color contrast

Good color contrast draws interest to important content on your course site.

Why is this important?

It also benefits individuals who may have colorblindness or those with low vision. The Web Content Accessibility Guidelines (WCAG 1.4.3 opens a new window) states that the contrast ratio for small text (~12 pixels or below) should be at least 4.5:1. For large text (~18 pixels or above) is 3:1.

To check the color contrast in your course site, do the following:

 

ADDITIONAL GUIDANCE FOR COLOR CONTRAST: Meaningful information should NOT be conveyed by color alone.

  • E.g., the image below shows a web form with required fields identified by red text. If an individual is unable to see the color red, they would have difficulty filling out the form. A simple fix would be to add an asterisk(*) next to the required fields. This would then provide users who are unable to see red an additional piece of information to identify what is required.

using color alone makes this form inaccessible
 

 


Additional Resources