Setting "aria-label" on DatePicker and DateTimePicker Calendar/Clock icons

3 posts, 0 answers
  1. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 12 Feb 2016 Link to this post

    How can I specify the text to be displayed in JAWS for the icons in DatePicker and DateTimePicker?

    By default, when I use JAWS to look at the elements of the screen, the following is displayed for DatePickers and DateTimePickers:


      Hire Date Edit MM/DD/YYYY
      select Button


      Shift Start Edit MM/DD/YYYY H:M t
      select Button
    select Button

    These "select Button" entries correspond to the calendar icon (for both) and  the clock icon (for DateTimePicker). 

    When I have multiple buttons on the screen (or even when it's a DateTimePicker), there are multiple entries that say "select Button" and the user doesn't know what they are.  I'd like to set them so that they'd say something like the following:


      Hire Date Edit MM/DD/YYYY
      Set Hire Date Button


      Shift Start Edit MM/DD/YYYY H:M t
      Set Shift Start Date Button
      Set Shift Start Time Button

     I can do this by manually adding the "aria-label" attribute to the appropriate span ("k-icon k-i-calendar" for the calendar, "k-icon k-i-clock" for the clock) when debugging (e.g., F12), but can't seem to figure out how to do it on the control itself in code.  Here's how I have the controls defined: 

    01./* HTML Body */
    03.<input id="hireDatePicker" aria-label="@UserInterface.NewHire_HireDatePicker_Text" />
    04.<input id="shiftStartDateTimePicker" aria-label="@UserInterface.NewHire_ShiftStartDateTimePicker_Text" />
    06./* $(document).ready(function () */
    09.  value:new Date(),
    10.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
    14.  value:new Date(),
    15.  interval:60,
    16.  change: startDateTimeChange,
    17.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"

  2. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 12 Feb 2016 in reply to Matt Link to this post

    Alright...progress, but I'm still left curious as to whether there's an easier way.

    I'm able to add the "aria-label" attribute to the span that contains the calendar and clock icons, but it still doesn't appear in JAWS.  

    $('#dateTimeSearchPadding span span span span.k-i-calendar').attr("aria-label", "Set Hire Date");

    Why?  Because of "select" between the <span ...></span> tags:

    <span class="k-icon k-i-calendar" aria-label="Set Hire Date" unselectable="on">select</span>

    So, I switched gears and figured out how to change the text, which I did via the following (I have a <div> around my DatePickers and DateTimePickers).

    $('#dateTimeSearchPadding span span span span.k-i-calendar').html("Set Hire Date");

    While this works for what I need, I'm left wondering if there's something accessible via the DatePicker and DateTimePicker widgets:  Is there or are we required to jump through hoops such as this for getting into the guts of these controls?

  3. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 16 Feb 2016 Link to this post

    Hello Matt,

    Indeed, the widget does not expose a way to control the content of the toggle buttons. The only way to change that test is to use jQuery, like you did.

    I logged an enhancement task in our product back log that will allow you to control the text too:
    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top