Accessibility, ADA compliance and why we cannot use images containing text

Because of the funding the University receives, we are bound by federal law on accessibility to make sure everyone is able to experience the content on our site. A recent legal agreement between the University and the Office of Civil Rights in Washington, D.C. also obligates us to make our site content accessible. Plus, Extension’s purpose is to help people, including people who have an ability difference.

Alternate text, also known as alt. text, helps people with visual impairments who use screen readers; however, not everyone with a visual impairment uses a screen reader. So, adding alt. text to an image with text on it will still leave some people with disabilities unable to experience the content on our site.

The accessibility checker that is used to monitor the University’s compliance with the legal agreement has a manual check in place that causes every single image to be examined for text. If an image without text cannot be found, the University’s placeholder image for missing visuals will automatically show up.

Add images to an Extension Program

There are three preset image types for an Extension program: content blocks, banners and thumbnails. These image types show up with program mentions throughout the website. Each program can have only one of each of these image types.

Content blocks

Content blocks are required for Extension programs. These images show up on the All Programs page, in the Featured Programs ribbon and as related programs within website areas and in the sidebar on publication webpages.

Content blocks must be:
•    800x600px (4:3 ratio)
•    Jpeg
•    Less than 200kb

Banners

Banners are the long, skinny images that show up behind the program name on Extension program pages. These are optional – if you don’t add one, a stock one will be used.

Banners must be:
•    1,200x450px
•    Jpeg
•    Less than 800kb

Thumbnails

Thumbnails are what show up next to programs when a keyword search is performed in the “What do you want to learn about?” search field.

Thumbnails must be:
•    300x300px (1:1 ratio)
•    Jpeg
•    Less than 200kb

How to add a banner, content block or thumbnail:

1. Use Firefox to log into the Web Asset Management System (WAM)
2. Click Extension Programs.
3. Find the program you want to add a photo to and click Images in the fourth column.
4. Click Browse and select your properly-sized jpeg image.
5. Add alt. text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard,” or “peaches on a tree”).
6. Mark either “Banner,” “Content Block” or “Thumbnail.”
7. Click Upload Photo. Your image will immediately show up on the live site.

Embedded images

Along with the preset image types, programs can also have multiple embedded images. These images only show up on the program’s page. They must be jpegs, but otherwise do not have size restrictions; however, larger images mean longer webpage load times, so we recommend not exceeding 500kb. Reusing your Content Block image also works well.

WARNING: unlike preset image types, embedded images require you to click Submit for Review when finished. Failure to submit for review means changes will not be approved for posting to the live site.

How to embed an image:

1. Use Firefox to log into the Web Asset Management System (WAM) 
2. Click Extension Programs.
3. Find the program you want to embed photos into and click Edit in the first column.
4. In the Long Description box, place your cursor where you want the image to appear.
5. Click the Image icon found in the second row of formatting buttons – the box with mountains.
6. Click Upload, the third tab across the top.
7. Click Browse and select your jpeg image.
8. Click Sent it to the Server. This will automatically bounce you back to the Image Info tab.
9. Add alt text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard” or “peaches on a tree”).
10. Delete the numbers in the Width and Height fields, leaving them blank. This keeps the image from getting distorted on tablet and mobile phone screens.
11. Make sure words don’t touch the image by adding values to the HSpace and VSpace fields.
12. Click OK, then preview your page by clicking Save Changes at the bottom of the edit screen, which will return you to your list of programs. Click Edit next to the program again, then click Preview Page at the top of the edit screen.
13. To edit your image, return to Edit Program, click the image and click the Image icon. Rinse and repeat until the page looks like you want it.
14. When you’re happy with the preview, click Submit for Review. Robert and Ashley will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the changes to show up on the live site. If not, they will let you know it needs fixed.

Published by: Kozsan, T., Andrews, A. and Moore, R., 2019, How to add images to an Extension program, Extension | University of Nevada, Reno

An EEO/AA Institution. Copyright © 2024, University of Nevada Cooperative Extension.
A partnership of Nevada counties; University of Nevada, Reno; and the U.S. Department of Agriculture