Question

我正在研究div的可访问性，只想在aria-label中显示tooltip-html值，但是当我使用该屏幕阅读器时，tooltip-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。

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

1 个答案: