Alt text
The short written description of an image that a screen reader reads aloud, and that shows up when the image won't load.
See it
What it is
Alt text is the short written stand-in for an image, carried in the img element's 'alt' attribute. A screen reader announces it in place of the picture, and browsers show it when the image fails to load. It is the single highest-leverage accessibility fix on most sites, because images carry meaning that markup alone can't recover.
Write what the image is doing, not what it literally contains. A photo of a person on a pricing page might be 'Team lead reviewing invoices' in an article and empty on a decorative hero. Charts and screenshots need the takeaway ('Revenue tripled between 2023 and 2025'), not a pixel inventory. Aim for one sentence; if you need a paragraph, put it in visible text near the image and keep the alt short.
Two classic traps. First, purely decorative images need alt='' (an empty string, not a missing attribute), which tells screen readers to skip them; omitting 'alt' entirely makes some readers announce the filename instead. Second, drop the filler: 'image of', 'photo of', and 'graphic' are already implied by the role, and keyword-stuffed alt text for SEO just makes the page worse to listen to.
Ask AI for it
Audit every image in this markup and write proper alt text. For each img: if it carries meaning, write concise alt text describing its purpose in context (for charts, state the takeaway; for screenshots, state what is being shown); if it is purely decorative, set alt='' so screen readers skip it. Never omit the alt attribute and never start with 'image of' or 'photo of'. Let the image's job in context set the length rather than any fixed character limit: most alt text lands in a sentence, but do not truncate a description that genuinely needs more. When an image needs a paragraph to explain, put that explanation in visible text beside the image and keep the alt short. Show the before and after for each image.