WCAG Errors with kendoNumericTextBox

2 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 09 Oct 2015 Link to this post

    Using HTML_CodeSniffer, I'm getting lots of errors for the kendoNumericTextBox because there are text fields (input type=text) that do not have an associated label (using label for).  The errors are (for each added textbox):

    • This text input element does not have a name available to an accessibility API. Valid names are: label element, title attribute.
    • This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.

    Note, NumericTextBox passes the 508, but fails at the next level, WCAG 2 A. We're targeting WCAG 2 AA, so this is clearly a fail for us.

    I also tried against the demos and get the same error.

    ​How can I get Kendo to render in such a way as to pass WCAG?

  2. Answer
    Georgi Krustev
    Georgi Krustev avatar
    3747 posts

    Posted 14 Oct 2015 Link to this post

    Hello Ed,

    Indeed, the NumericTextBox renders a second input element just for presentation purposes (keeps the formatted value) and it is not labelled. What we can do in some of our next releases is to add aria-title attribute to the element. I logged the enhancement request here (you can track the state there).

    For now you can decorate the elements manually in order to pass the test. Check this Dojo demo:
    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