Effective Graphics Course

Articles in this Section

Overview

All users at UTA can create effective, accessible graphics and this information will empower you to do so.

Self-Serve Resources are cumulative. See the Self-Serve Courses page for the complete learning path.

Do not start this course until you have completed the following:

  1. Accessibility training provided by EIR Accessibility
  2. The Inclusive and Accessible Content course

EIR Electronic Accessibility is the training and compliance resource for accessibility at UTA. OLC Creative Services offers Self-Serve Courses to support primary training provided by EIR Electronic Accessibility. We cannot create accessible content or verify accessibility for groups outside our service area.

Video Tutorial

Effective Graphics and Flyers

Acceptable Programs

All users at UTA can create effective, accessible graphics using these programs, which we are available to us for FREE:

  • Microsoft Word
  • Microsoft PowerPoint
  • Adobe Photoshop
  • Adobe InDesign
  • Adobe Illustrator
  • Adobe Express

Tools like Marq (LucidPress) and Canva are discouraged because they require an additional expense.

Adobe Express is very similar to Canva and already available at no cost to UTA users.

Requirements

All digital graphics should:

  • follow best practices
  • be accessible and use accessible colors
  • follow brand standards
  • be exported to JPEG, PNG, GIF or SVG
  • include descriptive alt-tags to describe the information conveyed in the image
  • contain no more than 140 characters
  • have the text from the graphic restated as live text in the body of the webpage, email, social media post, et cetera
  • never rely on the text in the graphic as a substitute for body text

Types of Graphics

  • User-Created Graphics: Users can create their own graphics by watching the video and following the steps on this page.
  • OCI-Created Graphics: OCI Creative Services uses InDesign to provide graphic design services to business units upon request.

DO’s and DONT’s

DO NOT include a large amount of text in graphics.

A large amount of text in a graphic meant for use with emails, websites, social media, or Teams is not useful because:

  • The text will be illegible for all users at small sizes and on devices.
  • The text in the graphic is not “live” – it is only a picture of text.
  • The text in the graphic is not “clickable,” “copiable,” and “pasteable” and is available for all users.

Including too much text in a graphic creates a poor user experience for all users because:

  • Users may have to click a button to “download pictures” in emails. Images do not usually display by default in most email services.
  • The text in the graphic is not “clickable” because it’s a picture of text.
  • The text in the graphic is not “copiable” or “pastable” because it’s a picture of text.

Including too much text in a graphic risks creating barriers for users with disability because:

  • Users with disability cannot access the text embedded in the graphic. Screen readers cannot read the text aloud.
  • Content authors must set an alt-text or no information is conveyed to a user with disability – it just reads “image.”
  • Alt-texts should be brief, roughly 140 characters. Multi-paragraph alt-texts that restate all the text in a graphic with to much text are not appropriate.

These graphics have too much text for use in digital applications such as email, website, social media, or Teams.

They are flyers or posters that have been flattened to an image. They are not suitable for digital use because the text is not “live” – only a picture of text.

Sighted users can read the text, but they cannot copy/or paste the text or click on any of the links. Users with disabilities may not be able to access the information in these images at all.

If these graphics are meant for emails, websites, social media, or Teams, the text should be simplified as shown and paired with live body text.

a flyer saved as an image with text embedded as an example of ineffective communication
Flyer – Figure 1
Flyer – Figure 2

DO create an attention-getting graphic that has brief, simplified text.

Square images (1000×1000 px or similar) work for nearly all social media platforms, emails, websites, and Teams. The text in the following two examples is brief.

  • Do not include text-heavy information. Paragraphs and complete details belong in the body text that should be paired with the graphic.
  • Include only the most essential pieces of information.
    • Headline (“Flu Shots on Campus”)
    • Subheadline (“October 26 and 27:)
    • Call to Action (“Visit GO.UTA.EDU/FluShot to learn more.”)
  • Use a live hyperlink with the graphics so users can visit the link.
  • It is generally not necessary to include a QR code in digital graphics. QR codes are best used for print, to direct users to websites. They are not really needed for digital graphics because users are either on a computer or a phone. If they are on a computer, they can only scan the QR code to open the website on their phone. If they are on their phone, they cannot scan the QR code at all.

Note: These graphics were prepared for internal use at UTA. If you are preparing graphics for social media use or external audiences, a UTA logo must always be used.

The body text that should be paired with these graphics should provide the complete details. Restate the text in the graphic and include complete details.

This square image works for multiple platforms. It has brief text and an attention-getting visual.

The text is sufficiently large for viewing at small sizes and on devices.

an example of effective communication
Graphic – Figure 3

Figure 3 should include a brief alt text such as, “an African American woman pulling her mask to the side to smile after receiving a flu shot.”

The graphic should be paired with detailed body text.

Graphic – Figure 4

Figure 4 should include a brief alt text such as, “a vintage style advertisement for Accessible Documents with InDesign workshop.”

The graphic should be paired with detailed body text.

DO pair attention-getting graphics with detailed body text.

These graphics can be used in an email, website, social media post, or on Teams to grab users’ attention. However, they do not provide complete details on their own, and they need the complete details presented along with it as body text.

  • Usage for social media or Teams: Alt-tag the graphic with a brief description. Restate the text contained in the graphic and any additional details in the body of the post. Limit the body of the post to roughly 240 characters.
  • Usage for emails: Place the graphic at the top of the email and alt-tag it with a brief description. Restate the text in the graphic and add additional details in the body of the email.
  • Usage for websites: Place the image on the webpage and alt-tag it with a brief description. Restate the text in the graphic and add additional details in the body of the webpage.

Note: These graphics were prepared for internal use at UTA. If you are preparing graphics for social media use or external audiences, a UTA logo must always be used.

an example of effective communication
Graphic – Figure 5

This is the body text for Figure 5:

Flu Shots on Campus

  • Tuesday, October 26 Trinity Hall 104E 9am – 12pm
  • Wednesday, October 27 Wetsel Building 200 1pm – 4pm
  • Free with PPO insurance
  • $20 cash or check without insurance


See more information and reserve your appointment at go.uta.edu/flushot.

Bring your insurance card (if applicable) and driver’s license.

Questions?

Contact UTA Human Resources benefits@uta.edu 817-272-5554

Graphic – Figure 6

This is the body text for Figure 6:

Accessible Documents with In Design for intermediate to advanced users

Attend our Workshop

  • March 28, 2024
  • 2:30pm – 4:30pm

Learn New Skills

  • Work with text and visuals
  • Set the reading order
  • Check, export and test
  • . . . And much more!

Register now at oit.uta.edu/training

Learn more at go.uta.edu/a11yday

From UTA Learning and Communication

DO NOT rely on the graphic as a substitute for body text.

As shown in these examples, always repeat the Headline, Subhead, and Call to Action and any other text in the image along with any additional details in the body of your email, website, social media post, or Teams post.

If you don’t repeat the text, all users will lose context because some email services will block the image and require the user to “download pictures.”

Repeat the Headline, Subhead, and Call to Action in the body text so that no information is lost. Don’t rely on the graphic alone to provide that information.

Effective and Ineffective Examples

Figure 7: This email is effective because it has a graphic with limited text, an alt-tag on that graphic, all relevant text restated in the body of the email with live hyperlinks.
Figure 7: This email is effective because it has a graphic with limited text, an alt-tag on that graphic, all relevant text restated in the body of the email with live hyperlinks.
Figure 7: This email is effective because it has a graphic with limited text, an alt-tag on that graphic, all relevant text restated in the body of the email with live hyperlinks.
Figure 8: This email is not effective because all of the text is contained in the email.

Unless the user chooses “download external images,” they will never see the text in the graphic.

This is not accessible because screen reader users cannot access the text in this graphic.
Figure 8: This email is not effective because all of the text is contained in the email.

Unless the user chooses “download external images,” they will never see the text in the graphic.

This is not accessible because screen reader users cannot access the text in this graphic.
Figure 8: This email is not effective because all of the text is contained in the email.

Unless the user chooses “download external images,” they will never see the text in the graphic.

This is not accessible because screen reader users cannot access the text in this graphic.