时间戳

首页 > 解决方案 > 如何提取由 NVDA 聚焦的图像的 src？

javascript - 如何提取由 NVDA 聚焦的图像的 src？

问题描述

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

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

但是，这并没有让我获得 src。有时它会打印整个文档。我怎样才能解决这个问题？

标签： javascripthtmlaccessibilityscreen-readersnvda

解决方案

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

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

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

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

一些注意事项：

  • 图像可以以各种方式实现，而不仅仅是一个 <img>标签。例如，<svg>, <figure>, <picture>, <canvas>amd<object>可能都代表图像。其中许多没有src属性。

  • 几乎文档正文中的任何内容都可以在 CSS 中具有背景图像，因此可能看起来是图像。

  • 任何一组视觉元素（包括文本字形和表情符号）都可以表示单个图像（从语义上讲），如果该组具有role=image

  • 这src可能是一个 URI 而不是一个 URL（即它可能调用一个动态生成图像的服务器端进程）。它可能包含一个 base64 编码的字符串，表示图像数据。

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

推荐阅读