如何提取由 NVDA 聚焦的图像的 src？答案

【问题标题】：How to extract the src of an image that is focused by NVDA?如何提取由 NVDA 聚焦的图像的 src？
【发布时间】：2021-08-08 08:06:51
【问题描述】：

我正在尝试提取 NVDA（或任何屏幕阅读器）关注的 img 的 src。但是，我无法获得确切的 src。这是我在特定触发器上使用的代码：

let activeElement = document.activeElement
let URL = activeElement.src
console.log(URL)

但是，这并没有让我获得 src。有时它会打印整个文档。我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

尝试 getAttribute() 方法并在参数中传递属性名称例子： document.getElementById('yourImageId').getAttribute('src')

【讨论】：

【解决方案2】：

document.activeElement 并不总是指向焦点元素。正如您所发现的，它有时指向文档本身或其正文。

document.activeElement 在某些情况下也可以有某种空值。（例如，如果浏览器内容根本不在焦点上）

所以，你必须先检查document.activeElement 的值，看看它是否非空，然后你可以检查它的nodeName 的值，看看它是否是“IMG”，然后然后获取src。（nodeName 值始终为大写）。

您可以侦听文档上的focus 事件，并忽略那些event target 不包含图像的事件。我想我会从这种方法开始。

一些注意事项：

图像可以通过多种方式实现，而不仅仅是一个 <img> 标签。例如，<svg>、<figure>、<picture>、<canvas> 和<object> 可能都代表图像。其中许多没有src 属性。
文档正文中的几乎所有内容都可以在 CSS 中具有背景图像，因此可能看起来是图像。
任何一组视觉元素（包括文本字形和表情符号）都可以表示单个图像（从语义上讲），如果该组具有role=image
src 可能是一个 URI 而不是一个 URL（即它可能调用一个动态生成图像的服务器端进程）。它可能包含一个 base64 编码的字符串，表示图像数据。

如果您了解这些注意事项，应该可以按照您的意愿行事。

【讨论】：