HighCharts Stock图表无障碍适配咨询：键盘与VoiceOver支持问题

核心配置排查 #

首先确认是否开启了HighCharts核心的无障碍全局配置，初始化图表时可添加以下配置项：

Highcharts.chart('container', {
    accessibility: {
        enabled: true,
        keyboardNavigation: {
            enabled: true
        }
    },
    // 其他图表及stock-tools相关配置
});

需要注意的是，当前HighCharts核心的accessibility配置主要覆盖图表主体区域，对stock-tools的UI组件（工具栏、功能弹窗）的无障碍支持存在明显局限性，这也是你遇到问题的核心原因。

stock-tools模块无障碍缺陷的临时修复方案 #

目前官方暂未推出专门适配stock-tools的独立无障碍模块，你可以通过自定义DOM操作和事件绑定来临时解决问题：

• 给工具栏列表添加tabindex与键盘导航：监听stock-tools渲染完成事件，手动补全无障碍属性并实现键盘切换逻辑

Highcharts.addEvent(Highcharts.StockTools, 'afterRender', function() {
    const toolBarList = document.querySelector('.highcharts-stocktools-toolbar ul');
    if (toolBarList) {
        toolBarList.setAttribute('tabindex', '0');
        toolBarList.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                e.preventDefault();
                const items = this.querySelectorAll('li');
                let activeIndex = Array.from(items).findIndex(item => item === document.activeElement);
                activeIndex = e.key === 'ArrowDown' 
                    ? (activeIndex + 1) % items.length 
                    : activeIndex > 0 ? activeIndex - 1 : items.length - 1;
                items[activeIndex].focus();
            }
        });
    }
});

• 修复列表项的语义化结构：将li内的非按钮元素替换为<button>标签，并补充aria-label属性

Highcharts.addEvent(Highcharts.StockTools.ToolbarItem, 'render', function() {
    const spanElement = this.element.querySelector('li > span');
    if (spanElement) {
        const btn = document.createElement('button');
        btn.innerHTML = spanElement.innerHTML;
        btn.setAttribute('aria-label', this.options.title);
        btn.setAttribute('type', 'button');
        spanElement.parentNode.replaceChild(btn, spanElement);
        btn.addEventListener('click', () => this.onClick());
    }
});

• 实现弹窗的键盘访问支持：给弹窗添加焦点属性并绑定ESC关闭事件

Highcharts.addEvent(Highcharts.Popup, 'open', function() {
    const popup = this.container;
    popup.setAttribute('tabindex', '0');
    popup.focus();
    popup.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') this.close();
    });
});

官方支持现状 #

目前HighCharts官方在逐步推进全模块的无障碍优化，但stock-tools模块的无障碍适配尚未完成正式迭代。你可以通过官方反馈渠道提交需求，推动该模块的无障碍功能完善。

内容的提问来源于stack exchange，提问作者David Nogueras