Kendo Sortable组件ARIA属性不支持/禁用可访问性问题求助

数据老陈

2026-6-19

解决Kendo Sortable组件的ARIA可访问性警告问题

问题根源

WAI-ARIA规范中，role="listitem"的元素并不支持aria-disabled属性，Kendo Sortable动态生成的div元素同时包含这两个属性，触发了Siteimprove的检测警告。

可行解决方案

自定义禁用状态的样式与行为
放弃依赖Kendo自动添加的aria-disabled，手动通过CSS实现禁用视觉反馈，同时通过JavaScript阻止排序交互：

// 初始化Sortable时禁用指定项并自定义处理
$("#sortable").kendoSortable({
  filter: ".sortable-item",
  disable: ".disabled-item",
  init: function(e) {
    $(".disabled-item").each(function() {
      $(this).attr("role", "listitem") // 保留正确角色
             .css("opacity", 0.6) // 视觉禁用样式
             .off("mousedown touchstart"); // 阻止交互
    });
  }
});

拦截并移除违规属性
在Sortable初始化完成后，监听DOM变更，移除自动添加的aria-disabled属性：

$("#sortable").kendoSortable({
  // 你的Sortable配置项
}).data("kendoSortable").bind("change", function(e) {
  // 每次排序后检查并移除违规属性
  $("div[role='listitem'][aria-disabled]").removeAttr("aria-disabled");
});

// 初始化后立即处理一次现有元素
$("div[role='listitem'][aria-disabled]").removeAttr("aria-disabled");

改用原生语义化元素
将Sortable的容器改为<ul>，子项改用<li>元素。原生<li>属于列表项语义，无需手动设置role="listitem"，且可通过disabled属性结合CSS实现禁用状态，从根源避免ARIA属性冲突：
```
<ul id="sortable">
  <li class="sortable-item">Item 1</li>
  <li class="sortable-item disabled-item">Item 2 (Disabled)</li>
</ul>
```