参考资料

1. HTML DOM 导航节点关系
2. HTML DOM删除下拉列表中的选项
3. HTML DOM 返回图像映射某个区域的替代文字实例
4. HTML DOM 返回和设置一个iframe中的scrolling属性的值
5. HTML DOM对单个单元格的内容垂直对齐
6. HTML DOM 返回页面上所有相对URL的基URL 实例
7. HTML DOM单元格内容水平对齐
8. HTML DOM对单个单元格的内容水平对齐

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 属性

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。