Ensuring accessibility for graphics is a critical component of ADA Title II compliance. Under WCAG 2.1 Level AA standards, public entities must provide meaningful alternatives for non-text content so that individuals with disabilities can fully understand and engage with visual information. This guide outlines best practices for creating accessible graphics, including alt text, long descriptions, color contrast, and testing methods, to help organizations meet compliance requirements effectively.
Provide meaningful alternative text (alt text)
- Every informative image (charts, diagrams, photos conveying content) must have descriptive alt text that explains its purpose and meaning.
- Keep alt text concise but clear (usually under 125 characters for simple images).
- Avoid phrases like “image of” or “graphic of”—screen readers already announce it’s an image.
- Example:
- Incorrect: alt="chart"
- Correct: alt="Bar chart showing population growth from 2010 to 2020"
Use long descriptions for complex graphics
- For charts, graphs, infographics, the best practice is to provide a longer text description in the surrounding content or via a linked page.
- This should include:
- Purpose
- Key trends
- Important data points
- Insights conveyed visually
- WCAG calls this a “text alternative” for complex visuals. Simple alt text works for basic images, but complex graphics like charts, maps, infographics, or diagrams contain data and relationships that require more explanation.
- Text alternatives can be provided in the following ways:
- Long description using longdesc (for web) or linked text: An example is a link labeled “Detailed description of Quarterly Sales since 2024” that leads to a page or section with the full explanation.
- ARIA attributes (for web): Use aria-describedby to associate the graphic with a longer text block.
- In-page summary: Place a textual summary right below or above the graphic.
- An example regarding alt text vs. long description or summary for a bar chart showing quarterly sales:
- Alt text: “Bar chart of quarterly sales.”
- Long description: “This bar chart shows quarterly sales for Q1–Q4. Q1: $10K, Q2: $15K, Q3: $20K, Q4: $18K. Sales increased steadily from Q1 to Q3, then slightly declined in Q4.”
Mark decorative images
- Within websites and web applications, if an image is purely decorative (adds no meaning), use empty alt text (alt="") so screen readers skip it.
- In Office 365 applications like Word, PowerPoint, and Outlook, you can mark an image as decorative so screen readers ignore it. To do this, select the image, open the Alt Text pane by right-clicking and choosing Edit Alt Text or using the Picture Format → Alt Text option in the ribbon. Then, check the box labeled “Mark as decorative”, which removes the need for alt text and signals assistive technologies to skip the image. Finally, run the Accessibility Checker under the Review tab to confirm compliance. This feature is available across Word, PowerPoint, Excel, and Outlook on both desktop and web versions.
Ensure accessible color and contrast
- Ensure graphics meet contrast ratio of at least 4.5:1 for text and essential visual elements.
- Avoid relying on color alone to convey meaning (e.g., use labels or patterns in charts).
- Several contrast analyzers:
Be aware of contextual placement
- Place descriptions near the graphic or in a caption for easy association.
- For interactive graphics, ensure keyboard navigation and screen reader compatibility.
- Try experiencing the resource without using a mouse, by advancing through the graphic using only the tab, shift-tab (for reverse order) and enter keys.
Testing
References