Image Guidelines

Digital images that are displayed on the web are not natively accessible to people who have vision disabilities. To remedy this, images that contain important, non-decorative information must be sent to users’ browsers with an accompanying text-based alternative that describes what is presented visually.  Although Alternative Text is not displayed on a user’s screen, it can be accessed and read aloud by screen reading software, which is often used by people with vision disabilities. 

Alternative Text

Guidelines

While alternative text is one of the simpler accessibility concepts, writing effective, descriptive, and concise alt text can be a difficult skill to master. The correct approach depends on multiple factors: the complexity of the image presented, the context in which the image is presented, and the type of image that is displayed. Alternative text is appropriate for photographs, icons, and most other common image types. 

Things to keep in mind when writing alt text:

• Keep it short. Screen readers often stop reading alt text after 125 characters.
• Do not preface your descriptions with “Photo of”, “Image of”, etc. Screen reading software announces the type of content before reading alt text aloud.
• Context is very important. Focus on what is specific to the image, and the information that it presents relative to the rest of the content on the page.

Decorative Images

Images that are purely decorative and do not provide any meaningful content do not need to have alternative text added. The alt text entry box (more info below) for decorative images should be left blank. 

Examples of good Alt Text:

• EOU President Tom Insko speaking at Convocation
• The EOU football team celebrating after a touchdown
• Dr. John Doe (for a faculty portrait)
• Students building Solar Tables at Cottonwood Crossing Summer Institute

Examples of poor Alt Text:

• DSC_1297
• Picture of sports fans
• Classroom

Helpful Resources:

• Alternative text primer at webaim.org: https://webaim.org/techniques/alttext
• Alt Text Decision Tree at w3.org: https://w3.org/WAI/tutorials/images/decision-tree
• Tutorials at w3.org: https://w3.org/WAI/tutorials/images

Testing for and adding Alt Text in WordPress

The WordPress Content Management System provides a straightforward method of checking for and adding alt text to images. When an image block is added to a page, and the image is selected, a text entry field labeled “Alt text (alternative text)” will be available under the “Image settings” dropdown of the “block” tab in the right sidebar. Right sidebar → Image settings → Alt text entry field. 

In the following example, the image has alt text reading “Professor Steve Sheehy instructing students in the Computer Science Lab”

Once the image is added to the page, a content manager must:

1. Select the image.
2. Choose the “Block” tab on the right sidebar.
3. Edit the alt text under the “Image settings” dropdown menu.
4. Update the page using the blue button in the upper right corner.

Complex Images

Complex images such as charts, graphs, and maps can be significant hurdles when writing alternative text. Often, a suitable description of the information provided in the graph or image will not fit into 125 characters. In this case it is necessary to provide a short alt text describing the purpose of the image, and also a description of the content of the image elsewhere on the page.  This best practice provides equal access to all users, including those who can see but may not fully understand the complex information in the image. 

For complex images, content managers have two options:

1. Text description written in the page, close to the image.
2. An image caption.

For the example below, we would include alt text stating: “Worldwide browser market share in 2021” as well as a caption reading: “A pie chart showing the worldwide market share for web browsers in 2021. Chrome is used by 64.04% of web users, Safari by 19.23%, Edge by 4.19%, and Firefox by 3.9% of users. 8.64% of people browsing the internet use a browser that is not included in this list.”

Images of Text

Images of text should be avoided whenever possible.  There are several reasons for this:

• Images of text cannot be read by screen readers.
• Text in an image may often be too long to include in an alt tag.
• Users who use their browser’s zoom function to resize text will be unable to zoom in on text that is part of an image.
• It is not possible to verify if there is sufficient color contrast between text and the background when they are combined into one image.

If using an image of text is absolutely necessary, content managers must ensure that the text either:

• Is included in the alt tag of the image (if it fits).
• Is visible on the page in a separate text block.
• Is included in the image caption. 

The only exception to this rule is logos, which often include text and images together. Logos can either be noted as decorative (no alt text), or the alt text can say that the image is a logo, e.g., “Eastern Oregon University Logo”.

Testing for images of text

Content managers must manually verify that there are no images of text on pages. If an image with text is found that cannot be removed, ensure that the text either:

• Is included in the alt tag of the image (if it fits).
• Is visible on the page in a separate text block.
• Is included in the image caption.