Last Updated: 04 Sep 2020 12:00 by ADMIN
Scheduled for R3 2020 SP1
Created on: 10 Oct 2019 19:59
Category: TabStrip
Type: Bug Report
Role="tab" does not support aria-level attribute

Accessibility Insights is reporting invalid markup on all tabs in the TabList.

When consulting the online aria specifications I see that elements with role="tablist" support aria-level="#" where number is > 0.  ( However, elements with role="tab" do not. (

If possible, we would like to see the aria-level tag moved to the correct page elements in the next release. (Thanks for correcting the aria-level="0" problem previously.) 

I believe this may be the compliance issue Sunil was reporting previously here:

1 comment
Peter Milchev
Posted on: 17 Oct 2019 08:39

Thank you for reporting this, Jeff,

The following script can be used as a temporary workaround until the issue is fixed in the source code: 

Telerik.Web.UI.RadTabStrip.prototype._applyAriaAttributesToChildren = function () {
    var $ = $ || $telerik.$;
    var tabs = this.get_allTabs();
    var tab;
    var attr;

    for (var i = 0, l = tabs.length; i < l; i++) {
        tab = tabs[i];
        var arialevel = tab.get_level() + 1;

        attr = {
            "role": "tab",
            "aria-disabled": !tab.get_enabled(),
            //"aria-level": tab.get_level() + 1

        if (tab.get_pageView()) {
            attr["aria-controls"] = tab.get_pageView().get_id();


        $(tab.get_element()).closest("ul.rtsUL").attr("aria-level", arialevel.toString())


Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.