如何利用HTML的ElementInternals的ariaLabel属性为自定义元素设置无障碍标签-html教程-PHP中文网

elementinternals.arialabel是只读属性，不能用于设置无障碍标签；它仅反映浏览器按wai-aria规则计算出的可访问名称，真正设置需通过aria-label、aria-labelledby或原生语义等dom属性。

如何利用html的elementinternals的arialabel属性为自定义元素设置无障碍标签

ElementInternals.ariaLabel 不能直接设置无障碍标签——它只是只读属性，反映当前计算出的可访问名称，不是 setter。

为什么`ElementInternals.ariaLabel`不能用来“设置”标签

这个属性是浏览器根据元素实际可访问名称（accessible name）自动计算并暴露出来的只读字段。它不接受赋值，写 el.internals.ariaLabel = "提交" 不会生效，也不会报错，但完全无作用。

它的值由浏览器按 WAI-ARIA 名称计算规则推导：优先看 aria-labelledby 指向的文本，其次 fallback 到 aria-label，再 fallback 到子文本节点等
你真正能控制可访问名称的，只有 DOM 层面的属性：aria-label、aria-labelledby、或原生语义（如 <button>文本</button>）
ElementInternals 主要用于自定义元素内部同步状态（如 setFormValue()、setValidity()），而非覆盖可访问名称逻辑

给自定义元素加无障碍标签的正确路径

自定义元素（如 <my-button></my-button>）默认无语义，必须手动补全角色 + 可访问名称 + 键盘行为。关键不在 ariaLabel，而在三件事同时到位：

用 role="button"（或其他匹配角色）声明类型，否则读屏器读作“自定义元素”
通过 this.setAttribute('aria-label', '删除') 或 this.setAttribute('aria-labelledby', 'xxx') 设置名称——这是唯一有效的入口
必须加 tabindex="0" 并监听 keydown（Enter/Space），否则键盘用户无法操作

示例片段：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<slot></slot>`;
    // ✅ 正确：设 role + aria-label + tabindex
    this.role = 'button';
    this.tabIndex = 0;
    this.setAttribute('aria-label', '刷新数据');
    this.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        this.click();
      }
    });
  }
}