Miami University WordPress Sites

• Accessible Content
• Creating Content

Accessible Images and Graphics

September 17, 2024 | No Comments

Text alternatives for media (Alt Text)  

Alternative Text (Alt text) is a textual alternative (non-visual) way to describe the meaning of an image. You should provide a brief (under 100 characters) description of all images. It is especially helpful for people who are blind/low vision and rely on a screen reader to have the content of the website read to them.

Alternative text provides a variety of benefits and services:

• Screen readers cannot analyze an image and determine what the image represents and why it was included on the page. Instead, the screen reader uses alternative text to convey the image to the user.
• In cases where an image is not loaded into a web page, the alternate text is displayed instead. Some users choose not to display any images in the web browser and prefer to read the alternative text.

Alt Text Best Practices

General Information:

• Do not include the words “image of” or “picture of” within the alternate text. A screen reader will automatically say “image” or “graphic” before reading the alt text.
• Do not use the image’s file name as the alternate text, e.g. myimage.jpg, campus-sunset.png, etc.
• Don’t Use “Click Here” or “Link to” for images that also act as links. The screen reader will automatically say “link” before reading the description.
• If you are not sure of the best descriptive text to use, consult a subject matter expert to determine alt text of all images that are used to convey the experiences of academic, admission, and extracurricular programs at Miami (e.g. If you are adding an image of a Biology lab to a website, work with the Biology department to come up with the correct alternate text.)
• Alt text should fit the reason why the image is being included in a particular location. This means an image on a page about building projects may have a different alt text from that same image on a page about athletics.

Charts and Graphs:

• Charts and graphs are examples of images that require a detailed explanation so that sight-impaired users can gain knowledge. Text descriptions for these kinds of images should be provided as a caption or included in the text of the page.
• A description of a chart or graph should include the specific data points and other text in the image. Often it’s better to include the data in a table within the page content.

Images with Text in the Image:

• If you use a graphic with text in the image on a web page, ALL of that text must be included in the alt text.
• Do not include information not available in the image. For example, do not include the photographer’s name, copyright information, date of photo, etc. If that information must be provided, include it as a visible caption below the image for all users.

Decorative Images:

• If an image is for decoration only and does not meaningfully contribute to the page’s content, then the image can be marked as a decorative image. When marked as a decorative image, the alt text is left blank. 
• Typically, in our templates, icons (except for social media icons) and some hero images are considered decorative.

Alt Text Examples