通过 javascript 动态添加 aria 标签的最佳方法是什么？

Question

我正在开发一个具有预定义html的表单，我无法更改它，并且我想添加一个aria标签，但我遇到了困难。我尝试过使用类名和 id 但它似乎不起作用。

我已经在页脚中加载了java脚本，以便在页面加载后触发它，但我没有收到任何错误消息来表明有什么问题。当我使用预定义按钮时，我可以使用类名使用此方法手动将 aria 标签添加到按钮，但我也尝试过使用类名，但它不适用于表单字段。我没有主意了。

这是我迄今为止尝试过的代码： 我通过回调更新了代码，但收到错误

“（索引）：7673未捕获的类型错误：无法在（索引）：7676：3的myFunction（（索引）：7673：70）读取null的属性（读取'setAttribute'）”

我发现了一个与我类似的案例，并更新了代码原始链接将 Aria 标签添加到链接 我已经更新了代码并添加了 onload 事件，但仍然看不到 aria 标签 这是我的新代码。 帖子提到了一个onload事件，我已经添加了，但仍然没有成功。

<script>
window.onload = (event) => {
  console.log("page is fully loaded");
  
      function addAriaLabel() {
// Create an aria label attribute:
const addAria = document.createAttribute("aria-label");

// Set the value of the aria-label attribute:
addAria.value = "first name";

// Add the href attribute to an element:
document.getElementById("ff-6434032271c069faf7824b65-VWlTNFZwa2RU").setAttributeNode(addAria);
    }

};

<script>
function myFunction() {
  document.getElementById("ff-6434032271c069faf7824b65-VWlTNFZwa2RU").setAttribute('aria-label', 'firstname'); 
}
 myFunction();

Answer 1

你的代码工作正常

function myFunction() {
  document.getElementById("ff-6434032271c069faf7824b65-VWlTNFZwa2RU").setAttribute('aria-label', 'firstname'); 
}
 myFunction();

div::after {
  content: attr(aria-label);
}

<div id="ff-6434032271c069faf7824b65-VWlTNFZwa2RU"></div>

但是如果元素是通过 javascript 加载的，你可以尝试添加延迟：

function myFunction() {
  document.getElementById("ff-6434032271c069faf7824b65-VWlTNFZwa2RU").setAttribute('aria-label', 'firstname'); 
}
setTimeout(() => myFunction(), 1000);

div::after {
  content: attr(aria-label);
}

<div id="ff-6434032271c069faf7824b65-VWlTNFZwa2RU"></div>