How to write SVG alternative text? Distinguish between content images and decorations
Informative SVG should provide alternative text that expresses the purpose, and is purely decorative to avoid repetition. The text description focuses on the information conveyed by the image, rather than mechanically writing a string of colors and path shapes.
Determine the problem and applicable conditions first
The logo link needs to indicate the destination, and the status icon needs to express the status; when the same button already has clear text, the small icon next to it usually does not need to be read again. Inline SVG and img are marked differently for accessibility.
Process and check in order
- Determine whether the image serves content, operation, or purely decorative purposes.
- Write concise semantic descriptions for information pictures, and use empty spaces to replace text for decorative pictures.
- Check the keyboard and screen reading experience to avoid duplicate or missing button names.
Check the finished result
Don’t stuff keywords into alt text. Complex charts may require nearby text explanations or data tables, and a single sentence of alt text cannot replace all the information; SVG file names cannot replace accessible names.
SVG format basis and reference materials
SVG can contain both vector shapes, images, and text. Therefore, a file name ending in .svg does not alone prove that the original image has been converted to an editable path.W3C SVG 2 Specification: SVG Graphics Objectdescribes these object types.
The above information is used to describe the file format. The upload restrictions, membership requirements, results saving and editing capabilities of this site are subject to the page description and actual functions.