如何自定义KendoUI表格向导控件的aria-label以修复无障碍问题

开发者阿泽

2026-8-15

解决KendoUI表格向导下拉框aria-label自定义问题

可行，你可以通过监听表格向导的open事件，定位到宽度和高度对应的下拉框元素，手动修改它们的aria-label属性，具体实现步骤如下：

绑定表格向导的open事件
在初始化Kendo编辑器的表格向导时，通过tableWizard配置项绑定open事件，示例代码如下：

$("#editor").kendoEditor({
  tools: ["createTable"],
  tableWizard: {
    open: function(e) {
      // 在这里修改aria-label
    }
  }
});

定位目标下拉框并修改属性
在open事件回调里，通过默认类名找到宽度和高度的单位下拉框，修改容器及选项的aria-label：

open: function(e) {
  // 处理宽度单位下拉框
  const widthUnitDropdown = $(".k-table-wizard-width .k-dropdown").data("kendoDropDownList");
  if (widthUnitDropdown) {
    widthUnitDropdown.wrapper.attr("aria-label", "Width units px");
    widthUnitDropdown.items().each(function() {
      $(this).attr("aria-label", `Width units ${$(this).text()}`);
    });
  }

  // 处理高度单位下拉框
  const heightUnitDropdown = $(".k-table-wizard-height .k-dropdown").data("kendoDropDownList");
  if (heightUnitDropdown) {
    heightUnitDropdown.wrapper.attr("aria-label", "Height units px");
    heightUnitDropdown.items().each(function() {
      $(this).attr("aria-label", `Height units ${$(this).text()}`);
    });
  }
}