Alt text is a written description of an image that is read by screen readers, providing the same information a sighted user receives from the image under WCAG 2.1 accessibility standards.
Alt text is the most universally known accessibility requirement and the most universally misunderstood one.
Every government content creator has heard that images need alt text. Most of them are adding it. The problem is that most of what is being added is wrong — not technically wrong in a way an automated scanner would catch, but wrong in a way that provides zero useful information to a screen reader user trying to understand what the image communicates.
"Image." "Photo." "Chart." "Map.jpg." "decorative-banner-01." These are real alt text examples pulled from real government websites. They are all in the alt attribute where they belong. They all satisfy the automated scan requirement. And they all tell a blind resident absolutely nothing about what the image contains.
This guide fixes that. It covers what alt text actually is, the decision framework for when and how to write it, and detailed before-and-after examples for every image type government content teams regularly publish: photographs, charts and graphs, GIS maps, infographics, data tables displayed as images, logos, icons, and decorative images.
By the end of this guide, every person on your content team will be able to write alt text that actually works.
What Alt Text Does for Accessibility and Screen Readers
Before getting into the how-to, it helps to understand what a screen reader user actually experiences when they encounter an image.
When a screen reader navigates a web page and encounters an image element, it reads the alt attribute. That is the entire image experience for a blind user. There is no visual context, no caption placement, no surrounding design. Just the text in the alt attribute, read aloud.
If the alt attribute is missing: NVDA announces "graphic" followed by the image filename — "graphic permit-form-scan-2019-FINAL.jpg." Useless.
If the alt attribute contains "Image": the screen reader announces "image image." Also useless.
If the alt attribute contains a meaningful description: the screen reader announces that description, and the user receives the same information a sighted user gets from the image.
That is the entire mechanism. Alt text is the image for a user who cannot see the image. It needs to convey the same information the image conveys — not describe what the image looks like, but communicate what it means.
That distinction — between describing an image and conveying its meaning — is the core principle that separates useful alt text from useless alt text.
Alt Text Decision Framework for Government Content Teams
Before writing alt text for any image, answer three questions in sequence.
Question 1: Is this image decorative?
A decorative image is one that adds visual interest but conveys no information. A background texture. A banner image of a generic cityscape with no specific informational content. A decorative divider line presented as an image. Stock photography used to make a page look less empty.
If the image is purely decorative: use an empty alt attribute — alt="" — so the screen reader skips it entirely. Do not write "decorative image." Do not write "background texture." Leave it empty. An empty alt attribute is the correct technical implementation for decorative images.
Question 2: Is this image functional?
A functional image is one that performs an action when clicked — a button, a link, an icon that opens a menu. For functional images, the alt text describes the function, not the image.
A magnifying glass icon that opens a search field: alt="Search" An envelope icon that opens an email client: alt="Send email" A logo image linked to the homepage: alt="Return to City of Springfield homepage"
Question 3: Is this image informational?
An informational image conveys content — data, spatial relationships, a visual concept, a specific scene with meaningful context. This is where most alt text work happens in government content, and where most alt text fails.
For informational images: write alt text that conveys what the image communicates, not what it looks like.
TLDR Alt Text Decision Framework:
- Decorative image → alt="" (skip)
- Functional image → describe action
- Informational image → describe meaning
Part 1: How to Write Alt Text for Photographs
Photographs are the most common image type on government websites and the one where alt text requirements are most often misunderstood.
The rule: the alt text for a photograph should convey the information that photograph is communicating in context. The same photograph may need different alt text depending on where it appears and what it is communicating.
Example 1: Event photograph
Context: A news article about the city council approving a new parks master plan. The article includes a photograph of four council members seated at the council dais, smiling.
Bad alt text: "Photo" Bad alt text: "City council members" Bad alt text: "Four people sitting at a table"
The bad versions describe the image at a surface level. None of them convey what this photograph communicates in context — the identity of the people and the occasion.
Good alt text: "Council members Jennifer Walsh, Roberto Martinez, David Kim, and Sarah Torres at the March 15, 2026 council meeting where the Parks Master Plan was approved unanimously."
This version tells the screen reader user who is in the photograph and what occasion it depicts — the same information a sighted reader would take from the image.
Example 2: Construction or infrastructure photograph
Context: A public works update page showing road construction on Main Street with a temporary detour in place.
Bad alt text: "Construction photo" Bad alt text: "Road work on Main Street" Bad alt text: "Image of construction equipment"
Good alt text: "Main Street between 3rd and 5th Avenue closed for utility work. Orange signs direct westbound traffic to detour north on 2nd Avenue, east on Oak Street, and south on 6th Avenue."
The good version conveys the operational information — the closure and the detour route — that a resident needs to understand the image's meaning.
Example 3: Facility photograph used as a link
Context: A parks and recreation page with a photograph of the city aquatic center that links to the aquatic center's schedule page.
Bad alt text: "Aquatic center" Bad alt text: "Indoor swimming pool" Bad alt text: "Aquatic Center.jpg"
When an image is used as a link, the alt text describes the destination, not the image.
Good alt text: "Springfield Aquatic Center — view schedules and programs"
Example 4: Decorative stock photograph
Context: A banner image on the city homepage showing a generic cityscape of Springfield with no specific informational content. It is purely decorative.
Bad alt text: "City of Springfield" Bad alt text: "Springfield cityscape" Bad alt text: "banner-image-homepage.jpg"
Correct implementation: alt="" (empty alt attribute — screen reader skips this image entirely)
Part 2: How to Write Alt Text for Charts and Data Visualizations
Charts and graphs are where alt text most frequently fails in government content — and where the failure has the most consequence. A budget chart, a population trend graph, or a crime statistics visualization is almost always the primary means of conveying important data. When the alt text says "bar chart" and nothing more, a blind resident receives zero information about the data the chart contains.
The principle: alt text for a chart should convey the data or the key finding the chart communicates. If the data is complex, supplement with a data table.
Example 1: Bar chart
Context: An annual report page showing a bar chart of permit application volume by quarter over the past two years.
Bad alt text: "Bar chart" Bad alt text: "Chart showing permit data" Bad alt text: "Permit application volume chart 2024-2025"
None of these tell the reader what the data shows.
Good alt text: "Bar chart showing quarterly permit application volume for 2024 and 2025. Q1 2024: 312. Q2 2024: 487. Q3 2024: 521. Q4 2024: 398. Q1 2025: 289. Q2 2025: 534. Q3 2025: 612. Q4 2025: 401. Volume peaked in Q3 each year with a dip in Q4 and Q1."
For a chart with many data points where reading every value in alt text would be unwieldy, provide the key finding in the alt text and supplement with a data table:
Good alt text (abbreviated with data table): "Bar chart showing quarterly permit application volume 2024 to 2025. Volume peaked in Q3 each year, reaching 612 applications in Q3 2025 — the highest quarter in the two-year period. Full data available in the table below."
Then include an accessible HTML table with the complete data immediately following the image.
Example 2: Line graph
Context: A public health dashboard page showing a line graph of weekly COVID case counts over a 12-week period.
Bad alt text: "Line graph" Bad alt text: "COVID cases graph" Bad alt text: "Weekly case count chart"
Good alt text: "Line graph showing weekly COVID-19 case counts for Springfield County over 12 weeks ending March 15, 2026. Cases peaked at 847 in week 4, declined to 312 by week 8, then rose to 524 by week 12. The trend line shows overall decline with a late increase. Full data in the table below."
Example 3: Pie chart
Context: A budget presentation page showing a pie chart of the general fund budget allocation by department.
Bad alt text: "Pie chart showing budget" Bad alt text: "2026 General Fund Budget"
Good alt text: "Pie chart showing 2026 General Fund budget allocation by department. Public Safety: 42%. Public Works: 18%. Parks and Recreation: 12%. Administration: 11%. Community Development: 9%. Library Services: 8%."
For pie charts with more than six segments, include the data in a table alongside the chart.
Example 4: Dashboard metric with a trend indicator
Context: A performance dashboard showing a metric tile that reads "Average Permit Processing Time: 8.3 days" with a green downward arrow indicating improvement.
Bad alt text: "Metric" Bad alt text: "8.3 days" Bad alt text: "Performance indicator"
The alt text must capture both the value and the trend — the green arrow conveys the trend visually, but that information needs to be in the alt text.
Good alt text: "Average permit processing time: 8.3 days. Improved — down from 11.2 days in the prior period."
Part 3: How to Write Alt Text for Maps and GIS Images
Maps are the most challenging image type for alt text in government environments because they often contain complex spatial information that cannot be fully conveyed in a brief text description. The strategy here requires both good alt text and accessible alternative content.
The principle: alt text for a map should convey the key geographic information the map communicates. For complex maps, supplement with a structured text alternative that provides the equivalent information.
Example 1: Simple location map
Context: A contact page showing a small map with a pin marking the location of city hall.
Bad alt text: "Map" Bad alt text: "Location map" Bad alt text: "City hall location"
Good alt text: "Map showing Springfield City Hall located at 100 Main Street at the intersection of Main Street and 2nd Avenue in downtown Springfield."
Example 2: Construction detour map
Context: A public works page showing a map of a road closure and detour route.
Bad alt text: "Detour map" Bad alt text: "Road closure map" Bad alt text: "Construction area map"
Good alt text: "Map showing Main Street closed between 3rd Avenue and 6th Avenue. Detour route: travel north on 3rd Avenue, east on Oak Street, south on 6th Avenue to rejoin Main Street. Closure in effect March 1 through April 30, 2026."
Example 3: Rezoning or planning map
Context: A planning commission agenda packet includes a map showing a proposed rezoning area in the downtown core.
Bad alt text: "Rezoning map" Bad alt text: "Proposed zoning change" Bad alt text: "Planning map for Case 2026-047"
Good alt text: "Map showing proposed commercial rezoning area for Planning Case 2026-047. The approximately 4.2-acre area is bounded by Main Street to the north, 5th Avenue to the east, Commerce Street to the south, and Highway 34 Frontage Road to the west. Current zoning: Mixed Residential. Proposed zoning: General Commercial."
For complex planning maps with multiple zones, parcels, or data layers, provide a text alternative that lists the key information the map conveys — affected addresses, acreage, boundaries, current and proposed designations.
Example 4: Interactive map converted to a static image
Context: A wildlife agency page shows a screenshot of an interactive hunting unit map saved as a static image because the interactive version was not accessible.
When an interactive map is replaced with a static image for accessibility purposes, the static image alt text must convey the key information the interactive map was designed to provide — and additional text content on the page should provide the structured equivalent.
Good alt text: "Static map showing 23 hunting units in the northern management region. Unit boundaries and numbers are labeled. A complete list of hunting units with boundary descriptions is available in the table below."
The table below then lists each unit number, its general location, and key boundary landmarks.
Part 4: How to Write Alt Text for Infographics
Infographics are among the most commonly published and most inaccessible image types in government content. They are designed to communicate a lot of information in a visually engaging way — which means they contain a lot of information that needs to be in the alt text or an adjacent text alternative.
The principle: infographics almost always require a long text description or an adjacent text alternative rather than a brief alt text alone. The alt text points to the description.
Example 1: Process infographic
Context: A permits page includes an infographic showing the six steps in the permit application process with icons and short text for each step.
Bad alt text: "Permit process infographic" Bad alt text: "How to apply for a permit" Bad alt text: "6-step process graphic"
Good alt text (pointing to description): "Infographic showing the six-step permit application process. Full process description follows."
Followed immediately by the steps as accessible text:
Step 1: Pre-Application. Contact the Planning Department to determine which permits are required for your project. Step 2: Submit Application. Complete the permit application form and submit with required documents and fees. Step 3: Application Review. Staff reviews your application for completeness within 5 business days. Step 4: Plan Review. Plans are reviewed by Building, Fire, and Engineering divisions. Review time varies by project complexity. Step 5: Permit Issuance. Once approved, your permit is issued. Download from the online portal or pick up at City Hall. Step 6: Inspections. Schedule required inspections through the online portal as work progresses.
Example 2: Statistical infographic
Context: A city annual report includes an infographic showing three key statistics: population growth, number of businesses, and park acreage added in the past year.
Bad alt text: "Annual report infographic" Bad alt text: "City statistics 2025"
Good alt text: "Infographic showing three 2025 city statistics. Population: 87,450 residents, up 3.2% from 2024. Businesses: 4,218 active business licenses, up 6.7% from 2024. Parks: 14.3 acres of new park space added, bringing total parkland to 312 acres."
For this type of simple statistics infographic, the full data can typically fit in the alt text itself without needing a separate text description.
Example 3: Timeline infographic
Context: A project page includes a horizontal timeline infographic showing six milestones in a construction project from groundbreaking to completion.
Bad alt text: "Project timeline" Bad alt text: "Construction timeline graphic"
Good alt text (pointing to description): "Timeline infographic showing six project milestones for the Main Street Reconstruction Project. Full timeline follows."
Followed by an accessible list:
- January 2025: Project kickoff and pre-construction survey
- March 2025: Utility relocation begins
- June 2025: Road reconstruction begins, Main Street closes to through traffic
- September 2025: Road reconstruction complete, Main Street reopens
- October 2025: Streetscaping and landscaping installation
- December 2025: Project completion and final inspection
Part 5: How to Write Alt Text for Logos, Icons, and Interface Images
Logos and icons require brief, functional alt text. The principle here is simple: describe the function, not the appearance.
Example 1: Agency logo — not linked
When a logo appears on a page as a visual identifier but is not a link, it is typically decorative in function — the agency name is already present in the page heading.
Bad alt text: "City of Springfield logo" Bad alt text: "Logo" Bad alt text: "Springfield seal"
If the page already contains "City of Springfield" as text: alt="" (empty — the logo is decorative when the text equivalent is present)
If the logo is the only identification of the agency on the page: alt="City of Springfield"
Example 2: Agency logo — linked to homepage
When a logo is a link, the alt text describes the destination.
Bad alt text: "Logo" Bad alt text: "City of Springfield" Bad alt text: "Home"
Good alt text: "City of Springfield — return to homepage"
Example 3: Social media icons
Social media icons used as links should describe the platform and the destination.
Bad alt text: "Facebook icon" Bad alt text: "Social media" Bad alt text: "f"
Good alt text: "City of Springfield on Facebook" (for the Facebook link) Good alt text: "City of Springfield on Twitter" (for the Twitter/X link) Good alt text: "City of Springfield YouTube channel" (for the YouTube link)
Example 4: Status icons in tables or dashboards
A performance dashboard uses green checkmarks, yellow warning triangles, and red X marks to indicate status.
Bad alt text: "Green checkmark" Bad alt text: "Check" Bad alt text: (no alt text — relies on color alone)
When icons communicate status, the alt text must convey the status meaning — not the visual appearance of the icon.
Good alt text for green checkmark: "Meets target" Good alt text for yellow triangle: "At risk" Good alt text for red X: "Does not meet target"
Part 6: How to Write Alt Text for Data Tables Displayed as Images
Sometimes data tables are captured as screenshots or designed as images rather than coded as HTML tables. This is an accessibility failure — the structured data relationships that make a table accessible cannot be conveyed through alt text alone for complex tables.
For simple data tables displayed as images: provide the full data in the alt text if there are fewer than about 20 data points.
For complex data tables displayed as images: provide a brief alt text describing the table's subject and indicate that the full data is available below, then include an accessible HTML table with the complete data.
Example: Fee schedule displayed as an image
Context: A permits page includes a screenshot of a fee schedule table with 15 rows and 3 columns showing permit type, base fee, and processing fee.
Bad alt text: "Fee schedule" Bad alt text: "Table of permit fees" Bad alt text: "2026 permit fee table image"
Good alt text: "Image of 2026 permit fee schedule. Full fee schedule in the accessible table below."
Followed by a properly structured HTML table with header row designations covering all 15 permit types and their fees.
The Alt Text Quick Reference Card
Keep this on your desk. Use it for every image decision.
Is the image decorative? No informational value, purely visual. → alt="" (empty, screen reader skips)
Is the image a link or button? Image performs an action when clicked. → Describe the destination or action, not the image
Is the image a logo — not linked? Agency name is already in page text. → alt="" (decorative when text equivalent exists)
Is the image a logo — linked? Logo links to homepage or another destination. → Describe the destination: "Agency Name — return to homepage"
Is the image a photograph? Conveys a specific scene, event, or person. → Who, what, where, when — convey the meaning in context
Is the image a chart or graph? Displays data visually. → State the key finding and/or all data points. Add a data table for complex charts.
Is the image a map? Shows geographic information. → Describe boundaries, locations, or routes the map communicates. Add text alternative for complex maps.
Is the image an infographic? Combines text and visuals to explain a process or concept. → Alt text points to full text description. Provide description as accessible text immediately below.
Is the image a status icon? Communicates pass/fail, warning, or status. → Describe the status meaning, not the icon's appearance.
The Most Common Alt Text Mistakes in Government Content
Writing what the image looks like instead of what it means. "Bar graph with blue and orange bars" tells a screen reader user nothing about the data. "Permit applications increased 23% between 2024 and 2025" tells them what they need to know.
Using the filename as alt text. "permit-map-final-v2.jpg" is not alt text. It is a filename. CMS systems sometimes auto-populate alt text with the filename when an image is uploaded. Always replace it.
Writing "image of" or "photo of" as a prefix. Screen readers already announce that an element is an image. "Image of a map" wastes the first words of the description on information the user already has.
Leaving alt text empty on informational images. Empty alt text tells the screen reader to skip the image. Correct for decorative images. A failure for informational images. The decision needs to be made deliberately — every informational image needs alt text.
Writing alt text that is too long. Alt text should be concise — typically under 150 characters for simple images. For complex images that need longer descriptions, use a brief alt text that points to a full description provided as adjacent text content.
Using the same alt text for multiple different images. Each image conveys different information in different contexts. Alt text should reflect what each specific image communicates, not be copied from another image.
Forgetting images inside PDFs and Word documents. Alt text requirements apply to images in documents, not just web pages. Every informational image in a document that will be published publicly needs alt text set in the source application before export.
Making Alt Text a Standard Practice
Individual image remediation corrects past failures. What prevents future failures is making alt text a normal part of every content creation workflow.
The practical implementation: add alt text to your CMS publishing checklist. When your content team creates a page or uploads an image, the alt text field should be a required step — not an afterthought after the image is already live.
For your document creation workflow: alt text on images in Word, Google Docs, and InDesign should be added at the time the image is inserted, not during a remediation pass before publication. The Word accessibility checker will flag images without alt text — run it before every PDF export.
For images uploaded directly to the media library: many CMS systems allow alt text to be set when an image is uploaded to the library, so it applies every time that image is used. Ensure your team adds alt text at the upload step.
The goal is a content environment where alt text is not a special accessibility task — it is just part of how content gets created. That standard, applied consistently across your team, eliminates the majority of image accessibility failures at the point of creation rather than requiring remediation after the fact.
Related:
Good Faith Compliance Explained
FAQ: Alt Text for Government Websites
What is alt text and why do government websites need it?
Alt text is a written description attached to an image element in HTML code — the text in the alt attribute. Screen reader software reads this text aloud when a user encounters an image, providing the same information a sighted user gets from the image visually. WCAG 2.1 Success Criterion 1.1.1 requires that all non-text content, including images, have a text alternative that serves an equivalent purpose. For government websites, this means every informational image — photographs, charts, maps, infographics, and icons — must have alt text that conveys what the image communicates.
What is the difference between decorative and informational images?
A decorative image adds visual interest but conveys no information — a background texture, generic stock photography, a decorative divider. Decorative images should use an empty alt attribute (alt="") so screen readers skip them. An informational image conveys content that is not available through surrounding text — a chart showing data, a map showing geographic information, a photograph showing a specific person or event. Informational images need alt text that conveys what they communicate. The distinction matters because the correct implementation is opposite for each type: empty for decorative, descriptive for informational.
How long should alt text be?
Alt text should be as concise as possible while conveying the necessary information. For simple images, under 150 characters is typical. For complex images like detailed charts or multi-zone maps, brief alt text that points to a full text description provided nearby is preferable to very long alt text. The rule is: use the minimum amount of text necessary to convey what the image communicates in context. If writing the alt text is taking more than a sentence or two, consider whether a separate text description or data table is the better approach.
Do images inside PDFs and Word documents need alt text?
Yes. WCAG 2.1 accessibility requirements apply to all publicly accessible digital content including documents, not just web pages. Every informational image in a document that will be published publicly needs alt text set in the source application. In Microsoft Word, right-click an image and select Edit Alt Text. In Adobe InDesign, use Object > Object Export Options > Alt Text. In Adobe Acrobat, alt text can be added or edited through the Tags panel after the document is exported. Documents published without alt text on informational images are inaccessible to screen reader users regardless of how well-structured the rest of the document is.
What should alt text say for a chart or graph?
Alt text for a chart should convey the data or the key finding the chart communicates — not describe its visual appearance. "Bar chart with blue bars" tells a screen reader user nothing useful. "Permit application volume increased from 1,200 in 2023 to 1,847 in 2025, a 54% increase over two years" conveys the information. For charts with many data points, state the key finding in alt text and provide the complete data in an accessible HTML table immediately below the image. The alt text should note that the table is available: "Chart showing permit volume trends 2020 to 2025. Key finding: volume increased 54% over the period. Full data in the table below."
Do logos need alt text?
It depends on context. A logo that is used as a link needs alt text describing the destination — "City of Springfield, return to homepage" — because functional images describe their function. A logo that appears on a page purely as a visual identifier, where the agency name is already present as text, can use empty alt text (alt="") because it is decorative when the text equivalent is already there. A logo that is the only identification of the agency on a given page needs alt text with the agency name because it is providing information not otherwise available.