在 link 中添加一个 span 元素，使其可通过 javascript 访问 (AA)

Question

我正在尝试修改一个插件，以使其更现代、更易于访问。问题是图标：我需要添加一个带有一些文本的 span 元素以使其可读但不可见。

我的javascript如下：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';

    return infoLink;
}

我尝试添加一行，以便像这样用 .innerHTML 注入 html：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    infoLink.innerHTML = "<span class='sr-only'>Close cookie policy</span>";

    return infoLink;
}

但是没有用。有什么建议吗？

更新：

_setElementText 函数如下：

function _setElementText(element, text) {
    var supportsTextContent = 'textContent' in document.body;

    if (supportsTextContent) {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

Answer 1

而不是 .innerHTML 也许尝试使用：

infoLink.classList.add('sr-only')

Answer 2

您可以生成元素，然后将其与文本一起附加：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    var srSpan = document.createElement('span')
    srSpan.innerText = 'Close cookie policy'
    srSpan.classList.add('sr-only')

    infoLink.appendChild(srSpan);

    return infoLink;
}

在 link 中添加一个 span 元素，使其可通过 javascript 访问 (AA)

Add a span element within a link to make it accessible (AA) with javascript

javascript

accessibility

screen-readers