Images with Text & Flyers

Why shouldn't I use images or flyers 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 the images or in the flyers can't be found by Google. 
  • The content can't be found through your site's search bar.
  • 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.
  • Even when you use large image files, they can't be easily seen on mobile phones.
  • The text on images can be hard to read and will become pixelated and unreadable when enlarged.
  • The text can't be translated into other languages. 
  • 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.

Alternatives to flyers or text on images

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 the images or in the flyers can't be found by Google.
  • The content can't be found through your site's search bar.
  • 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.
  • Even when you use large image files, they can't be easily seen on mobile phones.
  • The text on images can be hard to read and will become pixelated and unreadable when enlarged.
  • The text can't be translated into other languages.
  • 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.


Solution #1: Take advantage of the text and image sections in our A&S web theme

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:



Solution #2: Put text next to the image instead of over it

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:

 

Solution # 3: Creat a web version of your flyer

Flyers advertising for events and other activities can contain a lot of information and look nice, but they cause 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:

  • Google can't see your flyer.
  • 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. 

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.