Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 03 Sep 2019 16:13 by ADMIN
Release R3 2019
Sunil Sutar
Created on: 28 May 2019 17:18
Category: TabStrip
Type: Bug Report
1
aria-level attribute value should never be 0

Hi Telerik team,

 

Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -

PracticeFunction (example)
Ensure ARIA roles, states, and properties are validLI has an aria-level attribute of 0, which is not an integer value greater than, or equal to, 1

 

Example: visit https://demos.telerik.com/aspnet-ajax/tabstrip/examples/wai-aria-support/defaultcs.aspx 

 

Observe the ul-li elements created for tabstrip. On each li element, there is aria-level attribute whose value is set to 0.

As per WCAG this value should start from 1. The value 0 is invalid. Refer: https://www.w3.org/TR/WCAG20-TECHS/ARIA12.html

 

Please let me know when are you going to fix this for compliance. 

--

Sunil

2 comments
ADMIN
Rumen
Posted on: 14 Aug 2019 11:54

Hi Sunil,

We just released the Latest Internal Build 2019.2.814 of the suite with a fix for this issue.

You can check the release notes at https://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp-net-ajax-2019-2-814-(nightly-build-2019-08-14) as well as download the Telerik_UI_for_ASP.NET_AJAX_2019_2_814_Dev_hotfix.zip installation from https://www.telerik.com/account/product-download?product=RCAJAX to test the fix.


Best Regards,
Rumen
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.
ADMIN
Peter Milchev
Posted on: 29 May 2019 08:55
Hello Sunil,

Thank you for reporting this behavior and providing the details. 

I am converting this thread to a public Feedback portal item which you can follow for any progress on it and in which release a fix will be included. 

Meanwhile, the following overwrites can be used: 

<script>
    var $T = Telerik.Web.UI;
    $T.RadTabStrip.prototype._applyAriaAttributesToChildren = function () {
        var tabs = this.get_allTabs();
        var tab;
        var attr;
 
        for (var i = 0, l = tabs.length; i < l; i++) {
            tab = tabs[i];
 
            attr = {
                "role": "tab",
                "aria-disabled": !tab.get_enabled(),
                //https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-level
                // The value for aria-level is an integer greater than or equal to 1.
                "aria-level": tab.get_level() + 1
            };
 
            if (tab.get_pageView()) {
                attr["aria-controls"] = tab.get_pageView().get_id();
            }
 
            $(tab.get_element()).attr(attr);
        }
    }
 
    // used for Lightweight render mode
    $T.RadTab.Views.Lite.prototype._renderTab = function (html) {
        var tab = this._owner;
 
        html[html.length] = "<li class='";
        html[html.length] = tab._getElementCssClass();
 
        if (tab.get_tabStrip().get_enableAriaSupport()) {
            // The value for aria-level is an integer greater than or equal to 1.
            html[html.length] = "' role='tab' aria-level='" + tab.get_level() + 1 + "' aria-disabled='" + !tab.get_enabled() + "'>";
        } else {
            html[html.length] = "'>";
        }
 
        if (tab.get_navigateUrl()) {
            tab._renderLink(html);
        } else {
            this._renderSpan(html);
        }
 
        html[html.length] = "</li>";
    }
 
    // used for Classic render mode
    //$T.RadTab.Views.Classic.prototype._renderTab = function (html) {
    //    var tab = this._owner;
 
    //    html[html.length] = "<li class='rtsLI";
 
    //    if (tab.get_isFirst())
    //        html[html.length] = " rtsFirst";
 
    //    if (tab.get_isLast())
    //        html[html.length] = " rtsLast";
 
    //    if (tab.get_tabStrip().get_enableAriaSupport()) {
    //        //https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-level
    //        // The value for aria-level is an integer greater than or equal to 1.
    //        html[html.length] = "' role='tab' aria-level='" + tab.get_level() + 1 + "' aria-disabled='" + !tab.get_enabled() + "'>";
    //    } else {
    //        html[html.length] = "'>";
    //    }
 
    //    tab._renderLink(html);
 
    //    html[html.length] = "</li>";
    //}
</script>

As a token of gratitude, I have also updated your Telerik points.

Regards,
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.
Create an account Log In
View
Type
Status
Category