Question

我知道如何在<img>上设置ALT标记，如果我有类或全局到页面上的所有图像，但是我怎么能对没有的特定图像进行设置身份或班级？我可以以某种方式使用父DIV来引用图像并添加alt标签吗？

<div id="table_processing">
    <img src="processing_report.gif"> Loading Report List...
</div>

Answer 1

我建议使用alt，它允许您使用CSS（类似jQuery）选择器选择图像。

像这样：

image.alt = "Our New Alt Text";

然后您可以将image.setAttribute("alt", "our New Alt Text");属性设置为：

var image = document.querySelector("#table_processing img");

image.alt = "Our New Alt Text";

或

<div id="table_processing">
    <img src="http://via.placeholder.com/350x150"> Loading Report List...
</div>

这是一个演示：

{{1}}

{{1}}

Answer 2

如果您使用jQuery，您可以使用父元素中的ID，如下所示：

$('#table_processing img').attr('alt', 'your text here');

这个＆＃34; css选择器＆＃34;将使用id＆＃34; table_processing＆＃34;获取div中的所有图像。并设置alt标记。

Answer 3

Pure / True / Real / Faster JavaScript 解决方案：

function setAlt()
{
    var div = document.querySelector("#table-processing");
        var image = div.querySelector("img");
            image.setAttribute("alt", "something");
}

Answer 4

JQuery允许您使用有效的css选择器，因此您可以使用：

$('#table_processing img').attr('alt', <text>);

Answer 5

您可以通过父母内部图像的位置（从第一个，第三个或第七个等任何位置开始）来执行此操作，如下所示：

＆＃13;

main

＆＃13;

Answer 6

我讨厌继续插入jQuery，但这是一个很好的示例，可以自动使用通用信息丢失缺失的alt标签，这是我为符合WCAG AA规范进行修补的方法，直到我们可以编辑所有内容为止。

$("img:not([alt])").attr({ alt: "your alt text", role: "presentation" });
$("iframe:not([title])").attr({ title: "your iframe title" });

这将查找没有alt属性的图像，将其添加并添加“此处的您的alt文本”值以及屏幕阅读器的角色，但是您可以删除它。 IO对于可能是不合规的第三方的iframe和嵌入，也要执行相同的操作。

使用JavaScript设置<img/> alt标记

6 个答案: