Scheduler Accessibility

4 posts, 0 answers
  1. Simon
    Simon avatar
    2 posts
    Member since:
    Aug 2020

    Posted 26 Aug 2020 Link to this post

    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?

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 31 Aug 2020 Link to this post

    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:

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Simon
    Simon avatar
    2 posts
    Member since:
    Aug 2020

    Posted 23 Sep 2020 in reply to Peter Milchev Link to this post

     

    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

     

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 15 Oct 2020 Link to this post

    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:

    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.

    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:

    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:

    Regards,
    Peter Milchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top