如何在浏览器环境下通过JavaScript获取元素的Accessible Name？

现代浏览器推荐方案：使用标准API #

现代主流浏览器（Chrome 85+、Firefox 89+、Safari 14.1+）支持原生的Element.getAccessibleName()方法，该方法会严格按照无障碍名称计算规则返回结果，是最准确的实现方式：

// 获取目标元素
const targetElement = document.getElementById('your-element-id');
// 计算并获取Accessible Name
const accessibleName = targetElement.getAccessibleName();
// 输出结果
console.log(accessibleName);

旧浏览器兼容方案：近似实现 #

如果需要适配不支持getAccessibleName()的旧浏览器，可以通过手动检查常见无障碍属性和元素内容来近似获取（注：此方法无法覆盖所有复杂计算规则，仅作基础兼容）：

function getApproximateAccessibleName(element) {
    // 优先读取aria-label属性
    const ariaLabel = element.getAttribute('aria-label');
    if (ariaLabel) return ariaLabel.trim();

    // 处理aria-labelledby关联的元素文本
    const ariaLabelledby = element.getAttribute('aria-labelledby');
    if (ariaLabelledby) {
        return ariaLabelledby.split(' ')
            .map(id => document.getElementById(id))
            .filter(el => el)
            .map(el => el.textContent.trim())
            .join(' ');
    }

    // 单独处理图片的alt属性
    if (element.tagName === 'IMG') {
        const altText = element.getAttribute('alt');
        return altText ? altText.trim() : '';
    }

    // 最后读取元素自身文本内容
    return element.textContent.trim();
}

// 使用示例
const targetElement = document.getElementById('your-element-id');
console.log(getApproximateAccessibleName(targetElement));

内容的提问来源于stack exchange，提问作者Chris F Carroll