Accessibility design

The Importance of Accessible Design

Accessible design ensures that all users can equally access and use digital products. For data visualization libraries like ECharts, this means considering colorblind users, keyboard navigation, screen reader compatibility, and other factors. Good accessible design not only meets regulatory requirements but also expands the user base and enhances product inclusivity.

Color Contrast and Colorblind-Friendly Design

The use of colors in ECharts charts must comply with the WCAG 2.1 AA standard, meaning text and background should have a contrast ratio of at least 4.5:1. For colorblind users, avoid relying solely on color to distinguish data:

option = {  
  color: [  
    // Avoid red-green combinations  
    '#4E79A7', // Blue  
    '#F28E2B', // Orange  
    '#E15759', // Red  
    '#76B7B2', // Teal  
    '#59A14F'  // Green  
  ],  
  series: [{  
    type: 'pie',  
    data: [  
      {value: 1048, name: 'Search Engine'},  
      {value: 735, name: 'Direct Access'},  
      // Add patterns for each data item  
      {value: 580, name: 'Email Marketing', itemStyle: {   
        color: {  
          image: document.createElement('canvas'),  
          repeat: 'repeat'  
        }  
      }}  
    ]  
  }]  
};  

ARIA Attributes and Screen Reader Support

Use ARIA attributes to ensure screen readers correctly interpret chart content:

option = {  
  aria: {  
    enabled: true,  
    label: {  
      description: 'This is a bar chart showing quarterly sales, with the x-axis representing quarters and the y-axis representing sales'  
    },  
    decal: {  
      show: true  
    }  
  },  
  xAxis: {  
    type: 'category',  
    data: ['Q1', 'Q2', 'Q3', 'Q4'],  
    axisLabel: {  
      ariaLabel: 'Quarter'  
    }  
  },  
  yAxis: {  
    type: 'value',  
    axisLabel: {  
      ariaLabel: 'Sales'  
    }  
  }  
};  

Keyboard Navigation Support

Ensure users can navigate charts via keyboard:

myChart.on('keydown', function (params) {  
  const keyCode = params.event.keyCode;  
  // Left/right arrows switch focus between data series  
  if (keyCode === 37 || keyCode === 39) {  
    const series = myChart.getModel().getSeries();  
    // Implement focus-switching logic  
  }  
  // Space or Enter keys view details  
  if (keyCode === 32 || keyCode === 13) {  
    const focusedItem = getFocusedItem();  
    showTooltip(focusedItem);  
  }  
});  

High-Contrast Mode

Provide a high-contrast theme option:

// High-contrast theme  
const highContrastTheme = {  
  backgroundColor: '#000',  
  color: ['#FFF', '#FF0', '#0FF'],  
  textStyle: {  
    color: '#FFF'  
  },  
  axisLine: {  
    lineStyle: {  
      color: '#FFF'  
    }  
  }  
};  

// Apply theme  
echarts.registerTheme('high-contrast', highContrastTheme);  
myChart.setOption({  
  theme: 'high-contrast'  
});  

Dynamic Descriptions and Data Tables

Provide alternative data table displays for charts:

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

// Insert the table near the chart container  
chartContainer.appendChild(generateDataTable(option));  

Animation and Flashing Control

Avoid rapid flashing animations that may trigger seizures:

option = {  
  animationDuration: 2000, // Extend animation duration appropriately  
  animationEasing: 'linear',  
  series: [{  
    type: 'pie',  
    animationType: 'scale', // Use smooth scaling animations  
    animationDelay: function (idx) {  
      return idx * 200; // Stagger animation start times  
    }  
  }]  
};  

Responsive Design and Scaling

Ensure charts remain usable at different zoom levels:

window.addEventListener('resize', function() {  
  myChart.resize();  
  // Adjust font size based on window size  
  const baseFontSize = Math.max(12, window.innerWidth / 100);  
  myChart.setOption({  
    textStyle: {  
      fontSize: baseFontSize  
    },  
    axisLabel: {  
      fontSize: baseFontSize * 0.8  
    }  
  });  
});  

Touch Device Optimization

Provide larger click areas for touch devices:

option = {  
  series: [{  
    type: 'pie',  
    selectedMode: 'single',  
    selectedOffset: 20, // Increase selection offset  
    itemStyle: {  
      borderWidth: 2,  
      borderColor: '#fff'  
    },  
    emphasis: {  
      itemStyle: {  
        borderWidth: 4 // Increase border on hover  
      }  
    }  
  }],  
  tooltip: {  
    triggerOn: 'click|mousemove|touchstart' // Support multiple trigger methods  
  }  
};  

Multilingual and Localization Support

Support multilingual descriptions and labels:

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  
    }  
  });  
}  

Performance and Progressive Enhancement

Ensure basic usability on low-performance devices:

const useSimpleMode = detectLowPerformanceDevice();  

option = {  
  series: [{  
    type: 'line',  
    progressive: useSimpleMode ? 200 : 400,  
    progressiveThreshold: useSimpleMode ? 1000 : 2000,  
    large: useSimpleMode,  
    largeThreshold: useSimpleMode ? 100 : 200,  
    // Simplify data sampling  
    sampling: useSimpleMode ? 'average' : 'none'  
  }]  
};