📍 WDQWDWQD987AAAAA:216.73.217.0
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /eab0948a2333.html
📄

超链接制作方法：图片信息怎样补全才不影响链接可用性

图片信息补全的核心是给图片链接补上可被读取、可被辅助技术理解的文本与尺寸信息。做法分三步：检查图片是否被超链接包裹、为图片本身补alt文本、为链接补可访问名称。验收信号是关闭图片后仍能看懂链接指向，屏幕阅读器能读出链接用途，页面布局不因图片缺失而错位。

先分清是图片缺信息还是链接缺信息

制作图片超链接时，常见结构是<a>里放一个<img>。这时有两层信息需要补：图片层的替代文本，以及链接层的可访问名称。很多问题出在只补了一层。

• 图片层缺alt：图片加载失败时显示破图，辅助技术读不出内容。
• 链接层缺名称：链接内只有图片且alt为空，读屏软件可能只读“链接”，不说明去哪。
• 两层都缺：图片和链接都无法被理解，这是最需要优先处理的情况。

判断方法很直接：把<img>的src临时改成一个不存在的地址，刷新页面。如果链接位置只剩空白或破图，没有任何文字提示，说明图片信息没有补全。

补全图片信息的具体步骤

按下面的顺序处理，每一步都有对应的检查点。

1. 确认图片是否承担链接功能。如果图片可点击跳转，它就不是纯装饰图，必须有能说明去向的文本。
2. 为<img>写alt。内容是图片表达的含义，不是文件名。假设一张图是“返回首页”的图标，alt写“返回首页”，不要写“home.png”。
3. 检查链接名称是否完整。如果alt已经说明去向，链接层可以不再重复；如果alt只描述画面，就需要在链接上补名称。
4. 补尺寸信息。给<img>写上width和height，或在外层容器预留宽高，避免图片未加载时链接区域塌陷。
5. 验证。用键盘 Tab 键移动到该链接，确认焦点可见；用读屏软件或浏览器无障碍面板查看读出的名称。

短例子：<a href="/about"><img src="team.jpg" alt="了解团队" width="320" height="180"></a>。这里alt同时承担了链接名称，读出来是“了解团队，链接”，指向明确。

什么情况下可以留空 alt

alt留空（写成alt=""）适用于纯装饰图片，也就是图片不承载信息、去掉后不影响理解。判断标准是：把这张图删掉，页面意思是否改变。不改变，可以留空；改变，就必须写。

需要注意的是，装饰图如果被超链接包裹，留空alt会让链接失去名称。这种情况要么给链接补aria-label，要么在链接内加一段视觉隐藏的文字。两种方式选一种即可，不要同时重复同一句话。

补全后的验收信号

改动完成后，用下面几项确认是否真的补全，而不是只看页面正常显示。

• 关闭图片加载后，链接位置仍有可读文字或明确提示。
• Tab 键能聚焦到该链接，焦点样式可见。
• 读屏读出的链接名称能说明去向，不是“链接”或文件名。
• 图片未加载时，链接区域高度基本不变，周围内容不跳动。
• 同一页面多个图片链接的名称不重复、不混淆。

如果改动前后要做效果比较，应把季节、搜索需求波动和数据采集口径差异考虑进去，单次对比不足以说明问题。

下一步：挑出页面里所有被<a>包裹的<img>，逐个按上面的清单核对alt、链接名称和宽高，先处理读出来只有“链接”二字的那些。