Images With Long Descriptions

  • Screen readers can only convey information in text format. This means that you must provide text alternatives for all images.


    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. 

  • 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. The alt and title fields for an image are generally sufficient for short descriptions of images, but longer descriptions need another solution.

    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 webpage 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.
    • 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 when you submit both the page with the image(s) and the long description page(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 long description content title 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.