Skip to main content

Infographics, Flowcharts and Diagrams

While many design programs boast that you can make their design accessible, this often only applies to creating and sharing the native file within that design program.  Accessibility features often are eliminated or are not compatible when saving the documents to a universal format (eg. PDF).

Dialog box from Microsoft word showing the

Dialog box from Microsoft word showing the "Save to PDF" setting for structured tags, and a dialog box showing the Accessibility options in Adobe Acrobat.

Example of infographic description and alt text

For both web and non-web content, the safest and most accessible route for most individuals in the university is to:

  • keep the infographic as a flat image (jpg or png)
  • ensure that it has alt text like a photo, and
  • provide a visible text explanation with it.

For a web infographic, the text description should be located immediately below the graphic; for a standalone document, the visible description should be directly below the image (when possible), or on a separate page with the alt text directing the user to the description. 

Organizational chart for UMass Dartmouth University Marketing showing staff roles and reporting structure; full description following Figure 1.

Alt text: Organizational chart for UMass Dartmouth University Marketing showing staff roles and reporting structure; full description follows as Figure 1.

Description: Figure 1. The chart shows the reporting structure for the University Marketing division at UMass Dartmouth.

  • Samuel Mead, Chief Marketing Officer (CMO), leads the division.
    • Two Assistant Vice-Chancellors report to the CMO:
      • Ryan Merrill, Assistant Vice Chancellor for Strategic Communications and Relations.
      • Hillary Sylvia, Assistant Vice Chancellor for University Marketing.

Under Hillary Sylvia (University Marketing):

  • Liana DePillo, Creative Director, oversees:
    • Justin Maucione, Digital Multimedia Specialist.
    • Vacant, Graphic Designer.
  • Daryl Poeira, Director of Web Systems and Communication, oversees:
    • Melissa Kinney, Internet Systems Developer/Web Designer.
  • Mary Avery, Marketing & Advertising Lead.
  • Chelsey Puza, Director of Digital Content Strategy, oversees:
    • Susan Rohwer, Marketing and Communications Specialist
    • Kelsey Healey, Strategic Communications Specialist
    • David James and Kamryn Kobel, Communications Specialists
    • Heather Tripp, Video Production Specialist, and Eric Anagnostis, Video Production Manager.
  • Lindsey Costa, Manager of CRM Systems, oversees:
    • Timothy Murphy, Marketing CRM Specialist
  • Marissa Matton and Pete Ciccarone, Enrollment Marketing Specialists.

Connector lines in the chart visually show reporting relationships from Samuel Mead at the top, through the Assistant Vice Chancellors, and down to each director and specialist role within the University Marketing team.

Verify it is accessible

Not sure if you created the diagram to comply with accessibility regulations? This checklist provides steps to make you design with accessibility in mind.

Accessible infographics checklist

(for Word, PowerPoint, Canva, and similar tools)

Make sure your infographic or chart is creating in an accessible manner by following this checklist.

  1. Before you begin
    1. Define the purpose of your infographic: what should users learn from it?
      • Decide the format:
      • Webpage: use a flat image + text description.
      • Document (Word/PDF): insert image + visible text description below.
    2. Avoid relying on color alone to convey meaning.
  2. Design & layout
    1. Use sufficient contrast between text and background (≥ 4.5:1).
    2. Choose large, legible fonts (minimum 12–14 pt).
    3. Keep text horizontal (avoid rotated or decorative text).
    4. Include labels or icons in addition to color coding.
    5. Ensure logical reading flow (top to bottom or left to right).
  3. Content & structure
    1. Include a clear title within the image or document.
    2. If showing data:
      • Use consistent labels (eg. measurement, data group category) on charts.
      • Avoid using only color or shape to distinguish categories.
    3. Summarize the main takeaway visually and in text.
  4. Text equivalent (the most important part!)
    1. Provide a visible written description that:
    2. Explains the infographic’s purpose and key message.
    3. Lists or summarizes all important data points, trends, or relationships.
    4. Uses headings, paragraphs, and/or tables for clarity.
    5. Appears directly below or next to the infographic (not in a separate file).
    6. Uses alt text on the image that says something like:
      “Infographic visually summarizing [topic]; full description follows.”
  5. Exporting/sharing
    1. Export as a high-resolution image (PNG or JPG).
    2. Insert the image and text into Word or PowerPoint, not directly into Acrobat.
    3. When saving as PDF:
      • Check “Document structure tags for accessibility.”
      • Confirm in Acrobat that tags and reading order are correct (optional).
    4. Never rely on the design software exports alone -  they can potentially flatten the file's structure.
  6. Final Accessibility Check
    1. Can someone understand all content without seeing the image?
    2. Does the text alternative include all data/relationships from the image?
    3. Is color contrast and font size sufficient?
    4. Are all decorative shapes and background images marked as decorative?

If you complete all these steps, your infographic meets WCAG 2.1 AA for non-text content (1.1.1), color use (1.4.x), and readability (3.1.x).