kendoGridDetailTemplate WCAG

[Edzel]

I'm having trouble setting an aria-label on my kendo grid detail template.  The tools I'm using for testing are saying that 'links must have discernible text (see screenshot).

 

Our grid template contains another grid, which works fine, and looks something like this:

<kendo-grid>

     /// Other columns

     <div *kendoGridDetailTemplate="let dataItem"

           <other-grid-component></other-grid-component>

     </div>

</kendo-grid>

 

 

I've tried setting the aria-label and title attribute on the div but it's not working, I couldn't find any specific documentation on this.  Can anyone advise?

 

Cheers,

Joe

[Svet]

Hi Joe,

Thank you for the provided details.

I will provide some general information on this case.

Kendo UI for Angular follows the main principles in terms of providing accessibility for all our components. Indeed, section 508, WCAG 2.1, and WAI-ARIA requirements are closely followed when developing the components.

However, the different browsers and readers implement their own standards and sometimes don't conform to the official WAI-ARIA spec at times. Thus when testing accessibility we focus on the most wide spread screen readers. Currently according to popular statistic these are JAWS and NVDA. Please check the following article demonstrating some usage data for the most popular screen readers:

https://webaim.org/projects/screenreadersurvey7/

To sum up. The issue seems to be caused by the specific requirements of the used tool as our components conform to section 508, WCAG 2.1, and WAI-ARIA requirements.

From the provided screenshot it seems that the <a> elements used to represent the expand/collapse icons are targeted by the reported 'links must have discernible text' error. If that is the case such error can be disregarded as the <a> tag has a title attribute which is read by the screen readers:

<a class="k-icon k-plus" href="#" tabindex="-1" ng-reflect-klass="k-icon" ng-reflect-ng-class="k-plus" title="Expand Details"></a>

Here is an example demonstrating a master details Grid:

https://stackblitz.com/edit/angular-3evzvg?file=app/app.component.ts

As the demonstrated <a> tag from the screenshot differs from the one rendered by the Grid in the above example (it misses the title attribute), I would suggest to make sure that the latest version 4.6.3 of the Grid is used:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

That will ensure benefiting from the latest bug fixes and newest released features. I hope the provided information helps.

Regards,
Svetlin
Progress Telerik