Accessibility Features

var option = {
    aria: {
        enabled: true
    },
    // ... rest of your chart configuration
};

var option = {
    aria: {
        enabled: true,
        
        // Decal patterns for accessibility
        decal: {
            show: false
        },
        
        // Label configuration for screen readers
        label: {
            enabled: true,
            description: '',  // Custom description
            general: {
                withTitle: 'This is a chart about "{title}"',
                withoutTitle: 'This is a chart'
            },
            series: {
                maxCount: 10,  // Max series to describe
                single: {
                    prefix: '',
                    withName: 'The chart type is {seriesType}, representing {seriesName}.',
                    withoutName: 'The chart type is {seriesType}.'
                },
                multiple: {
                    prefix: 'It consists of {seriesCount} series.',
                    withName: 'The {seriesId} series is a {seriesType}, representing {seriesName}.',
                    withoutName: 'The {seriesId} series is a {seriesType}.',
                    separator: {
                        middle: ';',
                        end: '.'
                    }
                }
            },
            data: {
                maxCount: 10,  // Max data points to describe per series
                allData: 'The data is as follows: ',
                partialData: 'The first {displayCnt} items are: ',
                withName: '{name} is {value}',
                withoutName: '{value}',
                separator: {
                    middle: ',',
                    end: ''
                }
            }
        }
    }
};

// Implementation from src/visual/aria.ts:156
dom.setAttribute('role', 'img');
dom.setAttribute('aria-label', generatedLabel);

var option = {
    aria: {
        enabled: true,
        label: {
            description: 'A bar chart showing monthly sales data for 2024. Sales increased from $10,000 in January to $50,000 in December, with a notable spike in June reaching $75,000.'
        }
    },
    title: {
        text: 'Monthly Sales 2024'
    },
    series: [{
        type: 'bar',
        data: [10000, 15000, 20000, 25000, 30000, 75000, 40000, 45000, 50000, 45000, 48000, 50000]
    }]
};

var option = {
    aria: {
        enabled: true
    },
    title: {
        text: 'Sales Statistics'
    },
    series: [
        {
            name: 'Product A',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110]
        },
        {
            name: 'Product B',
            type: 'bar',
            data: [90, 150, 120, 100, 80, 95]
        }
    ]
};

// Generated aria-label (from src/visual/aria.ts:174-247):
// "This is a chart about Sales Statistics. It consists of 2 series.
// The 0 series is a bar chart, representing Product A. The data is as follows:
// 120, 200, 150, 80, 70, 110.
// The 1 series is a bar chart, representing Product B. The data is as follows:
// 90, 150, 120, 100, 80, 95."

var option = {
    aria: {
        enabled: true,
        decal: {
            show: true
        }
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

// Implementation details from src/visual/aria.ts:107-114
const paletteDecal = getDecalFromPalette(
    seriesModel.ecModel,
    name,
    decalScope,
    dataCount
);
const specifiedDecal = data.getItemVisual(idx, 'decal');
data.setItemVisual(idx, 'decal', mergeDecal(specifiedDecal, paletteDecal));

var option = {
    aria: {
        enabled: true,
        decal: {
            show: true,
            decals: [
                {
                    symbol: 'rect',
                    symbolSize: 1,
                    color: 'rgba(0, 0, 0, 0.2)'
                },
                {
                    symbol: 'circle',
                    symbolSize: 1,
                    color: 'rgba(0, 0, 0, 0.2)'
                },
                {
                    dashArrayX: [1, 0],
                    dashArrayY: [2, 5],
                    rotation: Math.PI / 4,
                    color: 'rgba(0, 0, 0, 0.2)'
                }
            ]
        }
    },
    series: [{
        type: 'pie',
        data: [
            { value: 335, name: 'Category A' },
            { value: 234, name: 'Category B' },
            { value: 548, name: 'Category C' }
        ]
    }]
};

import * as echarts from 'echarts';

// Use localized type names
echarts.registerLocale('EN', {
    aria: {
        general: {
            withTitle: 'This is a chart about "{title}"',
            withoutTitle: 'This is a chart'
        },
        series: {
            single: {
                prefix: '',
                withName: 'The chart type is {seriesType}, representing {seriesName}.',
                withoutName: 'The chart type is {seriesType}.'
            },
            multiple: {
                prefix: 'It consists of {seriesCount} chart(s).',
                withName: 'Chart {seriesId} is {seriesType}, representing {seriesName}.',
                withoutName: 'Chart {seriesId} is {seriesType}.',
                separator: {
                    middle: '; ',
                    end: '.'
                }
            }
        }
    },
    series: {
        typeNames: {
            pie: 'pie chart',
            bar: 'bar chart',
            line: 'line chart',
            scatter: 'scatter plot',
            effectScatter: 'ripple scatter plot',
            radar: 'radar chart',
            tree: 'tree diagram',
            treemap: 'treemap',
            sunburst: 'sunburst chart',
            boxplot: 'boxplot',
            candlestick: 'candlestick chart',
            k: 'k line chart',
            heatmap: 'heatmap',
            map: 'map',
            parallel: 'parallel coordinate map',
            lines: 'line graph',
            graph: 'relationship graph',
            sankey: 'sankey diagram',
            funnel: 'funnel chart',
            gauge: 'gauge',
            pictorialBar: 'pictorial bar chart',
            themeRiver: 'theme river map',
            custom: 'custom chart'
        }
    }
});

var option = {
    aria: {
        enabled: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        // Ensure tooltip text is accessible
        textStyle: {
            fontSize: 14
        },
        // Use semantic HTML in formatter
        formatter: function(params) {
            var result = '<strong>' + params[0].name + '</strong><br/>';
            params.forEach(function(item) {
                result += item.marker + ' ' + 
                         item.seriesName + ': <strong>' + 
                         item.value + '</strong><br/>';
            });
            return result;
        }
    },
    series: [{
        type: 'line',
        data: [10, 20, 30, 40, 50]
    }]
};

<div id="main" 
     tabindex="0" 
     role="img"
     style="width: 600px; height: 400px;"
     onkeydown="handleChartKeyboard(event)">
</div>

<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    aria: {
        enabled: true,
        label: {
            description: 'Interactive chart. Press Enter for details.'
        }
    },
    // ... chart options
});

function handleChartKeyboard(event) {
    if (event.key === 'Enter' || event.key === ' ') {
        // Show additional information or data table
        showDataTable();
    }
}
</script>

// Colorblind-friendly palette
var colorBlindSafePalette = [
    '#0173B2',  // Blue
    '#DE8F05',  // Orange  
    '#029E73',  // Green
    '#CC78BC',  // Purple
    '#CA9161',  // Brown
    '#FBAFE4',  // Pink
    '#949494',  // Gray
    '#ECE133'   // Yellow
];

var option = {
    color: colorBlindSafePalette,
    aria: {
        enabled: true,
        decal: {
            show: true  // Add patterns as additional distinction
        }
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

<div id="chart-container">
    <div id="main" style="width: 600px; height: 400px;"></div>
    
    <details style="margin-top: 20px;">
        <summary>View data as table</summary>
        <table id="data-table">
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <!-- Generated from chart data -->
            </tbody>
        </table>
    </details>
</div>

<script>
var chartData = [
    { name: 'Jan', value: 120 },
    { name: 'Feb', value: 200 },
    { name: 'Mar', value: 150 }
];

// Populate chart
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    aria: { enabled: true },
    xAxis: { type: 'category', data: chartData.map(d => d.name) },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: chartData.map(d => d.value) }]
});

// Populate accessible table
var tbody = document.querySelector('#data-table tbody');
chartData.forEach(function(item) {
    var row = tbody.insertRow();
    row.insertCell(0).textContent = item.name;
    row.insertCell(1).textContent = item.value;
});
</script>

// From src/component/aria/install.ts:24-26
export function install(registers: EChartsExtensionInstallRegisters) {
    registers.registerPreprocessor(ariaPreprocessor);
    registers.registerVisual(registers.PRIORITY.VISUAL.ARIA, ariaVisual);
}