Scheduler Accessibility

[Simon]

I work for Local Government in the UK. I'm trying to make our web site accessible in time for the UK Government's upcoming deadline of September 2020 for Level AA compliance.

This Scheduler accessibility page states it is Level AA compliant:

https://demos.telerik.com/aspnet-ajax/scheduler/examples/accessibility/defaultvb.aspx

But I'm getting the following 3 failures, which your demo page above also fails on:

 

• Each a element must contain text or an img with an alt attribute. WCAG 2.1 A F89, Section 508 (2017) A F89
• Identify row and column headers in data tables using th elements, and mark layout tables with role=presentation. WCAG 2.1 A F91, Section 508 (2017) A F91
• This page uses nested tables, which do not make sense when read in a screen reader. WCAG 2.1 A F49, Section 508 (2017) A F49

I'm using the latest 617 release. Am I missing something?

[Peter Milchev]

Hello Simon,

I am afraid that the Scheduler is currently optimized to add all the needed aria attributes and we have a feature request for that:

• https://feedback.telerik.com/aspnet-ajax/1429743-add-aria-attributes-to-allow-keyboard-navigation-in-radscheduler-and-proper-announcement-with-jaws

What I can suggest is guidance on how to add certain aria attributes to the needed elements. You can share your markup here or in a private support thread where we can check your setup and provide more accurate and specific suggestions.

Once we have a working solution, we can share it here for convenience and better visibility from the community.

Regards,
Peter Milchev
Progress Telerik

[Simon]

 

My code is not different from the Demo provided. If you can show us how to make the changes that you talk about on the Demo code that would be great:

https://demos.telerik.com/aspnet-ajax/scheduler/examples/accessibility/defaultvb.aspx

 

[Peter Milchev]

Hello Simon,

The empty header cells can be easily fixed by setting the TimeLabelRowSpan property to 1, instead of the default 2. If you need to keep the same appearance, you can use the following style in addition:

<telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1"
    Height="600px" SelectedDate="2012-04-16" Font-Size="14px" AccessKey="F" TabIndex="1"
    DayStartTime="08:00:00" DayEndTime="18:00:00" OverflowBehavior="Auto" TimeLabelRowSpan="1">
    <AdvancedForm Modal="true" />
</telerik:RadScheduler>
<style>
    .RadScheduler .rsVerticalHeaderTable tr:nth-child(2n) {
        color: transparent;
    }
</style>

Then, you can enable the aria support for the embedded Calendar control:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/how-to/access-the-embedded-radcalendar-on-the-server 

protected void RadScheduler1_PreRender(object sender, EventArgs e)
{
    RadCalendar popupCalendar = RadScheduler1.FindControl("SelectedDateCalendar") as RadCalendar;
    popupCalendar.EnableAriaSupport = true;
}

 

Regarding all the other settings, I am afraid that you would need to inspect the generated elements and add the needed attributes.

• Inspect the Generated HTML of a Control
• See the Applied Styles

Then, you might need to probably override or create a custom keyboard navigation if you want to set attributes dynamically. You can see the original one if you download the source code from here:

• Telerik_UI_for_ASP.NET_AJAX_2020_3_915_Source.zip - https://www.telerik.com/account/product-download?product=RCAJAX 

Then, you can navigate to this file where the original navigation is. Once you obtain it, you can create your own navigation and just add the code that would set the needed attributes and remove the unnecessary ones:

• \Telerik.Web.UI\Scheduler\KeyboardNavigation\KeyboardNavigation.js 

Once you update your custom navigation and register it, you can override the _initializeKeyboardNavigation method and initialize your own navigation by placing the following script under the script manager:

Telerik.Web.UI.RadScheduler.prototype._initializeKeyboardNavigation = function () {
    var $element = $telerik.$(this.get_element());
    var $T = Telerik.Web.UI;

    if ($element.attr("tabIndex") >= 0 || $element.attr("accessKey") != undefined) {
        // initialize here your custom navigation.
        this._navigator = new $T.Scheduler.KeyboardNavigation(this);

        this._onKeyboardEventNavigationDelegate = Function.createDelegate(this, this._onKeyboardEventNavigation);
        $telerik.addHandler(this.get_element(), "keydown", this._onKeyboardEventNavigationDelegate);
    }
}

 

An alternative to all that, I can suggest checking the Kendo UI Scheduler widget which is an entirely client-side widget and is AAA compliant:

• https://demos.telerik.com/kendo-ui/scheduler/index
• https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/overview 
• https://docs.telerik.com/kendo-ui/accessibility/section-508-wcag 
• https://docs.telerik.com/kendo-ui/accessibility/wai-aria-support-in-kendo 

Regards,
Peter Milchev
Progress Telerik