Images with Text

Why shouldn't I use images with text?

Images with text can negatively affect both your website and the user's experience in many ways.  Not only do they cause problems for people with vision impairments, but also for people who are just trying to find information on your website. 

  • The text on images is not accessible to people with disabilities and can't be read by screen readers. Screen readers will identify the photo as an image, but won't be able to recognize the words embedded in it. This includes photos with text added in Photoshop or other editing software.
  • The text on images can be hard to read and will become pixilated and unreadable when enlarged.
  • The text on the images can't be found by a search engine such as Google. 
  • Images with text cause color contrast issues between the text and background. 
  • The text can't be translated into other languages. 
  • The user can't interact with the text. If you add an email address, URL, social media icons, etc, the user can't click or copy/paste any of that information.
  • Users who have an unreliable internet connection and elect to not load photos on web pages will not see the information in the image.

 

Alternatives to Text on Images

As you've already noticed, there are a few areas on your department sites that have text on images. The reason these sections are still considered accessible is that the text and the image are two separate sections that are layered on top of each other.  Because of the way it has been developed, screen readers and search engines can still identify and read the text. Instead of using Photoshop, take advantage of the different types of sections that allow you to add text and photos in a way that is accessible.

Correct:

Incorrect:




Another alternative to text on images is to use a section that allows you to put the text next to a photo. Doing so will also allow your audience to interact with this section of your website. Remember, search engines cannot see the text you add to the images, but they can see text that is entered into the section next to the photo. 


Correct:

 


Incorrect:

 

 

Flyers & Accessibility

Flyers advertising for events and other activities can contain a lot of information and look nice, but they cause a multitude of accessibility issues and should never be the only source of information. This is especially true when posting them on your website or sending them out in an email. 

By only using an event flyer, you are actually making it more difficult for the user to attend your event:

  • Search engines don't see flyers. If a user Googles the name of your event and all of the event information is on a flyer, it will not show up in the search.
  • Users can't easily RSVP through a flyer. When a user RSVPs to an event in your website, they can click a button and get an instant confirmation. However, with a flyer they have to open an email client, manually type in an email address, email a person, and then wait for the person to email them back with more questions or a confirmation. 
  • The text on the flyer is inaccessible to people who have vision issues, which means they have no way to find out information on your event. Screen readers can't detect the text on the image so they won't even know that it exists. People with low vision problems also won't be able to see the flyer because the text will become blurry and unreadable when they zoom in on it.
  • Keep in mind that all of these issues apply when flyers are posted on social media or sent through an email.

If you must include the flyer, upload it to the body of the event listing, but make sure to manually type in all of the information relative to the event to ensure that everyone has access to it and can easily RSVP to attend. Please do not use them in any other location on your website due to accessibility issues. 

Headers and Thumbnail Images

It's also important to avoid using flyers or other images with text as thumbnail or header images. As you can see from the following examples, the text becomes blurry and the information about the event is cut off. 

Incorrect:

 

Instead, choose a photo that is appropriate to the event. In this case, the event is taking place at Brookings Hall so we are using a clear photo with no writing on it. All of the information, including time, date, location, and an RSVP form has been manually entered into the event listing.


Correct:

 

Remember, because of content share, your header and thumbnail images are not only going to be on your site, but possibly shared to other department websites or onto the main Arts & Sciences page. Since this means an even larger audience, we need to ensure that the content is accessible to everyone.