如何对aria-owns等ARIA属性进行浏览器特性检测？

Web开发的最佳实践是使用浏览器特性检测而非版本检测来判断浏览器是否支持并正确处理某一特性，比如JavaScript中的CSS.supports()就是常用的特性检测工具。

针对aria-owns，确实存在特性检测的方法，核心思路是验证浏览器不仅能识别该属性，还能正确解析其无障碍语义关联：

检测实现代码 #

function supportsAriaOwns() {
  // 创建测试DOM结构
  const container = document.createElement('div');
  const ownerEl = document.createElement('div');
  const ownedEl = document.createElement('div');
  
  // 设置必要的ID与属性
  ownedEl.id = 'test-owned-el';
  ownerEl.setAttribute('aria-owns', 'test-owned-el');
  
  // 组装并隐藏测试元素
  container.append(ownerEl, ownedEl);
  container.style.display = 'none';
  document.body.appendChild(container);
  
  let isSupported = false;

  try {
    // 优先通过无障碍API验证关联逻辑
    if (typeof ownerEl.getAccessibleNode === 'function') {
      const accessibleOwner = ownerEl.getAccessibleNode();
      const accessibleOwned = ownedEl.getAccessibleNode();
      isSupported = accessibleOwner?.ownedElements?.includes(accessibleOwned) ?? false;
    } else if (window.AccessibilityObjectModel) {
      // 适配支持Accessibility Object Model的浏览器
      const aomOwner = AccessibilityObjectModel.getAccessibleNode(ownerEl);
      const aomOwned = AccessibilityObjectModel.getAccessibleNode(ownedEl);
      isSupported = aomOwner?.ownedElements?.includes(aomOwned) ?? false;
    } else {
      // 降级检测：验证属性能否被正确解析
      isSupported = ownerEl.getAttribute('aria-owns') === 'test-owned-el' && 
                   ownerEl.ariaOwns === 'test-owned-el';
    }
  } catch (err) {
    // 捕获兼容错误，标记为不支持
    isSupported = false;
  }

  // 清理测试元素
  document.body.removeChild(container);

  return isSupported;
}

补充说明 #

部分浏览器（比如修复Bug 151498之前的WebKit内核浏览器）可能允许设置aria-owns属性，但并未正确实现其无障碍语义关联逻辑。上述检测方法不仅验证属性的存在性，还尝试通过无障碍API验证元素间的关联关系，确保特性真正生效。

内容的提问来源于stack exchange，提问作者pzrq