by Alana Gomoll

Images

Alt Text

Most often, infographics are presented as images. For image-based infographics, the main concerns are alternative text and color contrast. You may be familiar with alternative text, which describes the content of an image to someone using a screen reader. For infographics, alt text involves fully providing the information described by the graphic. Where this should be included depends on where the infographic is being presented.

If it’s in a Word or PowerPoint document, you can right click on the image and choose Edit Alt Text (if you’re in 365 or 2019) or choose Format Picture and find the alt text box in the Layout and Properties tab of the Format menu (For Office 2016).

Screenshot of the Alt Text pane in Word 365, with fields for Title and Description and a checkbox to mark the image as decorative.
Screenshot of the Alt Text pane in Word 365, with fields for Title and Description and a checkbox to mark the image as decorative.

If you’re including the image as part of an email, and you’re using Outlook, you can include alt text the same way, by right clicking and choosing Edit Alt Text. If you aren’t using Outlook or another client that allows for the inclusion of alt text when inserting images, you should include the text alternative in the email itself, add a link to the alt text, or add it as an attachment.

If you’re posting it on a webpage, you can include the alt text in the image tag as seen below:

<img
src="infographic.png" alt="description of the infographic's
content"/>

When writing the alt text itself, describe in the logical reading order of the graphic the data described by each element. The form of the element may be omitted if it isn’t important to understanding the image.

For example, here is an infographic describing student demographics at UIS and its alt text:

Infographic, Snapshot of the UIS Student Body (Fall 2019): UIS has 4275 total students, 66.1 percent of which are onground students, and 33.9 percent are online students. 17.2 percent are transfer students, 62.5 percent are undergrad students, and 37.5 percent are graduate students. 30.9 percent live in college housing. 44.6 percent are part time students and 55.4 percent are full time students. 51.6 percent of students are female and 48.4 percent are male. Residency: 76.6 percent of students are Illinois residents; 14.6 percent are Non-Illinois residents; and 8.7 percent are International students. Age breakdown: 620 students are under 19. 662 students are aged 20 to 21. 827 students are aged 22 to 24. 715 students are aged 25 to 29. 515 students are aged 30 to 34. 366 students are aged 35 to 39. 359 students are aged 40 to 49. 193 students are aged 50 to 64. 18 students are 65 or older. Race breakdown: 2611 students are White. 557 students are Black or African American. 373 students are Non Resident Alien. 348 students are Hispanic or Latino. 197 students are Asian. 134 students are Two or More Races. 47 students are unknown. 6 students are American Indian or Alaskan Native. 2 students are Native Hawaiian or Other Pacific Islander.
Example ALT Text:

Infographic, Snapshot of the UIS Student Body (Fall 2019): UIS has 4275 total students, 66.1 percent of which are onground students, and 33.9 percent are online students. 17.2 percent are transfer students, 62.5 percent are undergrad students, and 37.5 percent are graduate students. 30.9 percent live in college housing. 44.6 percent are part time students and 55.4 percent are full time students.
51.6 percent of students are female and 48.4 percent are male.
Residency: 76.6 percent of students are Illinois residents; 14.6 percent are Non-Illinois residents; and 8.7 percent are International students.
Age breakdown:
 620 students are under 19.
 662 students are aged 20 to 21.
 827 students are aged 22 to 24.
 715 students are aged 25 to 29.
 515 students are aged 30 to 34.
 366 students are aged 35 to 39.
 359 students are aged 40 to 49.
 193 students are aged 50 to 64.
 18 students are 65 or older.
Race breakdown:
 2611 students are White.
 557 students are Black or African American.
 373 students are Non Resident Alien.
 348 students are Hispanic or Latino.
 197 students are Asian.
 134 students are Two or More Races.
 47 students are unknown.
 6 students are American Indian or Alaskan Native.
 2 students are Native Hawaiian or Other Pacific Islander.

Here, none of the visual elements provided to make the image more engaging to the eye are included, as they are superfluous and are not used in a way to further convey the data expressed. Instead, the statistics are simply described in text, with an effort to make the format they are read in understandable to a listener. If any visual elements are important to the understanding of the infographic, be sure to include those. An example might be if one of the bars of the histogram was colored differently to highlight a certain data value.

In terms of accuracy, try to provide the original statistics if possible. I was able to include specific numbers for the charts at the bottom of the graphic because I had access to the original data that formed this document. If you don’t have such access, approximations are acceptable, but note that you’re providing approximations rather than the actual values in your description.

Color Contrast

The colors used in your infographic should also have significant contrast between them to ensure that sighted individuals with visual impairments can still read the graphic. There are a number of tools that allow you to check the contrast of a foreground and background color like this WCAG color contrast checker, or apply filters to see what an image looks like with different forms of color blindness, like Coblis.

Documents

If the infographic is instead a document like a PDF or PowerPoint that is made up of individual elements, there are other considerations beyond those listed above. Primarily, the elements should read in an order that is not confusing and complements the content.

PowerPoint

The accessibility checker in Office programs is located under File > Info > Check for Issues > Check Accessibility. You can use this to see if there are other issues with the document than are listed here. When you select an issue, there is a description at the bottom of the pane of why the issue occurred and how to fix it.

Screenshot of the Accessibility Pane in PowerPoint, displaying a number of alt text, slide title, and reading order issues. The information of why an issue should be fixed and how to do so is shown at the bottom of the pane.
Screenshot of the Accessibility Pane in PowerPoint, displaying a number of alt text, slide title, and reading order issues. The information of why an issue should be fixed and how to do so is shown at the bottom of the pane.

In PowerPoint, you can see the reading order by opening the Selection Pane (Home > Arrange > Selection Pane). The elements will be read from the bottom to the top of the selection pane. Drag and drop elements within this pane to reorder the way they will read.

Screenshot of the Selection Pane in PowerPoint for the previous example infographic. In the order the elements would read, they are: Title 1, Gender, Total, Onground, Online, Grad, Undergrad, Transfer, Full-time, Part-time, Housing, Residency, Pie Chart, Age, Histogram, Race, and Area Chart.
Screenshot of the Selection Pane in PowerPoint for the previous example infographic. In the order the elements would read, they are: Title 1, Gender, Total, Onground, Online, Grad, Undergrad, Transfer, Full-time, Part-time, Housing, Residency, Pie Chart, Age, Histogram, Race, and Area Chart.

For elements like charts, that have data integrated, they will read the data in a tabular format, and don’t require special considerations. Text items should be added in a content block rather than a text box, because text boxes can sometimes have issues with not being read properly. To add more content blocks, open the Slide Master (View > Slide Master) copy a content block on the current layout, and paste it in for as many elements as you need to add.

Screenshot of the location of the slide master in the View tab.
Screenshot of the location of the slide master in the View tab.

You can then reapply the layout by choosing it from the Layout dropdown in the Home tab, and add your elements into the content blocks.

Screenshot of the Layout dropdown displaying a Content layout that contains many content blocks.
Screenshot of the Layout dropdown displaying a Content layout that contains many content blocks.

Graphical items should have alternate text that describes their content, and if they’re decorative, you can check the “Mark as Decorative” box in the alt text pane.

PDF

Checking accessibility in PDF is a little more complicated than other filetypes. There are two tools that you may need to use to ensure an accessible PDF. First, use the Accessibility Check option from the Accessibility tool. The issues will be displayed in the left pane. You can right click and choose Explain, and it will open the Adobe help page explaining the error and how you might fix it.

If you get an issue for Untagged PDF, you need to run the Make Accessible wizard from the Action Center tool. Follow the dialog boxes to complete the wizard. When it asks for the document information, all of the fields are optional except for Title. It will ask if you would like to scan for form fields and the default option is to do so. Don’t choose this option; choose No, Skip this Step. You will likely have a point where it presents you with boxes to add alt text to any images it recognizes. I suggest just choosing Save and Close here, ensuring the reading order is correct, and then going back to alt text at the end by right clicking on one of the alt text issues and choosing Fix.

Screenshot of the PDF Accessibility Checker with a failed Tagged PDF error.
Screenshot of the PDF Accessibility Checker with a failed Tagged PDF error.

Similar to PowerPoint, reading order is the most important accessibility concern in PDFs. The easiest way to categorize elements and change their reading order is in the Order panel. You can right click on the left toolbar and choose Order if it isn’t shown already.

The icon for the Order panel in Acrobat.
The icon for the Order panel in Acrobat.
Screenshot of the sidebar items in Acrobat containing Accessibility Checker, Articles, Attachments, Bookmarks, Content, Destinations, Layers, Model Tree, Order, Page Thumbnails, Signatures, and Tags.
Screenshot of the sidebar items in Acrobat containing Accessibility Checker, Articles, Attachments, Bookmarks, Content, Destinations, Layers, Model Tree, Order, Page Thumbnails, Signatures, and Tags.

Here, each element will have a box around it labeled with a number in the order that they will read aloud to a screen reader. Each element is also listed in order in the left side pane. You can reorder elements within that pane. To regroup elements or change an element’s tag, open the menu at the top of the pane and choose “Show Reading Order Panel”.

Screenshot of the Order dropdown menu with the Show reading order panel option selected.
Screenshot of the Order dropdown menu with the Show reading order panel option selected.

This will open a dialog, and you will now be able to drag a box on the document to select elements. You can also click on an existing tagged element to select it as a whole. After you’ve selected what you want to tag, click the corresponding button in the dialog box. One thing to note is this will affect the layering order in the PDF, so an element that reads earlier will be above an element that reads later. If something is decorative and sitting in front of another element, you can tag it as background/artifact and adjust its visual ordering by using the Arrange options in the Edit PDF tool.

Screenshot of the Edit PDF tool sidebar with the Arrange options dropdown open.
Screenshot of the Edit PDF tool sidebar with the Arrange options dropdown open.

PDF Example

PDF Example

Screenshot of a PDF infographic with the reading order visible.
Screenshot of a PDF infographic with the reading order visible.

This is an example of an accessible PDF infographic. You can see the reading order given by the numbers next to each element. Most of this graphic was simply text, and so didn’t need special considerations beyond ensuring that they read in a logical manner. Each of the pictures has alt text, and the bars of the bar graph are also alt texted with their value, so the bar graph would read the label and then the corresponding value. Note that none of the decorative elements are included in the reading order because their presence is not necessary to understand the information presented.