为没有显式属性的 HTML 自定义元素设置（ARIA）角色？

Question

我有一个网络应用程序，它显示和传递用户可编辑的语义标记。出于各种原因，包括安全性，标记完全由自定义元素（加上i、b 和u 标签）组成。对于常规渲染，我只需为所有标签设置样式并将它们直接粘贴到 DOM 中。这看起来很棒。

现在我正在做屏幕阅读器测试，但情况并不好。我有一堆要为其添加标签的图形符号。我有想要制作地标的 div。我有自定义输入字段和按钮。

只需将role= 添加到所有不同的标签实例就很容易了。但是自定义标记的部分原因是消除传递的字符串中的所有冗余信息（注意：它们也被压缩）。我的<ns-math> 标记应该总是有role="math"，并且当乘以整篇文章时，将可能是单个字符的标记添加11 个字节是一个实际问题。我知道这一点是因为该应用以一堆 <span class="... 类型元素开始，而不是自定义。

对于字段和按钮，我使用了影子 DOM 方法。无论如何，这对于在不使用一堆冗余属性污染语义标记的情况下获得正确的焦点/键盘语义是必要的，因此也很容易在阴影元素上添加 ARIA 内容。特别是因为输入都是叶节点。但是我的大部分自定义标签都花哨的spans，而且大多是 not 叶节点，所以我真的不想在它们出现时隐藏它们all在 light DOM 中运行良好。

经过大量搜索，似乎"4.13.7.4 Accessibility semantics" of the HTML standard 中的internals.role 属性可能是我想要的。我很可能使用不正确（我是前端的新手），但我似乎无法让它在最新版本的 Firefox 或 Chrome 中工作。我没有收到错误，但它似乎对可访问性树没有影响。我的元素与表单无关，但我的阅读是 ARIAMixin 无论如何都应该是功能性的。这可能是一个工作草案？如果这应该在当前浏览器中工作，是否有人有代码 sn-p 或示例？

是否有其他直接的方式来实现我的可访问性目标——在不向元素实例添加一堆显式属性的情况下注释我的自定义元素？

Answer 1

所以您想要在不实际添加这些属性的情况下添加role 或aria-attribute 的好处？ “accessibility object model”（AOM）的概念一直在开玩笑，它可以让您直接访问和修改可访问性树，但它仍在工作中。几年前的Here's an article 谈到了它。没有什么官方的。只是一个人的想法。

Answer 2

进一步的研究表明，截至目前，我要求的抽象可访问性选项尚未实现。

暂时：通过role="presentation" 从可访问性层次结构中消除一些包含divs 的页面拥有显着改善了我的整体树。有了这些，我的大多数自定义标签似乎在语义上都被忽略了。这大部分很好，因为我的大部分内容都是纯文本。

由于我已经标记了绝大多数甚至是单字符的符号，所以我只是将 all 我的符号添加到了标记生成器中。由于所有内容都已在自定义标签中，因此我使用阴影 DOM span 和 role="img" 和特定于字符的 aria-label 来呈现符号字符。

我的解决方案仍然不完整。我希望我能传达我可用的语义内容的全部丰富性。