What is alt text in UX design?
Alt text, short for alternative text, is the text content of the HTML alt attribute on an img element. It serves as a text equivalent for the image when the image cannot be perceived visually. Screen readers announce alt text to users who are blind or have low vision. Search engines index alt text to understand image content. Alt text is also displayed when an image fails to load due to network issues or broken URLs. Providing appropriate alt text is required by WCAG 1.1.1 for all non-decorative images and is one of the most fundamental accessibility requirements in web design.
How to write effective alt text?
Alt text should convey the same information or function that the image provides to sighted users, in the context in which the image appears. A photo of a smiling team in a company About page might have alt text of "The SubUX team working together in a bright open office." The same photo used as a decorative background behind a headline would be marked as decorative with an empty alt attribute, alt="", so the screen reader skips it rather than announcing a meaningless description. An icon that functions as a button needs alt text that describes the button's function, not the icon's appearance: a magnifying glass icon that opens search should have alt text of "Search" not "Magnifying glass icon."
What are the different types of images and their alt text needs?
Informative images that convey information need descriptive alt text. Functional images like icons used as buttons need alt text describing the function. Decorative images that add no information should have empty alt attributes so screen readers skip them. Complex images like charts and graphs need alt text that conveys the key data point or insight, with a longer description available if needed. Text images where text is embedded in an image need alt text that exactly reproduces the text content. Understanding which type of image each case represents is the most important skill in writing effective alt text.