Kozsan, T., Andrews, A. and Moore, R. 2019, How to add images to a publication, Extension | University of Nevada, Reno

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 a publication

Tip: Check out LinkedIn Learning for videos on how to prepare images for the web.

There are three preset image types for a publication: content blocks, banners and thumbnails. These image types show up with publication titles and descriptions throughout the website. Each publication can have only one of each of these image types.

Content blocks

Content blocks show up in the Featured Publications ribbon on the Learn About pages.

content block size young girl looking excitedly at a freshly picked radishContent blocks must be:
•    586x440px (4:3 ratio)
•    Jpeg
•    Less than 200kb

To add a content block to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Content Block Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    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”).
7.    Click Add 4x3 Block Image.

Banners

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

Banners must be:
•    1,440x480px
•    Jpeg
•    Less than 500kb

To add a banner to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Banner Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    Add alternate 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”).
7.    Click Add Banner.

Thumbnails

Thumbnails are what show up next to publications at the bottom of Extension program pages and when a keyword search is performed in the “What do you want to learn about?” search field.

thumbnail size young girl looking excitedly at a freshly picked radishThumbnails must be:
•    300x300px (1:1 ratio)
•    Jpeg
•    Less than 200kb

To add a thumbnail to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Thumbnail Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    Add alternate 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”).
7.    Click Add 1x1 Thumbnail Image.

 

Embedded images

Along with the preset image types, publications can also have multiple embedded images. For information, see How to add a publication to the database.

How to add images to a publication

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 a publication

Tip: Check out LinkedIn Learning for videos on how to prepare images for the web.

There are three preset image types for a publication: content blocks, banners and thumbnails. These image types show up with publication titles and descriptions throughout the website. Each publication can have only one of each of these image types.

Content blocks

Content blocks show up in the Featured Publications ribbon on the Learn About pages.

content block size young girl looking excitedly at a freshly picked radishContent blocks must be:
•    586x440px (4:3 ratio)
•    Jpeg
•    Less than 200kb

To add a content block to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Content Block Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    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”).
7.    Click Add 4x3 Block Image.

Banners

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

Banners must be:
•    1,440x480px
•    Jpeg
•    Less than 500kb

To add a banner to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Banner Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    Add alternate 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”).
7.    Click Add Banner.

Thumbnails

Thumbnails are what show up next to publications at the bottom of Extension program pages and when a keyword search is performed in the “What do you want to learn about?” search field.

thumbnail size young girl looking excitedly at a freshly picked radishThumbnails must be:
•    300x300px (1:1 ratio)
•    Jpeg
•    Less than 200kb

To add a thumbnail to a publication:
1.    Use Firefox to log into the Personnel Management System.
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll down to “Add Thumbnail Image.”
5.    Click Browse and select your properly-sized jpeg image.
6.    Add alternate 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”).
7.    Click Add 1x1 Thumbnail Image.

 

Embedded images

Along with the preset image types, publications can also have multiple embedded images. For information, see How to add a publication to the database.

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