aria-label содержит текст HTML, но хочет прослушивать только текст без описания html-элементов

Question

Я работаю над доступностью div, просто хочу показать значение tooltip-html в aria-label, но значение 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 если содержание всплывающей подсказки является больше описанием, чем заголовок / метка данного элемента.