“更多信息”图标的正确 ARIA 角色是什么？

Question

工具提示的常见用途是将其添加到 ⓘ 图标以显示“更多信息”。我目前正在努力使我的组件更易于访问，因此我想将“工具提示”角色添加到我的工具提示组件中。但令人惊讶的是，Mozilla 的 WAI-ARIA 网页明确表示：here:

工具提示不适用于更多信息“i”图标，ⓘ。工具提示与所属元素直接关联。 ⓘ 不是由详细信息“描述”；工具或控件是。

虽然官方文档没有对此说什么。

那么，如果我将工具提示组件专门用于该目的，它可以发挥什么作用？还是我误解了这个说法？

这是我的工具提示组件模板，其角色符合我的预期添加：

<div role="tooltip" id="tooltip" class="tooltip-container">
  <div class="inner">{{ content }}</div>
  <span class="caret"></span>
</div>

Answer 1

您发布的 MDN 片段是正确的，因为它不是应该获得工具提示角色的图标。图标只是一个按钮。

如果提示中的内容可以表示为“平面文本”（即没有标题或列表等结构），您可以使用

aria-describedby

将您的组件与其关联，如 w3c 文档中所述。

如果提示内容确实有结构，请改用

aria-details

。这是可以接受的。

其中任何一个都会将提示内容与组件相关联，从而遵守“信息和关系”。

Answer 2

点击时打开“工具提示”实际上称为 toggletip。我认为你应该使用

aria-live

属性甚至

status

Answer 3

除了已经说过的内容之外，按照文档W3 Semanticly recognize a font icon with role="img"，您可以在图标元素上使用角色“img”并在其上添加

aria-label

。