允许屏幕 reader 读取 Kendo UI 图表数据

Question

我正在开发的网站需要遵守 WCAG 2.0 guidelines，这意味着人们应该能够使用屏幕 reader 访问网站上的所有信息。由于它是一个大量使用 Kendo 图表的 BI 仪表板，因此未通过测试。

我需要一种方法让屏幕 reader 能够读取我网站上的 Kendo 图表，同时重用图表的数据源。

Answer 1

我通过为页面上的每个图表自动生成 table 解决了这个问题。

创建生成 HTML table

的部分视图

@{
    var divId = Guid.NewGuid().ToString();
    var tableId = Guid.NewGuid().ToString();
    var templateId = Guid.NewGuid().ToString();
}
/* Chart ID */
@model string

<div id="@divId" class="hiddenTable"></div>

<script>
    (function () {
        var template = kendo.template($("#@templateId").html());
        var chartData = $("#@Model").data("kendoChart").dataSource;
        $("#@divId").prepend(template(chartData.data()));
    })();
</script>

<script id="@templateId" type="text/x-kendo-tmpl">
    # var columnNames = Chart.getColumnNamesFromData(data) #
    <table id="@tableId">
        <thead>
            <tr>
                # for(var columnIndex = 0; columnIndex < columnNames.length; columnIndex++) { #
                    <th scope="col">#= S(columnNames[columnIndex]).humanize().s #</th>
                # } #
            </tr>
        </thead>
        <tbody>
            # for(var i = 0, len = data.length; i < len; i++) { #
                # if (data[i][columnNames[0]] != undefined) { #
                    <tr>
                        # for(var columnIndex = 0; columnIndex < columnNames.length; columnIndex++) { #
                            # if(columnNames[columnIndex] == 'Date') { #
                                <th scope="row">#= kendo.toString(data[i][columnNames[columnIndex]], "MMMM yyyy") #</th>
                            #} else { #
                                <td>#= kendo.toString(data[i][columnNames[columnIndex]] != undefined ? data[i][columnNames[columnIndex]] : 0, "n1") #</td>
                            # } #
                        # } #
                    </tr>
                # } #
            # } #
        </tbody>
  </table>
</script>

添加 CSS 从视图中隐藏 table

.hiddenTable {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

将 img 角色添加到图表

@(Html.Kendo().Chart<MyModel>()
    .Name(Guid.NewGuid().ToString())
    .HtmlAttributes(new { role = "img" })
    .DataSource(ds => ds
        .Read("GetData", "Home")
    )
)

结果

允许屏幕 reader 读取 Kendo UI 图表数据

Allowing screen reader to read Kendo UI Chart data

c#

.net

kendo-ui

screen-readers

wcag