alt属性是屏幕阅读器用户理解图像内容的核心通道，必须根据10种典型场景（如装饰性图片、图标、照片、图表等）按WCAG 2.1 AA标准精准编写，确保语义清晰、简洁自然且无障碍合规。
alt 属性不是“可填可不填”的装饰项，而是屏幕阅读器用户理解图像内容的核心通道。写得好，能准确传递信息；写得差，可能造成误解甚至完全屏蔽关键内容。以下是10种典型场景下的 alt 写法模板，兼顾语义清晰、简洁自然和无障碍合规（符合 WCAG 2.1 AA 级要求）。
1. 纯装饰性图片（无信息价值）
如分隔线、背景花纹、纯图标（已有相邻文字说明）等。应设为空字符串，明确告知辅助技术“跳过”。
✅ 正确写法：alt=""
❌ 避免：alt="装饰线条" 或 alt="spacer"（会打断阅读流）
2. 图标+邻近文字已完整说明功能
例如按钮旁有“搜索”文字，左侧配放大镜图标。图标是视觉强化，非独立信息源。
✅ 正确写法：alt=""
? 提示：确保图标与文字在 DOM 中逻辑相邻（如同个按钮内），否则需保留 alt。
3. 照片类图像（含人物、场景、事件）
描述画面中**谁、在哪、做什么、有何显著特征**，控制在125字符内，避免“图片显示…”等冗余前缀。
✅ 示例：alt="两位穿蓝色工装的维修人员正在城市街道检修地下通信井盖，其中一人手持检测仪"
❌ 避免：alt="工人照片"（太模糊）或 alt="张三和李四在修井盖，摄于2024年5月"（含无关时间细节）
4. 数据图表（柱状图/折线图）
alt 不替代完整数据表，但需概括核心趋势与关键对比。
✅ 正确写法：alt="2023年各季度用户投诉量：Q1为127起，Q2升至189起（+48%），Q3回落至142起，Q4最低仅96起"
? 建议：复杂图表必须提供下方或链接到完整数据表（用 aria-describedby 关联）。
5. 带文字的图片（如宣传海报、信息图）
alt 必须**如实转录所有有效文字内容**（标题、要点、数据、标语），忽略纯装饰字体效果。
✅ 示例：alt="‘节能改造补贴计划’主标题；副标：最高补贴5000元；三点说明：①覆盖老旧小区 ②需经住建部门审核 ③申报截止2024年12月31日"
❌ 避免：alt="绿色海报，有字"
6. 链接中的图像（无其他文本）
alt 必须说明**点击后去哪、做什么**，而非描述图像本身。
✅ 示例（跳转到PDF手册）：alt="下载《无障碍网站开发指南》PDF（2.4MB）"
✅ 示例（站内导航）：alt="返回网站首页"
❌ 避免：alt="logo图标"（用户不知道点它干嘛）
7. 复杂图像（流程图、架构图、手绘示意图）
alt 只做简明结构概述，**关键细节移至长描述（longdesc）或邻近段落**。
✅ alt 写法：alt="用户注册流程：4步环形结构，依次为填写信息→邮箱验证→设置密码→完成激活"
✅ 同时提供：下方紧接一段文字详细说明每步校验规则与异常分支
8. 数学公式或化学结构式
用清晰、标准的文本化表达，优先采用 LaTeX 语义可读格式（若环境支持），否则用口语化线性描述。
✅ 示例（勾股定理）：alt="直角三角形斜边平方等于两直角边平方和：c² = a² + b²"
✅ 示例（水分子）：alt="H₂O结构：一个氧原子居中，左右各连接一个氢原子，键角约104.5度"
9. 验证码图像（CAPTCHA）
WCAG 明确要求避免纯图像验证码。若暂无法替换，alt 必须提供**替代验证方式入口**。
✅ 正确写法：alt="图形验证码。提供语音验证码：点击播放按钮听取数字；或选择‘文字验证码’切换为字母数字组合"
❌ 禁止：alt="请输入图中字符"（对视障者无效）
10. 图像作为唯一内容（如艺术作品、签名扫描件）
按用途区分：若强调作者/出处（如画廊页），alt 注明作者、年代、材质；若强调内容（如合同签名），alt 描述对象+动作+法律意义。
✅ 艺术品：alt="《星月夜》油画，文森特·梵高，1889年创作，深蓝夜空漩涡状云层下有明亮金黄月亮与十一颗星星"
✅ 签名：alt="张伟于2024年6月10日签署的劳动合同电子签名"
