Skip to main content

Infographics, Flowcharts and Diagrams

Flowcharts and diagrams: publish the information in HTML (preferred)

Flowcharts and diagrams often communicate meaning through layout, arrows, color, and visual grouping. Because that structure is not reliably conveyed to screen readers or keyboard-only users, flowcharts should not be the only place where requirements, steps, or relationships are explained.

Campus standard

Provide an HTML version that communicates the same information in a linear, readable format. A visual flowchart (including a PDF) may be offered as an optional reference, but the HTML version must stand on its own.

What your HTML version must include

  • All content in text (no “see diagram” instructions as the only way to understand the information).
  • Clear structure using headings and lists (example: Year → Term → items/requirements).
  • Relationships stated in words (example: prerequisites, dependencies, sequence, and decision outcomes).
  • No color-only meaning (any categories shown by color in the diagram must be named in text).
  • Descriptive labels for steps, branches, and outcomes (avoid vague labels like “click here” or “see above”).

Recommended patterns

  • Step-by-step process: use an ordered list with clear step names and outcomes.
  • Decision flow: use headings for each decision point and bullet lists for “Yes/No” paths.
  • Program pathways / course sequencing: group by year and term with explicit prerequisite notes.

Example: decision flow (HTML)

Decision 1: Is this request eligible?

  • Yes: Proceed to Decision 2.
  • No: Provide the ineligible outcome and next steps (who to contact, what to submit, etc.).

Decision 2: Is approval required?

  • Yes: Submit the request for approval. If approved, complete Step 3.
  • No: Complete Step 3.

Step 3: Complete the action

  1. Do the first required action.
  2. Do the second required action.
  3. Confirm completion and share the outcome.

Optional: include the visual flowchart as a reference

If you also provide a diagram or PDF, label it as optional (for example, “Printable flowchart (PDF)”). Do not rely on it to communicate required information, relationships, or sequence.

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).