Visual Elements

/https://siu.edu/search-results.php

Last Updated: Nov 08, 2024, 11:45 AM

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.

So here’s the bottom line:

  • Avoid putting important text inside an image whenever possible.
  • All PDFS must be accessible. Learn More About How to Create Accessible Documents
  • If you do use text in an image, keep it brief — and always include it in the alternative text description.
  • Consider alternative text as your safety net: it makes sure the information inside your image is available to everyone, no matter how they’re accessing your site.

#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

Below are some examples of what we are seeing and how to fix them.  One of the most popular issues we see are websites using PDF fliers or Event information within images on their websites.

Examples

  • Scan or flatten a 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.

  • Event Details

    Don't

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

    cms-training-not-accessible.jpg

    Do

    Use one of the many template features to 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

  • Fliers

    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:

    whm-poster-not-accessible.jpg

    Do

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

    womenshistorymonth-2014.jpg

    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.

IITAA

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