AVÀÇ

Provide alternative text for images

Alternative text (often called “alt text”) is a short textual description that communicates the purpose or meaning of an image. People who use screen readers, have low vision, have certain cognitive disabilities, or turn off images rely on alt text to understand content that is presented visually.

Images such as photos, icons, charts, graphs, diagrams, and buttons must have appropriate text alternatives so that the information and function they convey are available to everyone. The alt attribute on the <img> and <input type="image"> tags provides this alternative text for images on web pages.

Quick checklist

• Every meaningful image has alt text that describes its purpose or meaning.
• Purely decorative images have a blank alt attribute (alt="") so screen readers skip them.
• Images that act as links or buttons describe the action (for example, “Submit application”) rather than the visual appearance.
• Complex charts or graphs include a brief alt text and a nearby text explanation or data table.

Guidelines for writing alt text

The use of alternative text should be guided by the following considerations:

1. Informative images: If the image is required for understanding the page’s content, write alt text that conveys the same information or function as the image. Focus on what the image is communicating, not every visual detail.
2. Decorative images: If the image is purely decorative and does not add meaningful information (for example, borders, background images, or simple visual flourishes), use a blank alt attribute (alt=""). This tells screen readers to ignore the image.
3. Functional images (links and buttons): If an image is used as a button or inside a link, the alternative text should describe the purpose of the control, such as “Search,” “Download syllabus (PDF),” or “Go to AVÀÇ home page.”
4. Complex images (charts, graphs, diagrams): For images that contain a lot of data or complex relationships, provide a short alt text that identifies the image (for example, “Bar chart showing enrollment by college”) and include a more detailed explanation or data table in nearby text.
5. Images of text: Avoid using images of text when you can use real HTML text instead. If an image of text is necessary (for example, a logo), the alt text should include the text shown in the image and its purpose.
6. Keep alt text concise and relevant: In most cases, 1–2 short sentences are enough. Do not start with “image of” or “photo of” unless that information is important, and do not repeat text that is already in a nearby caption or heading.

Examples

• Informative image – A photo of students studying together on campus used on a page about student support services.
  Good alt text: “Students studying together at a table in the AVÀÇ library.”
• Decorative image – A decorative divider line between sections.
  Alt attribute: alt=""
• Functional image – A magnifying glass icon that submits a search form.
  Good alt text: “Search”
• Chart or graph – A bar chart showing enrollment growth over five years.
  Good alt text: “Bar chart showing student enrollment increasing each year from 2020 to 2025; see table below for exact numbers.”

Related WCAG 2.1 criteria

• 1.1.1 Non-text Content (Level A): Provide text alternatives for any non-text content so it can be changed into other forms people need, such as large print, braille, speech, or symbols.
• 1.4.5 Images of Text (Level AA): Avoid images of text when the same visual presentation can be achieved using text alone.

Before you publish

• Check that every meaningful image on the page has appropriate alt text.
• Confirm that purely decorative images use alt="" so screen readers skip them.
• Verify that images used as links or buttons describe the action, not the visual.
• Provide additional explanation for complex charts, graphs, or diagrams in surrounding text.

Related resources