Images With Long Descriptions

  • Images that contain a lot of information (graphs, maps, organizational charts, etc.) need a way to convey their information to the disabled community, especially those who use screen readers to understand a webpage. Screen readers can only convey information in text format. This means that you must provide text alternatives for all images.

    The alt and title fields for an image are generally sufficient for short descriptions of images, but longer descriptions need another solution.

  • Be Careful!

    Image file names that contain punctuation will not show up properly on the website.

    Be certain the file name does not contain commas, apostrophes, etc. before uploading the image. 

  • The best answer is to create a separate, off-menu content block that a screen reader will “know” to read when encountering the image. This content will be reached by placing the longdesc attribute on the image. (Each image needs a separate long description page.)

    How to Add a Long Description to an Image:

    • Add the image(s) to the web content where you want it/them to appear.
    • In the workarea, create a new html content item for each image (New > HTML Content), and place each image’s text description into that content. Each image’s long description requires a separate html content item.
    • Submit all items for publishing, and then contact the Web Team.

    The Web Team will add the the longdesc attribute to your image(s), but you must contact the Web Team at web-team@iup.edu when you submit both the content with the image(s) and the long description content item(s) so we can take the proper action.

    The html content containing the long description should be text only and as simple as possible (avoid tables and special formatting). Sighted users will not see the link on the page, but a screen reader can navigate to the long description if the user decides to do so. 

    Note: The title of the long description content should just be the title of the image, as it’s possible the page may turn up in some searches.

    Here is more information about using alternate text for Web accessibility.