Позволяет программе чтения с экрана считывать данные Kendo UI Chart

Question

Веб-сайт, который я разрабатываю, должен соответствовать рекомендациям WCAG 2.0, а это означает, что человек должен иметь возможность доступа ко всей информации на сайте с помощью программы чтения с экрана. Поскольку это инструментальная панель BI, интенсивно использующая графики кендо, она не прошла тест.

Мне нужен способ, чтобы программы чтения с экрана могли читать таблицы кендо на моем веб-сайте, одновременно используя источник данных диаграммы.

Answer 1

Я решил это, автоматически генерируя таблицу для каждого графика на странице.

Создать частичное представление, которое генерирует таблицу HTML

@{
    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, чтобы скрыть таблицу от просмотра

.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")
    )
)

Результат