Enabling Keyboard Accessibility for RadHtmlChart Series

Description

In web development, ensuring accessibility for all users, including those relying on keyboard navigation, is crucial. This knowledge base article provides a guide on making the series in a RadHtmlChart focusable and clickable via the Enter key. This functionality is essential for implementing drill-down features accessible through keyboard navigation, in line with WCAG 2.1 guidelines.

This knowledge base article also answers the following questions:

• How can I make the RadHtmlChart series focusable using keyboard navigation?
• How do I enable clicking on RadHtmlChart series with the Enter key for drill-down functionality?
• What are the steps to achieve keyboard accessibility for RadHtmlChart in ASP.NET AJAX applications?

Solution

To enable keyboard navigation and accessibility for the RadHtmlChart series, follow these steps:

1. Ensure each bar in the RadHtmlChart is focusable by setting its tabindex to "0".
2. Add a keydown event listener to each focusable bar.
3. In the event listener, check if the Enter key is pressed. If so, manually trigger the desired click action.

Updated JavaScript Code

JavaScript

function onChartLoad(sender, args) {
    setTimeout(function () {
        var chart = $find("<%= AssetRadChart.ClientID %>");
        if (chart) {
            var kendoChart = chart.get_kendoWidget ? chart.get_kendoWidget() : null;
            if (kendoChart) {
                var bars = kendoChart.element.find("svg path[fill]:not([fill='none'])");
                if (bars.length > 0) {
                    bars.attr("tabindex", "0"); // Make bars focusable
                    bars.first().focus();

                    // Add keydown event listener to make bars clickable via Enter key
                    bars.on('keydown', function (e) {
                        if (e.key === 'Enter') {
                            var seriesIndex = $(this).index();
                            var dataItem = kendoChart.dataSource.view()[seriesIndex];
                            var sender = {
                                series: { field: kendoChart.options.series[seriesIndex].field },
                                dataItem: dataItem
                            };
                            OnClientSeriesClicked(sender);
                        }
                    });
                }
            }
        }
    }, 1000);
}

Explanation

• Tabindex: By setting tabindex="0", the SVG path elements become focusable, allowing for navigation through chart bars using the Tab key.
• Keydown Event: The keydown event listener on each bar checks for the Enter key press (e.key === 'Enter').
• Simulate Click: Upon detecting the Enter key press, the code constructs a sender object, mimicking the one during a mouse click, and invokes the OnClientSeriesClicked function.

Implementing this solution will make the RadHtmlChart series not only focusable but also clickable via the Enter key, enhancing accessibility in compliance with WCAG 2.1 guidelines.

See Also

• RadHtmlChart Documentation
• Keyboard Accessibility in Web Applications