Decide what the image does in context
A decorative image adds visual style but no information needed to understand or use the page. A flourish beside a heading, a background pattern, or a photograph that merely sets a mood may be decorative. The decision depends on the surrounding content, not the image file itself. The same photograph might be decorative on a landing page and essential in an article explaining what it shows.
Ask what a reader would miss if the image disappeared. If the answer is nothing, it probably needs no announcement. If it identifies a product, explains a process, presents data, or helps someone choose an action, provide an accessible text equivalent instead. Do not hide an image just to avoid writing a difficult description; consider whether the information belongs in nearby text as well as in the image.
Use empty alternative text for decorative HTML images
For a decorative HTML img element, set its alt attribute to an empty string: alt="". This tells assistive technology that the image does not need to be announced. An empty alt attribute is different from omitting alt altogether. Without alt, a screen reader may announce a file name or other unhelpful information, depending on the browser and screen reader.
Imagine a recipe page with a small leaf illustration between the title and an introduction. If the illustration contributes no recipe information, give that img element alt="". Keep the title and introduction as ordinary text. A CSS background image is another option for purely visual decoration because it does not create an image that needs alternative text. Do not put instructions, labels, or other necessary information only in a background image.
Keep functional images and controls understandable
An image stops being merely decorative when it is the only content of a link or button. A magnifying-glass image used as the sole content of a search button needs an accessible name that conveys the action, such as “Search.” Giving that image empty alt without naming the button would leave the control unclear. The accessible name can come from suitable text or from an appropriate label on the control.
An icon beside visible button text is different. If a button already says “Search,” its magnifying-glass icon usually adds no new meaning and can be hidden from assistive technology. For an HTML img icon, use alt="". For an inline SVG used only as decoration, aria-hidden="true" can keep it out of the accessibility tree. Apply aria-hidden to the icon, not to the button or a container holding its label: content inside an aria-hidden container is hidden from assistive technology too.
The same test applies to images inside links, cards, and form fields. If nearby text already provides the image’s full purpose, repeating it may create noise. If the image distinguishes one destination or choice from another, it needs an accessible equivalent. Check the complete component rather than assigning alt text to each image in isolation.
Check the result in a working page
You can test these decisions in a current desktop browser with its developer tools and, if available, a screen reader. Create a small page with a heading, a decorative img with alt="", a text-labeled button with a decorative icon, and a link whose image is its only content. Give the link image alternative text that describes its destination or purpose. Inspect the page’s accessibility tree: the decorative images should not appear as separately named content, while the button and link should have understandable names.
Then navigate through the page using the keyboard and listen to it with a screen reader if you can. Check that controls remain reachable and that no essential information vanishes when images are unavailable. Accessibility-tree inspection helps reveal names and hidden content, but it does not replace reading the page in context. If hiding an image makes an instruction, distinction, or action hard to understand, revisit the content rather than relying on a different hiding technique.
