Skip to Content

Digital Accessibility

Banner Images

All banner images will need alt text, and how you add it depends on whether it appears on a home page or content page.

Adding & Replacing Alt Text for Banner Images

Write meaningful alt text every time you add or replace a banner image. The default alt text for banner images is simply "Banner image", which is not a helpful description to leave in place for your unique images. If you aren't sure how to write effective alt text, our step-by-step instructions for writing alt text can help.

Home Page Instructions

1. Click the “Multiedit” Button to display your banner options. 

  • The OU Campus horizontal options menu with the Multi-Edit button and yellow icon indicating checked out icon emphasized with a garnet rectangle, followed by a green Publish button with a dropdown arrow, an expand icon, and an ellipses icon for more options. To the left are four tabs for Preview, Edit, Properties, and Versions.
     

2. Select a “Banner Type,” large or small, and how many you wish to display. 

  • Banner Type screen. Shows the Banner Type and Show Banners sections emphasized by a garnet rectangle. Banner Type options include radio buttons for a Large or Small Home Page Banner (Small selected). Small help text says to Choose what type of banner you would like to appear on your homepage. The large banner is a 1140 x 580 px image that span the full width of the page and the smaller one uses a 680 x 430 px image with a garnet area beside it for a caption. Below, the Show Banners section provides checkboxes for selecting between 1 and 5 banners (1 selected). Small help text says Checked banners will be displayed on a randomized basis.
     

3. Insert your image for each slide using the image upload button. 

  • Slide 1 banner options screen. Shows the Image upload options emphasized with a garnet rectangle, with an empty filepath name field next to buttons for uploading a photo and clearing the selection. Below, the Description field shows placeholder text: Add a description for the image.
     

4. Add your alt text to the "Image Description" box.

  • Slide 1 banner options screen. Shows the Image Description field emphasized with a garnet rectangle and the placeholder text Add a description for the image. Above, an empty box for the Image filename path next to buttons for uploading a photo and clearing the selection.
     
Video Tutorial for Home Page Banners

Learn how to add alt text to a home page banner.


Content Page Instructions

1. Click the "Properties" tab to access the "Custom Settings" for displaying your banner.

  • The horizontal options menu with four tabs, Preview, Edit, Properties, and Versions. Properties is emphasized with a garnet rectangle. To the right of the tabs are two buttons, one featuring a check mark and the other featuring a small box. To the right of the two buttons is a button with a yellow lightbulb icon in the middle, surrounded by a garnet rectangle for emphasis. On the far right is a green Publish button with a dropdown arrow and a small gray circle with a question mark in it.
     

2. Make sure the "Banner Source" is set to "Custom" and insert your image with the "Single Image" option. 

  • A screenshot of Banner properties. The Banner Source section is surrounded by a garnet rectangle for emphasis and includes three radio buttons, with Custom selected. Below this text is the Single Image section, which is also surrounded in a garnet rectangle for emphasis. It includes a blank text field, choose image button, and Clear button.
     

3. Add your alt text to the "Single Image Alt Text" box.

  • A screenshot of Banner properties. The section, Single Image Alt Text, is surrounded by a garnet rectangle for emphasis and includes a text box with the words Banner Image in it and italicized text Provide ‘ALT’ text for the single image for screen readers. Leave blank for image slideshows.
     
Video Tutorial for Content Pages

Learn how to add alt text to a content page banner.


Marking Images as Decorative

It is not an option in these snippets to mark an image as decorative. You will need to write alt text for each banner image on your site, even any you might normally mark as decorative on another platform.

Challenge the conventional. Create the exceptional. No Limits.

©