Visual Elements

VISUAL ELEMENTS

You may want to display images of posters, announcements, or postcards (for example) on your website to draw attention to a particular piece of web content. This can present a problem for users who are using a screen reader to access web content because the text within an image is not readable by a screen reader. Images on your website should not contain text unless the text on the image is brief and can be included in the alternative text of the image.

The IIllinois Information Technology Accessibility Act Implementation Guidelines for Web-Based Information and Applications 1.0 reads:

2. TEXT

2.1 - "Use text to display text, unless formatting that cannot be achieved with CSS is required."

Whenever possible, use actual text instead of images of text. Text that requires exact formatting, such as logos and/or other branding elements, are appropriate exceptions.

4. IMAGES

4.1 - "Provide appropriate "alternate text" for all images."

ALL images must have appropriate alternate text. As a rule of thumb, consider what you might say if you were reading the web page to someone over the telephone. You do not need to include the words "image of" or "graphic of." Specifically:

• For images that contain words or letters - use alternate text that includes the same words or letters.
• For image links - use alternate text that identifies the link's destination or function. You do not need to include the words "link to."

4.2 - "Provide full descriptions for graphs, diagrams, and other meaningful images."

"Meaningful" images are images that convey more information than can appropriately be expressed as alternate text.

Present a full description of a meaningful image either on the page on which the image appears or through a link immediately preceding or following the image. Use alternate text to provide a concise name for the image. For example, the alternate text of a graph should state its title and the full description should summarize its trends and/or present a table of its data.

Note: The longdesc attribute of the <img> element can also be used to provide a link to a full description. Because longdesc it is not yet supported by most web browsers, it should not be used as the only method of providing a full description.

#1 Rule of thumb: Can a screen reader access the text?

When in doubt, ask yourself if a screen reader can easily access the text content. There are a few ways to make sure this happens:

1. Instead of displaying text as part of an image, use real text content within the web page. This is the best way to ensure accessibility.
2. The alternative text entered for the image is exactly the same as the text that appears on the image. The W3C recommends that alt text should be no longer than between 75 and 100 characters in length. Anything longer “should not be considered a short text alternative and should not be presented using the alt attribute.”
3. Display a small thumbnail that is used as only clickable link that downloads an accessible full PDF of the flyer, postcard, or poster.
4. For detailed graphs or diagrams and other meaningful images, present a full description on the web page that conveys the information displayed in the graphic. Only use this method for graphs, diagrams, and images where the concepts cannot be conveyed easily by using the previously mentioned methods. An example use of this method would be to display a graph of statistics related to scientific research. This method should not be used for event posters, postcards, flyers, etc. 

Do's and Don'ts

Use the website banner area to display important text information on your website. For example, if Web Communications used the following banner to display dates for upcoming Cascade trainings, a website reader using a screen reader would not have access to the training dates:

Display items that can be displayed as text, as real text on a page. For example:

CMS TRAINING

Non-Academic Training

• Tuesday, February 11 - 2:00pm – 4:00pm
  Tuesday February 18 - 2:00pm – 4:00pm

• Wednesday, February 19 - 2:00pm – 4:00pm
  Wednesday, February 26 - 2:00pm – 4:00pm

• Tuesday, March 18 - 9:00am – 11:00am
  Tuesday, March 25 - 9:00am – 11:00am
  

Academic Training

• February 6 - 9:00am - 11:00am
  Thursday, February 13 - 9:00am - 11:00am

• Tuesday, February 25 - 2:00pm – 4:00pm
  Tuesday, March 4 - 2:00pm – 4:00pm

• Wednesday, April 2 - 2:00pm – 4:00pm
  Wednesday, April 9 - 2:00pm – 4:00pm

Don't

Use an image (jpg, png, svg, gif, etc.) of a poster, post card, flyer as the main content for a page. For example:

Do

Use a small thumbnail image to link to an accessible PDF. For example:

Southern Illinois University's Center for Inclusive Excellence will hold a variety of special programs and activities for Women's History Month.

The image on the left is also a link to an accessible PDF.

Don't

Upload a PDF that was scanned as an image.

Do

Include content of a PDF as real text on a web page if at all possible. Otherwise, save PDFs retaining text. If obtaining PDF files from a designer, request accessible PDFs that contain selectable text. Also, request a jpg image that can be used on the web as a thumbnail.