Scheduler not WCAG A compliant?

[Edzel]

I noticed that the scheduler is supposed to be WCAG AAA compliant, however when i ran a scan on my page that has a scheduler on it, it returned 3 errors to me (for A compliance). I thought it was my fault, but i decided to try and run it on the demo the WCAG page links to (https://demos.telerik.com/kendo-ui/scheduler/index) and found the same 3 errors within the scheduler.

The scanner i used is: http://squizlabs.github.io/HTML_CodeSniffer/

Am I missing something obvious? Is the scanner wrong? Am i doing something wrong?

[Veselin Tsvetanov]

Hi Hans,

Thank you for the reported issues.

First, I would like to mention, that the Scheduler widget has been tested for its WCAG A and AA compliance with the WAVE validator tool. You will notice, that WAVE does not identify the below elements to violate the guidelines. The issues observed while testing with the HTML Codesniffer are the following:

"This element has a role of "button" but does not have a name available to an accessibility API. Valid names are: element content." (observed twice). Following the WAI-ARIA practices examples, the <a> element with role="button" does not have a name attribute. An aria-label attribute is used to pass additional information about the action purpose:

<a role="button" href="#" class="k-link" title="Previous" aria-label="Previous">...</a>

"The relationship between td elements and their associated th elements is not defined. Use either the scope attribute on th elements, or the headers attribute on td elements.". This concerns the following <table> element rendered in the Scheduler layout:

<table class="k-scheduler-layout k-scheduler-workWeekview k-scrollbar-v">
   <tbody>
      <tr>
         <td>
            <div class="k-scheduler-times">
              ........
            </div>
         </td>
         <td>
            <div class="k-scheduler-header k-state-default" style="padding-right: 16px;">
              ......
            </div>
         </td>
      </tr>
      <tr>
         <td>
            <div class="k-scheduler-times" style="height: 359px;">
               .........
            </div>
         </td>
         <td>
            <div class="k-scheduler-content" style="height: 359px;">
               .......
            </div>
         </td>
      </tr>
   </tbody>
</table>

As you can see, the above table does not contain any <th> elements at all. Therefore, no relationship between <th> and <td> elements could be established.

Moreover, when testing the two cases as isolated samples (test runner here), the HTML Codesniffer does not report those violations at all. The source Dojo is available here.

We will now proceed with the verification of the above two cases. If the current implementation proves to be a violation of the WCAG Guidelines, we will introduce the required changes.

Regards,
Veselin Tsvetanov
Progress Telerik