参考资料

1. HTML DOM 改变一个iframe的src
2. HTML DOM 鼠标的坐标？
3. HTML DOM弹出下拉列表中所有选项
4. HTML DOM 当点击完button不可用 实例
5. HTML DOM 被按下的键盘键的keycode？
6. HTML DOM 返回图像映射的某个区域的target的值 实例
7. HTML DOM删除下拉列表中的选项
8. HTML DOM 返回页面上所有相对URL的基URL 实例

HTML DOM image longdesc 属性

简介

longdesc 属性用于指定一个指向图像详细描述的链接，通常用于为屏幕阅读器等辅助技术提供更详细的图像描述。

标签用法

<img src="image.jpg" longdesc="description.html" alt="简短描述">

功能

• 提供图像的长文本描述

• 增强可访问性

• 适用于复杂图表、图形等需要详细说明的图像

DOM 访问

// 获取 longdesc 属性值
var longDesc = document.getElementById("myImage").longDesc;

// 设置 longdesc 属性值
document.getElementById("myImage").longDesc = "new-description.html";

实例

<img id="chart" src="sales-chart.png" 
     alt="2023年销售图表" 
     longdesc="sales-chart-description.html">

<script>
  // 获取描述链接
  var descLink = document.getElementById("chart").longDesc;
  console.log("详细描述位于: " + descLink);
</script>

CSS 扩展

虽然 longdesc 本身没有特定的 CSS 属性，但可以通过 CSS 增强其可视化提示：

img[longdesc] {
  border: 1px dotted blue;
}

img[longdesc]::after {
  content: " (有详细描述)";
  font-size: smaller;
  color: gray;
}

注意事项

• HTML5 中已不推荐使用 longdesc 属性

• 现代替代方案是使用 <figure> 和 <figcaption> 或 ARIA 属性

• 仍然被一些屏幕阅读器支持