Images
Images can explain ideas, support learning, show relationships, communicate emotion, and make digital content easier to understand. When an image is not accessible, some people may miss information that other users receive visually.
Alternative text, often called alt text, gives people a text-based way to understand the image. Screen readers can announce this text, browsers can display it when an image does not load, and other technologies can use it as an alternative to the visual content.
Accessibility is part of the definition of done
Write and review alt text while creating the page. Content authors understand why an image was chosen and are usually best positioned to describe its purpose. A remediator may describe what is visible, but may not know the author’s intent.
Alternative text is a written substitute for an image. It communicates the image’s essential content, meaning, or function to someone who cannot see it.
Alt text is not a transcript of every visible detail. It is a purposeful description shaped by the image, the surrounding content, and the user’s task.
- It gives people who are blind or have low vision access to information presented visually.
- It helps people who use screen readers understand an image’s meaning or function.
- It preserves important information when images are blocked or fail to load.
- It supports an equivalent and more inclusive experience.
- It helps content meet WCAG 2.2 requirements for non-text content.
Ask this question
If someone could not see this image, what would they need to know to understand why it is here?
The same image can need different alt text in different situations. Before writing, identify the purpose of the image on the page. Describe the details that support that purpose and leave out details that do not.
One image, three contexts
Imagine a photograph of Northern Arizona University’s Old Main and Ashurst Auditorium.
Campus landmarks: “Northern Arizona University’s Old Main and Ashurst Auditorium stand in Flagstaff, Arizona.”
Architecture and history: “Northern Arizona University’s Old Main, built in 1894, features Romanesque architecture and locally sourced red sandstone.”
Graduation photo locations: “Northern Arizona University’s Old Main stands on the North Quad and provides a popular backdrop for graduation photographs.”
All three descriptions can be accurate. The best choice depends on what the page is trying to communicate.
- Describe the image accurately
- Explain what is shown and what the image does, if it has a function. Focus on the information a user needs in the current context.
- Good: “A student uses a screen reader to navigate an online course.”
- Less helpful: “A student uses a computer.”
- Explain what is shown and what the image does, if it has a function. Focus on the information a user needs in the current context.
- Be brief but meaningful
- Use as few words as possible while still communicating the image’s purpose. Simple images often need only one short sentence. Complex images usually need brief alt text plus a longer description.
- Good: “A professor demonstrates sign language during a classroom lecture.”
- Use as few words as possible while still communicating the image’s purpose. Simple images often need only one short sentence. Complex images usually need brief alt text plus a longer description.
- Use complete sentences
- Write alt text as a complete sentence, with capitalization and closing punctuation. This site uses complete sentences to promote clarity and consistency. A short functional label may be an exception when a full sentence would be unnatural, such as “Search.”
- Avoid repeating nearby text
- Do not repeat a caption, heading, link label, or nearby paragraph word for word. Alt text should add the visual information needed to understand the image. If nearby text already provides a complete equivalent, the image may be decorative in that context.
- Skip “image of” and “picture of”
- Screen readers generally announce that an element is an image, so these phrases are usually unnecessary. Mention the medium only when it contributes meaning, such as a painting, diagram, screenshot, or historic photograph.
- Write: “A golden retriever retrieves a tennis ball in a grassy park.”
- Avoid: “Image of a golden retriever retrieving a tennis ball in a grassy park.”
- Screen readers generally announce that an element is an image, so these phrases are usually unnecessary. Mention the medium only when it contributes meaning, such as a painting, diagram, screenshot, or historic photograph.
- Do not use file names as alt text
- File names such as “IMG_2048.jpg” or “student-campus-final.png” do not provide an equivalent description. Replace them with text that communicates the image’s purpose.
- Review names and identify details carefully
- Identify a person by name only when the person is known and their identity is relevant. Do not guess personal characteristics. Describe visible, relevant details without making assumptions about identity, emotion, disability, age, race, ethnicity, or gender.
Steps:
- Does the image add meaning or perform an action?
- If no, treat it as decorative. If yes, continue to Step 2.
- Can one concise sentence provide an equivalent?
- If yes, write concise alt text. If no, provide short alt text and a longer text description.
- Is the image a link, button, or control?
- Describe the action or destination instead of the image’s appearance.
Informative images
Informative images communicate information that is needed to understand the page. They require alt text that conveys their essential meaning in context.
Example: “A student reads a braille textbook while studying in the library.”
Functional images
Functional images are used within links, buttons, or controls. Describe the action, purpose, or destination. Do not focus on the icon’s shape unless the shape itself is important.
Search button: “Search.”
Download: “Download the accessible presentation checklist.”
Linked logo: “Visit the Northern Arizona University home page.”
Implementation note: If visible text already gives a button or link an accessible name, an accompanying icon may be decorative. Avoid giving users duplicate or conflicting names.
Decorative images
Decorative images add visual styling but do not contribute information or perform a function. Examples may include borders, flourishes, background patterns, or an image whose meaning is already fully provided nearby.
Use an empty alt attribute so assistive technology can ignore a decorative HTML image:
<img src=”decorative-line.png” alt=””>
Important: Do not omit the alt attribute. A missing alt attribute and an empty alt attribute do not mean the same thing.
Logos and branding images
Use the organization, program, or product name when a logo provides identification. Avoid describing colors, shapes, or typography unless those details matter in the current context.
Example: “Northern Arizona University Disability Resources.”
Mood-setting and supporting images
A mood-setting image may support the message without presenting critical facts. Decide whether it adds meaningful context. If it does, provide a concise description. If it is only visual decoration, mark it as decorative.
Example: “Two students talk together in a campus lounge.”
Images of people
Describe the activity, setting, and details that support the purpose of the page. Name people only when their identities are known and relevant. Do not guess identity characteristics or internal states.
Example: “Charlese Bedford smiles while standing in front of a sunlit rock wall.”
Images containing text
Important words shown in an image must also be available as text. Include the message in the alt text when it is short. For substantial text, provide the content as real text on the page and use concise alt text to identify the graphic’s purpose.
short message: “The graphic states, ‘Accessibility is everyone’s responsibility.'”
Better practice: Use real text instead of an image of text whenever possible. Real text can be resized, selected, translated, restyled, and read by assistive technology more reliably.
Screenshots
Describe the part of the interface that matters to the instruction. Do not list every visible control if the surrounding steps already provide those details.
Example: “The PowerPoint Alt Text pane appears on the right side of the window.”
Complex images
Charts, graphs, maps, diagrams, infographics, and organizational charts often contain too much information for a single alt text sentence. Provide short alt text that identifies the image and its main purpose, then provide an equivalent long description in nearby text or on a clearly linked page.
Short alt text: “A bar chart compares annual enrollment from 2020 through 2025.”
Long description: “Enrollment increased from 12,000 students in 2020 to 18,500 students in 2025. The largest annual increase occurred between 2023 and 2024.”
A useful long description should include
- The image’s purpose and overall message.
- The relationships, trends, or patterns needed to understand it.
- Important labels, values, dates, or categories.
- Any exceptions or details that affect interpretation.
- A data table when users need access to exact chart values.
Maps and spatial information
State the map’s purpose and provide the information someone needs to complete the same task without seeing the map. Depending on the purpose, this may include written directions, locations, routes, landmarks, distances, or an accessible list of map points.
Example: “A campus map shows the accessible route from the parking garage to the Disability Resources office.”
Diagrams and processes
Summarize the process or relationship in the alt text, then provide the full sequence or structure as nearby text. Preserve meaningful order, branches, inputs, outputs, and connections.
Example: “A five-step diagram shows the accessible procurement review process from request submission through final decision.”
Diagrams and processes
Summarize the process or relationship in the alt text, then provide the full sequence or structure as nearby text. Preserve meaningful order, branches, inputs, outputs, and connections.
Example: “A five-step diagram shows the accessible procurement review process from request submission through final decision.”
Captions, alt text, and long descriptions
These elements can work together, but they serve different purposes.
Who encounters it: People using assistive technology, or anyone when an image fails to load.
Primary purpose: Provides the image’s concise equivalent, meaning, or function.
Who encounters it: Everyone.
Primary purpose: Adds visible, context, identification, commentary, or a credit.
Who encounters it: Everyone when placed on the page, or users who follow a description link.
Primary purpose: Provides a complete equivalent for a complex image.
A caption does not automatically replace alt text. If a caption and nearby text already provide a complete equivalent, the image may be decorative. Make that decision based on the complete page context.
Using AI to draft alt text
AI can help create a starting description, but it may miss context, misidentify details, invent information, or overdescribe an image. The content author remains responsible for the final text.
- Determine why the image is included.
- Generate or write an initial description.
- Compare the description with the actual image.
- Remove irrelevant or speculative details.
- Edit the text so it fits the surrounding content.
- Confirm that it is accurate, concise, meaningful, and complete.
Keep the work human-centered
Never publish AI-generated alt text without reviewing it for accuracy, context, bias, and clarity.
- Leaving meaningful images without alt text.
- Using a file name, URL, or generic word such as “photo.”
- Describing everything visible instead of the image’s purpose.
- Repeating a caption or nearby paragraph word for word.
- Starting with “image of” or “picture of” when the medium is not important.
- Describing an icon’s appearance instead of its action.
- Giving decorative images unnecessary descriptions.
- Putting a long chart explanation inside the alt attribute instead of providing a structured long description.
- Relying on color alone within charts or diagrams.
- Publishing automatically generated alt text without human review.
Quick alt text checklist
- Does the image add information or perform a function?
- Does the alt text communicate the image’s purpose in this context?
- Is the description accurate?
- Is it concise but meaningful?
- Is it written as a complete sentence, except where a short functional label is more natural?
- Does it avoid repeating nearby text?
- Does it avoid unnecessary phrases such as “image of” or “picture of”?
- If the image is functional, does the accessible name describe the action or destination?
- If the image is decorative, is it implemented so assistive technology ignores it?
- If the image is complex, is a complete long description available?
- If the image uses color, is the information also communicated another way?
- If AI helped write the alt text, did a person verify and edit it?
Thoughtful image choices and well-written alternatives make content clearer, more inclusive, and more useful. Include accessibility from the beginning of the content process and review image accessibility before publishing.
Good alt text provides an equivalent experience
Do not try to describe every pixel. Identify why the image is present, communicate the information or function a user needs, and make the description fit the surrounding context.