无障碍访问设计

无障碍访问设计的重要性

无障碍访问设计确保所有用户都能平等地获取和使用数字产品。对于数据可视化库ECharts来说，这意味着要考虑色盲用户、键盘导航、屏幕阅读器兼容性等问题。良好的无障碍设计不仅能满足法规要求，更能扩大用户群体，提升产品包容性。

颜色对比度与色盲友好设计

ECharts图表中颜色使用需要满足WCAG 2.1 AA级标准，即文本和背景的对比度至少达到4.5:1。对于色盲用户，应避免仅靠颜色区分数据：

option = {
  color: [
    // 避免红绿色组合
    '#4E79A7', // 蓝色
    '#F28E2B', // 橙色
    '#E15759', // 红色
    '#76B7B2', // 蓝绿色
    '#59A14F'  // 绿色
  ],
  series: [{
    type: 'pie',
    data: [
      {value: 1048, name: '搜索引擎'},
      {value: 735, name: '直接访问'},
      // 为每个数据项添加图案
      {value: 580, name: '邮件营销', itemStyle: { 
        color: {
          image: document.createElement('canvas'),
          repeat: 'repeat'
        }
      }}
    ]
  }]
};

ARIA属性与屏幕阅读器支持

通过ARIA属性让屏幕阅读器能够正确解读图表内容：

option = {
  aria: {
    enabled: true,
    label: {
      description: '这是一个展示季度销售额的柱状图，横轴表示季度，纵轴表示销售额'
    },
    decal: {
      show: true
    }
  },
  xAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
    axisLabel: {
      ariaLabel: '季度'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      ariaLabel: '销售额'
    }
  }
};

键盘导航支持

确保用户可以通过键盘操作图表：

myChart.on('keydown', function (params) {
  const keyCode = params.event.keyCode;
  // 左右箭头切换数据系列焦点
  if (keyCode === 37 || keyCode === 39) {
    const series = myChart.getModel().getSeries();
    // 实现焦点切换逻辑
  }
  // 空格或回车键查看详情
  if (keyCode === 32 || keyCode === 13) {
    const focusedItem = getFocusedItem();
    showTooltip(focusedItem);
  }
});

高对比度模式

提供高对比度主题选项：

// 高对比度主题
const highContrastTheme = {
  backgroundColor: '#000',
  color: ['#FFF', '#FF0', '#0FF'],
  textStyle: {
    color: '#FFF'
  },
  axisLine: {
    lineStyle: {
      color: '#FFF'
    }
  }
};

// 应用主题
echarts.registerTheme('high-contrast', highContrastTheme);
myChart.setOption({
  theme: 'high-contrast'
});

动态描述与数据表格

为图表提供替代的数据表格展示：

function generateDataTable(option) {
  const table = document.createElement('table');
  table.setAttribute('role', 'presentation');
  table.setAttribute('aria-label', '图表数据表格');
  
  option.series.forEach(series => {
    series.data.forEach(dataItem => {
      const row = table.insertRow();
      row.insertCell().textContent = dataItem.name;
      row.insertCell().textContent = dataItem.value;
    });
  });
  
  return table;
}

// 将表格插入到图表容器附近
chartContainer.appendChild(generateDataTable(option));

动画与闪烁控制

避免可能引发癫痫的快速闪烁动画：

option = {
  animationDuration: 2000, // 适当延长动画时间
  animationEasing: 'linear',
  series: [{
    type: 'pie',
    animationType: 'scale', // 使用平缓的缩放动画
    animationDelay: function (idx) {
      return idx * 200; // 错开动画开始时间
    }
  }]
};

响应式设计与缩放

确保图表在不同缩放级别下保持可用：

window.addEventListener('resize', function() {
  myChart.resize();
  // 根据窗口大小调整字体
  const baseFontSize = Math.max(12, window.innerWidth / 100);
  myChart.setOption({
    textStyle: {
      fontSize: baseFontSize
    },
    axisLabel: {
      fontSize: baseFontSize * 0.8
    }
  });
});

触控设备优化

为触控设备提供更大的点击区域：

option = {
  series: [{
    type: 'pie',
    selectedMode: 'single',
    selectedOffset: 20, // 扩大选中偏移量
    itemStyle: {
      borderWidth: 2,
      borderColor: '#fff'
    },
    emphasis: {
      itemStyle: {
        borderWidth: 4 // 悬停时增加边框
      }
    }
  }],
  tooltip: {
    triggerOn: 'click|mousemove|touchstart' // 支持多种触发方式
  }
};

多语言与本地化

支持多语言描述和标签：

const i18n = {
  en: {
    title: 'Sales Report',
    legend: ['Product A', 'Product B']
  },
  zh: {
    title: '销售报告',
    legend: ['产品A', '产品B']
  }
};

function setLanguage(lang) {
  myChart.setOption({
    title: {
      text: i18n[lang].title
    },
    legend: {
      data: i18n[lang].legend
    }
  });
}

性能与渐进增强

确保在低性能设备上也能基本使用：

const useSimpleMode = detectLowPerformanceDevice();

option = {
  series: [{
    type: 'line',
    progressive: useSimpleMode ? 200 : 400,
    progressiveThreshold: useSimpleMode ? 1000 : 2000,
    large: useSimpleMode,
    largeThreshold: useSimpleMode ? 100 : 200,
    // 简化数据采样
    sampling: useSimpleMode ? 'average' : 'none'
  }]
};