Javascript 如何将aria属性设置为highcharts工具提示

我有一个图表（Highcharts）在React应用程序中编写，带有自定义格式的工具提示；但是，屏幕阅读器在通过点“选项卡”时不会公布工具提示内容

我编写了一些JavaScript来解决我的问题，并在mouseOut上发布了应该发布的工具提示，而不会在DOM中创建不必要的元素

point: {
    events: {
        mouseOut: function () {
            let ariaText = this.category + ', Projected Savings: $ ' + this.projectedSavingsFormatted + ', Target Savings: ' + targetSavingsFormatted + ', Time to Achieve: ' + this.timeToAcheive + ' months';
            let tooltips = document.querySelectorAll('div.highcharts-tooltip')[0];
            tooltips.getElementsByTagName('span')[0].setAttribute('role', 'tooltip');
            tooltips.getElementsByTagName('span')[0].setAttribute('aria-live', 'assertive');
            tooltips.getElementsByTagName('span')[0].setAttribute('aria-label', ariaText);
        }
    }
}

---

我的问题是：我该如何清理？必须有一种更有效的方法来编写此函数。

如果只想得到一个元素，请使用而不是

querySelectorAll（…）[0]

：

let tooltips = document.querySelectorAll('div.highcharts-tooltip')[0];
// becomes:
let tooltips = document.querySelector('div.highcharts-tooltip');

但是，根据您的代码，似乎没有必要选择

div

——如果您只需要第一个

span

，请立即选择它，而不存储父节点：

let tooltip = document.querySelector('div.highcharts-tooltip span');
tooltip.setAttribute('role', 'tooltip');
tooltip.setAttribute('aria-live', 'assertive');
tooltip.setAttribute('aria-label', ariaText);

为了节省几个字符并希望使长字符串更清晰，您可以使用而不是链接

'…'+…+'…'

：

let ariaText = this.category + ', Projected Savings: $ ' + this.projectedSavingsFormatted + ', Target Savings: ' + targetSavingsFormatted + ', Time to Achieve: ' + this.timeToAcheive + ' months';
// becomes:
let ariaText = `${this.category}, Projected Savings: $ ${this.projectedSavingsFormatted}, Target Savings: ${targetSavingsFormatted}, Time to Achieve: ${this.timeToAcheive} months`;
// notice the backticks (``) instead of quotes ('')

因此，您的功能可以变成：

point: {
    events: {
        mouseOut: function () {
            let ariaText = `${this.category}, Projected Savings: $ ${this.projectedSavingsFormatted}, Target Savings: ${targetSavingsFormatted}, Time to Achieve: ${this.timeToAcheive} months`;
            let tooltip = document.querySelector('div.highcharts-tooltip span');
            tooltip.setAttribute('role', 'tooltip');
            tooltip.setAttribute('aria-live', 'assertive');
            tooltip.setAttribute('aria-label', ariaText);
        }
    }
}

---

具有讽刺意味的是，盲人不太可能使用鼠标与您的站点进行交互。脱离主题，但您可以使用

querySelector

获取第一个元素。据我所知，Highcharts可访问性API是有限的。mouseOut似乎是将工具提示变为“实时”的最佳方式，因为我不希望过早地宣布它们。我正在尝试组合多个“工具提示”。getElementsByTagName（'span'）[0]。setAttribute（''），'行。屏幕阅读器用户只会使用键盘，而不会使用鼠标。添加

aria-live

仅在更改工具提示中的文本时有效。每当工具提示中的文本发生更改时，屏幕阅读器都会读取该文本。添加

aria-live

本身不会导致读取任何内容。更改元素的

aria标签

不会被屏幕阅读器读取。当焦点移动到带有新标签的元素时，将读取新标签，但不会读取标签本身的更改。也就是说，

aria-live

不会读取

aria-label

更改。更干净！谢谢，不客气。然而，正如@DominicTobias所指出的，我不确定在屏幕阅读器中使用

mouseOut

是否有任何意义……不过我对HighCharts知之甚少。