Web Accessible Images

 

Events & Text on Images: Engage Calendar & Web pages

If you are planning an event and you are working with the graphics team to create deliverables for your event then please ask them to supply you a 2738 px (Width) x 1826 px (Height) image that does not contain any text especially if that text is not part of the original image and it is the event details.

Since the Engage event will already have the title and the events details front and center

It is your responsibility to ensure that the images you submit for your events uphold ADA compliance and presents as visually pleasing.

• The purpose of the “alt” attribute (or in this case, the Description field) is to help people who are blind or who have low vision understand what the image is. A screen reader will use this attribute to tell the user what the image is. It also appears on the page in place of images if someone doesn’t like to display images on their computer screen (or in the case of a broken image link). This text should provide a text equivalent to the image. 
• Do not include the text “image of…” or “graphic of…” to describe the image unless it is important for the reader to know ("Painting of the ocean"). Screen readers automatically say "image" when reading the page. Try to be as descriptive as possible about what the image is without repeating information already stated in the text surrounding the image. 

• If your image serves a purpose (such as being a link as with the below example of an “Apply” button), add that to the Description box. The description should provide a description of the content and the function of the image. 
  
  

Circumstances in which it is appropriate to use an empty or null alt attribute:

• An image is decorative.
• An image is not meant to be displayed to users.
• An image consists of text that is repeated as plain text in another location on the page.
• The image is part of a group of images that form a single picture and one of the other images in the group has a text alternative which serves as the text alternative for the entire picture.
• The image is included as the content of a link and there is other content included that describes the link target.

 

If you need help deciding whether or not your image needs alt text, you can use WAI's decision tree.

 

 

(The Description becomes the alt attribute and the Tooltip becomes the title (not necessary). This is mostly behind the scenes, to help screen readers.)

 

     Ex: In the example below, an image is used as the link to the P.M. Ceremony information, without any accompanying link or information, so this image needs a Description.

     -->      

 

"In many cases you can ask the question "If I could not use this image, what would I put in its place?" to determine appropriate alternative (Description) text."

 

• If your image is decorative (does not appear within a link, does not present important content or is used for visual interest – random pictures of students, for ex) or contains content already stated within the text, check the “Decorative” box and leave the Description box empty. This will cause the screen reader to skip over the image because it deems it unimportant.

 

• * Logos should have the description of the company name only (“Palm Beach State College”). If it's a link back to the home page, you can use "Home Page" instead.

 

For a more in-depth description, see WebAIM image reference.