Web Editing

Using SitImprove PDF validate to test your PDF accessibility

Video transcript

How to add a header to your table

Video Transcript

How to edit image using Adobe Express

Video Transcript

Publishing Accessible Web Content: A Quick Guide

Trasncript of above information graphic

Need Help?

Our goal is to make information easier for everyone to access while keeping the website accurate, current, and manageable. If you're unsure whether something belongs on the website—or whether there's a better way to share it—we're happy to help.

Contact Marketing & Communications before publishing if you have questions.

Resources for meeting compliance:

• Tips for passing the accessibility check

  Tips for passing the accessibility check

  • Start with a clean document such as this a template as a base file for creating accessible agendas.
  • Use styles in Word/Google Docs: Apply proper heading levels (Heading 1, Heading 2, etc.) instead of manually bolding text.
  • Do not skip heading order such as Heading 1 and then skipping to a heading 3.
  • Add alt text to images: Every meaningful image, chart, or graphic should have alternative text that describes its purpose.
  • Only minimal text if at all should be in graphics. Aim for for 125-150 characters max.
  • Use lists and tables tools: Use built-in list and table tools rather than manual formatting.
  • Tables are not for layouts: Make sure your tables always include a Header Row
  • Provide descriptive link text: Instead of “click here,” use “Download the campus map (PDF).”

  Fix Common Issues

  • Headings: Ensure heading tags are applied in logical order (H1 → H2 → H3).
  • Tables: Use header rows and ensure cells are tagged properly. Avoid merged cells if possible.
  • Form fields: Add labels and tooltips so screen readers can identify them.
  • Color contrast: Check that text is readable against its background.

  Re-run Accessibility Check

  • After making fixes, run the Accessibility Checker again to confirm compliance.
  • A fully compliant PDF should pass with no errors, though some warnings may require manual review.

  Best Practices

  • Keep layouts simple and consistent.
  • Avoid using scanned images of text—always use real, selectable text.
  • Break up long documents with headings and bookmarks.
  • If distributing forms, use accessible form fields.

   

   

• Tagging a PDF with Acorbat

  Tagging a PDF for Accessibility in Adobe Acrobat Pro

  This guide provides step-by-step instructions for creating accessible PDF that meet WCAG 2.1 Level AA and ADA Title II requirements for web and mobile content.

  Summary of Key Accessibility Requirements

  • Add tags and structure (WCAG 1.3.1 – Info and Relationships)
  • Ensure logical reading order (WCAG 1.3.2 – Meaningful Sequence)
  • Add alternative text to images (WCAG 1.1.1 – Non-text Content)
  • Use proper headings (WCAG 1.3.1)
  • Fix tables with headers (WCAG 1.3.1)
  • Create descriptive links (WCAG 2.4.4 – Link Purpose)

  Step 1: Open Accessibility Tools

  1. Open your PDF in Adobe Acrobat Pro.
  2. Select Tools > Accessibility.
  3. Open the following panels:
     • Accessibility
     • Tags (View > Show/Hide > Navigation Panes > Tags)
     • Reading Order

  Step 2: Check for Existing Tags

  Look in the Tags panel for a tag structure such as <Document>.

  • If no tags exist, select Autotag Document.

  Note: Autotagging is only a starting point and must be reviewed for accuracy.

  Step 3: Fix Tag Structure (WCAG 1.3.1)

  Ensure the document has a logical structure using tags such as:

  • <H1> for the main title
  • <H2>, <H3> for sections
  • <P> for paragraphs
  • <L> for lists
  • <Table> for tables

  To fix tags:

  1. Right-click a tag in the Tags panel.
  2. Select Properties to change the tag type.
  3. Drag and drop tags to correct the reading hierarchy.

  Step 4: Set Reading Order (WCAG 1.3.2)

  1. Open the Reading Order tool.
  2. Select Show Reading Order Panel.
  3. Review the numbered order on the page.
  4. Adjust order by dragging elements or reassigning content types.

  Common issues include incorrect reading order in multi-column layouts.

  Step 5: Add Alternative Text to Images (WCAG 1.1.1)

  1. Locate <Figure> tags in the Tags panel.
  2. Right-click and select Properties.
  3. Add meaningful alternative text describing the image.

  Example: “Bar chart showing enrollment increased from 2020 to 2024.”

  Mark decorative images as artifacts using the Reading Order tool.

  Step 6: Use Proper Headings (WCAG 1.3.1)

  • Ensure headings are tagged correctly (not just visually styled).
  • Use one <H1> and nested <H2>, <H3> as needed.

  Step 7: Repair Lists (WCAG 1.3.1)

  Lists should use proper structure:

  <L>
    <LI>
      <Lbl>•</Lbl>
      <LBody>List item text</LBody>
  

  Use the Reading Order tool to assign list formatting if needed.

  Step 8: Fix Tables (WCAG 1.3.1)

  1. Locate the <Table> tag.
  2. Ensure rows (<TR>), headers (<TH>), and data cells (<TD>) are correct.
  3. Use the Table Editor to define header cells and scope.

  Step 9: Create Accessible Links (WCAG 2.4.4)

  • Ensure link text clearly describes the destination.
  • Avoid vague text like “click here.”

  Example: “View ADA Title II accessibility requirements.”

  Step 10: Set Document Language (WCAG 3.1.1)

  1. Select File > Properties.
  2. Go to the Advanced tab.
  3. Set the document language (e.g., English).

  Step 11: Run Accessibility Checker

  1. Select Tools > Accessibility > Full Check.
  2. Review results and fix identified issues.

  Note: Automated checkers do not detect all accessibility issues. Manual review is required.

  Why This Matters

  Accessible PDFs support screen readers, keyboard navigation, and meaningful structure for all users.

  • WCAG 2.1 ensures content is perceivable, operable, understandable, and robust.
  • ADA Title II requires effective communication and accessible digital content.

  Quick Accessibility Checklist

  • Tags are present and correctly structured
  • Reading order is logical
  • Headings are properly tagged
  • Images include alternative text
  • Tables include header cells
  • Links are descriptive
  • Document language is set

   

  Helpful video:

  This video, The Accessibility Guy walks through four different methods to tag content within a PDF using Adobe Acrobat Pro DC, helping ensure your files meet accessibility standards for screen readers and assistive technologies.

  • 00:00 Introduction
  • 00:47 The Reading Order Tool
  • 01:55 Create Tag from Selection 03:00 Use Guided Actions (formerly Make Accessible Action Wizard)
  • 03:55 Cloud-based API Auto Tagging for Accessibility
  • 04:52 BONUS: Start with an accessible source file!
• Creating PDFs with MS Word

  The best template for creating accessible documents is a simple one that uses clear structure and the built-in document tools available in your software. This link below provides an example of a simple starter document designed for exporting to an accessible PDF.

  > Download a starting template in Word

  > Create an accessible PDF creation (how to make your own styles)

  Please keep in mind that adding too many elements to a document can make it inaccessible. Common issues include improper tagging, missing titles, lack of alt text for images, poor color contrast, and unclear link structure.

  We recommend reviewing the courses and resources listed on this page for guidance. If you have additional questions or need clarification, please contact web support for assistance.

  How to export from Word to PDF and running the checker

  • When saving from Word or another program, choose Save As → PDF and ensure that “Best for electronic distribution and accessibility” or “Tagged PDF” is selected.
  • Avoid using “Print to PDF,” as this strips out accessibility tags.
  • Tags are the structural markers in a PDF that tell assistive technology what content is (headings, paragraphs, lists).
  • Check if your PDF is tagged: In Acrobat, go to File → Properties → Description → Look for “Tagged PDF: Yes.”
  • If it says “No,” you will need to add tags manually in Acrobat.

  Re-run Accessibility Check

  • After making fixes, run the Accessibility Checker again to confirm compliance.
  • A fully compliant PDF should pass with no errors, though some warnings may require manual review.

   

• How to Test for 4.5:1 Contrast

  How to Test for 4.5:1 Contrast

  1. Get a Contrast Checker: Use an online tools like WebAIM's Contrast Checker or Colors Contrast Checker) or the free Contrast Checker from SiteImprove or use browser extensions (ColorZilla, WCAG Contrast Checker).
  2. Identify Colors: Determine your text (foreground) color and background color.
  3. Input Colors: Enter the colors into the tool, often using hex codes (e.g., #FFFFFF for white) or eyedroppers to select them directly from your screen.
  4. Check the Ratio: The tool will display a contrast ratio (e.g., 4.5:1, 7:1) and indicate if it passes the WCAG AA standard for normal text. 

  What the Ratio Means

  • 4.5:1 means the lighter color is 4.5 times brighter than the darker color.
  • This ratio ensures sufficient difference for most users, especially those with low vision. 

  What the Ratio Means

  • 4.5:1 means the lighter color is 4.5 times brighter than the darker color.
  • This ratio ensures sufficient difference for most users, especially those with low vision. 

   

• Fundamentals of Alt Text  

  Alt text (alternative text) is a concise, written description of an image embedded in digital content, enabling screen readers to convey visual information to users with visual impairments. It should be brief (ideally under 125 characters), contextual, and accurately describe the image's content or function. 

  Key fundamentals of effective alt text include: 

  • Context over Description: Focus on why the image is there, not just what it looks like.
  • Conciseness: Keep descriptions under 125 characters.
  • Avoid Redundancy: Do not start with "image of" or "photo of" as screen readers already announce the element as an image.
  • Contextual Accuracy: If an image carries functional meaning (e.g., a search icon), describe its function ("Search") rather than its appearance ("magnifying glass icon").
  • Decorative Images: If an image is purely for decoration, use an empty alt attribute (alt="") so screen readers skip it.
  • Handling Complex Images: For graphs, charts, or maps, provide a short summary in the alt text and a detailed description in the surrounding text or a linked document.
  • Accessibility and SEO: Good alt text improves both accessibility for visually impaired users and SEO, as search engine crawlers use it to understand image content. 

  Examples: 

  • Good: alt="A golden retriever puppy sitting on a wooden dock."
  • Bad: alt="puppy, dog, cute, retriever, dock, lake, water, pet" (Keyword stuffing)
  • Bad: alt="image of a dog" (Redundant) 

  Learning Resources:

  More information at:  https://accessibility.huit.harvard.edu/describe-content-images