In Development
Last Updated: 14 Aug 2019 11:54 by ADMIN
Created by: Sunil Sutar
Comments: 2
Category: TabStrip
Type: Bug Report
1

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

In Development
Last Updated: 14 Aug 2019 11:53 by ADMIN

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

 
Practice Function (example)
Ensure sub-lists are marked up properly This UL should only contain li elements (without an ARIA-assigned role), script elements (without an ARIA-assigned role) or template elements (without an ARIA-assigned role); or
 
elements with a role=listitem attribute; as direct child elements

 

Example: When Telerik Tabstrip has EnableAriaSupport=true, internally tabstrip is combination of ul-li with css to display the Tabs properly -

The html looks like as follows -  

<ul class="rtsUL">
    <li class="rtsLI rtsFirst" role="tab" aria-disabled="false" aria-level="0" aria-controls="LayoutPageView">
        <a accesskey="L" title="Layout" class="rtsLink rtsBefore" id="LayoutTab" href="#"><span class="rtsOut">
            <span class="rtsIn">
                <span class="rtsTxt">
                    <h2 class="RadTabStrip RadTabStrip_Default"><u>L</u>ayout</h2>
                </span>
            </span>
        </span>
        </a>
    </li>
    <li class="rtsLI" role="tab" aria-disabled="false" aria-level="0" aria-controls="SearchPageView" aria-selected="true" id="SearchTabStrip_active_tab">
        <a accesskey="S" title="Search" class="rtsLink rtsSelected" id="SearchTab" href="#">
            <span class="rtsOut">
                <span class="rtsIn">
                    <span class="rtsTxt">
                        <h2 class="RadTabStrip RadTabStrip_Default"><u>S</u>earch</h2>
                    </span>
                </span>
            </span>
        </a>
    </li>
    <li class="rtsLI rtsLast" role="tab" aria-disabled="false" aria-level="0" aria-controls="ResultsPageView">
        <a accesskey="R" title="Statewide Search Results 0 records" class="rtsLink rtsAfter" id="ResultsTab" href="#">
            <span class="rtsOut">
                <span class="rtsIn">
                    <span class="rtsTxt">
                        <h2 class="RadTabStrip RadTabStrip_Default">Statewide Search<u>R</u>esults (0)</h2>
                    </span>
                </span>
            </span>
        </a>
    </li>
</ul>


Observe the aria attributes which are on li elements. Is that really necessary considering the compliance? (as mentioned in practice and example).

 

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

--

Sunil