HTML5用图片替代文本的方法及技巧

本文深入解析HTML5中图片替代文本（alt属性）的正确使用规范，强调alt属性不可省略、空字符串alt=""仅适用于纯装饰性图片，而信息性图片必须提供简洁准确、语义明确的替代文本；特别指出图片作为链接时alt应描述目的而非外观，SVG图标需根据语义决定是否使用aria-label而非alt，并澄清longdesc已废弃、复杂图片应结合aria-describedby提供结构化长描述；同时警示将文字嵌入图片却忽略alt的常见错误，呼吁开发者以可访问性为前提，优先采用HTML+CSS实现文本内容，确保所有用户——尤其是视障人士——能平等获取信息。

img 标签必须用 alt 属性写替代文本

HTML5 不允许省略 alt 属性，否则会触发可访问性警告，屏幕阅读器也无法读出图片含义。空字符串 alt="" 是合法的，但仅适用于纯装饰性图片；只要图片承载信息（哪怕只是图标、按钮、数据图），就必须写有意义的文本。

• alt 值应简洁准确，通常不超过 125 个字符（多数屏幕阅读器会截断）
• 避免冗余表述，如“图片：”“图标：”，屏幕阅读器已自动播报这是图片
• 如果图片是链接，alt 应说明链接目的，而非描述图片本身（例如：）

什么时候该用 alt="" 而不是删掉属性

装饰性图片（比如背景分隔线、纯样式圆点、重复边框图）不该向辅助技术暴露。此时必须显式写 alt=""，而不是省略 alt——省略会导致浏览器/校验工具报错，且部分旧屏幕阅读器可能误读文件名或尝试朗读。

• CSS 背景图不需要 alt，因为它本就不在 HTML 结构中
• 内联 SVG 若含语义内容（如流程图中的文字、标签），应使用