ASP.NET MVC中如何为Kendo Grid添加summary等无障碍属性适配屏幕阅读器

方法1：使用内置TableHtmlAttributes（推荐，适用于Kendo UI R1 2023及以上版本） #

Kendo UI MVC Grid 提供了专门给内部<table>标签添加自定义属性的TableHtmlAttributes配置，直接在Grid链式调用中添加即可：

@using (Html.BeginForm())
{
    <div class="form-inline">
        <br />
        @(Html.Kendo().Grid<Models.ViewModel>()
            .Name("name")
            .Columns(columns =>
            {
                columns.Bound(c => c.c1);
                columns.Bound(c => c.c2);
                columns.Bound(c => c.c3);
                columns.Bound(c => c.c4);
                columns.Bound(c => c.c5);
            })
            .Sortable()
            .Resizable(resize => resize.Columns(true))
            .Navigatable()
            // 新增这一行给table标签添加summary属性
            .TableHtmlAttributes(new { summary = "Summary of contents of the table" })
            // 也可同时添加其他无障碍属性，C#匿名类的下划线会自动转为属性名的横杠
            // .TableHtmlAttributes(new { summary = "表格内容说明", aria_label = "地址查询表格" })
            .DataSource(ds => ds
                .Ajax()
                .Read(read => read.Action("ReadAddress", "Home"))
            )
        )
    </div>
}

方法2：低版本Kendo UI 用DataBound事件动态添加 #

如果你的Kendo UI版本低于R1 2023，没有内置TableHtmlAttributes方法，可以通过Grid的DataBound客户端事件给生成的table标签添加属性：
首先修改Grid的配置，绑定DataBound事件：

@(Html.Kendo().Grid<Models.ViewModel>()
    .Name("name")
    .Columns(columns =>
    {
        columns.Bound(c => c.c1);
        columns.Bound(c => c.c2);
        columns.Bound(c => c.c3);
        columns.Bound(c => c.c4);
        columns.Bound(c => c.c5);
    })
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .Navigatable()
    // 绑定DataBound事件
    .Events(e => e.DataBound("onGridDataBound"))
    .DataSource(ds => ds
        .Ajax()
        .Read(read => read.Action("ReadAddress", "Home"))
    )
)

然后添加对应的JS脚本：

function onGridDataBound(e) {
    // 获取生成的table元素，添加summary属性
    $(e.sender.table).attr("summary", "Summary of contents of the table");
    // 可额外添加其他无障碍属性
    // $(e.sender.table).attr("aria-label", "地址查询表格");
}

无障碍优化建议 #

• HTML5标准中已经不推荐使用summary属性，更建议使用aria-label属性直接描述表格用途，或者添加<caption>元素展示表格标题，屏幕阅读器的适配效果更好。
• 可以同时给表格的列头添加语义化的scope属性，进一步提升无障碍适配度。

内容的提问来源于stack exchange，提问作者Uma