允许屏幕 reader 读取 Kendo UI 图表数据
Allowing screen reader to read Kendo UI Chart data
我正在开发的网站需要遵守 WCAG 2.0 guidelines,这意味着人们应该能够使用屏幕 reader 访问网站上的所有信息。由于它是一个大量使用 Kendo 图表的 BI 仪表板,因此未通过测试。
我需要一种方法让屏幕 reader 能够读取我网站上的 Kendo 图表,同时重用图表的数据源。
我通过为页面上的每个图表自动生成 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")
)
)
结果
我正在开发的网站需要遵守 WCAG 2.0 guidelines,这意味着人们应该能够使用屏幕 reader 访问网站上的所有信息。由于它是一个大量使用 Kendo 图表的 BI 仪表板,因此未通过测试。
我需要一种方法让屏幕 reader 能够读取我网站上的 Kendo 图表,同时重用图表的数据源。
我通过为页面上的每个图表自动生成 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")
)
)
结果