aria-label 包含 HTML 文本，但只想侦听没有 HTML 元素描述的文本

Question

我正在研究div 的可访问性，只想在 aria-label 中显示工具提示 html 值，但工具提示 HTML 值包含 HTML 元素，就像段落一样，当我使用该屏幕阅读器时，也开始逐个字符读取 HTML 元素，所以我需要一个解决方案，因为屏幕阅读器不应该读取 HTML 字符。

<div ng-repeat="item in responseData" class="d-sla__icon d-icon-right-{{item.icon}}" ng-style="{'left':item.percent}" tooltip-placement="{{item.tooltipPlacement}}"
uib-tooltip-html="'{{item.tooltip}}'" ng-click="showMilestones(item)" 
tooltip-trigger="focus mouseenter" aria-label="'{{item.tooltip}}'"></div>

Answer 1

尽管实现可能因屏幕阅读器而异，但默认情况下，aria-label值应仅包含文本，而不应包含 HTML 标记。

您可以将设置更改为使用aria-labelledby属性，并通过引用指向另一个元素，该元素将更好地支持 HTML 标记。

<div ng-repeat="item in responseData" class="d-sla__icon d-icon-right-{{item.icon}}" ng-style="{'left':item.percent}" tooltip-placement="{{item.tooltipPlacement}}"
uib-tooltip-html="'{{item.tooltip}}'" ng-click="showMilestones(item)" 
tooltip-trigger="focus mouseenter" aria-labelledby="itemTooltip"></div>
<h4 id="itemTooltip">'{{item.tooltip}}'</h4>

此外，如果工具提示内容更像是描述而不是给定元素的标题/标签，则可以考虑使用aria-describedby。