Kendo Ui Grid Web Accessibility for Button例如Excel导出

Question

由于某些网络可访问性问题，如何将网格按钮的图标设置为aria-hidden =“ true”

$("#grid").kendoGrid({
    toolbar: ["excel"],
    excel: {
        allPages: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/products",
                dataType: "jsonp"
            }
        },
        pageSize: 10
    },
    pageable: true
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    
    <div id="grid"></div>

当前html：

<div class="k-header k-grid-toolbar"><a role="button" class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-file-excel"></span>Export to excel</a></div>

所需结果：

<div class="k-header k-grid-toolbar"><a role="button" class="k-button k-button-icontext k-grid-excel" href="#"><span aria-hidden="true" class="k-icon k-i-file-excel"></span>Export to excel</a></div>

Answer 1

图标的类别为k-i-file-excel。使用该类选择元素并设置属性：

$("#grid .k-i-file-excel").attr("aria-hidden","true");

Answer 2

您无需执行任何操作。

使用键盘和屏幕阅读器测试您的应用程序。由于您没有修改标签索引，因此外部<a>标签将获得焦点（并且应正确声明为“导出为ex​​cel”），否则将不会。您的用户将知道该按钮的用途。