Last Updated: 19 Aug 2022 13:36 by ADMIN
Created on: 12 Aug 2022 19:44
Category: Kendo UI for jQuery
Type: Bug Report
Screen Reader Announces the Incorrect information when Focus is on 'Spin Button'.

Issue Description:

Screen reader user will get confused if incorrect narration is provided on the controls.

Test Environment:

OS : Windows 10
Version: 2004(OS Build 21292.1)
Browser : Anaheim Dev (Version 89.0.760.0 (Official build) (64-bit))

Screen reader: Narrator.

Repro steps:

1. Open the above-mentioned URL in browser there's example code for the Numeric text box feature.
2. Now, navigate to the 'Open in Dojo' and via tab key and run the program.
3. Now move the focus to the Text box. 
4.Verify whether the Narrator announce min 0 and max 0.


Actual Results:

Screen reader announces the incorrect information as "Min 0 and Max 0" when the focus lands on "from" or "to" spin button's. Currently min and max both the value's are announced as 0.

Expected results:

Screen reader should announces the relevant information when focus is on 'From' or 'to' spin button. It should be announced "Min value as 0" and "max value as per design"

Additional Notes:

1. Same when focus first lands on the opened dialog after activating build button it is announced as table which is incorrect.

2. Same issue observed with every spin button and dropdown controls.


1 comment
Posted on: 19 Aug 2022 13:36


Thank you for your feedback and providing a video of the observed behavior.

Kendo UI for jQuery NumericTextBox applies the WAI-ARIA pattern for Spinbutton. When a spinbutton should have min and max values, they are available for screen readers by setting aria attributes as follows:

  • The spinbutton element has the aria-valuemin property set to a decimal value representing the minimum allowed value of the spinbutton if it has a known minimum value.
  • The spinbutton element has the aria-valuemax property set to a decimal value representing the maximum allowed value of the spinbutton if it has a known maximum value.

When min and max properties for a NumericTextBox are set, then aria-valuemin and aria-value max are applied to the component and they are read by Narrator - Dojo snippet with NumericTextBox without and with min and max. When there is no min and max range for a NumericTextBox, these attributes are not set and they should not be read by Narrator. Reading them as 0 by Narrator, when there are no such attributes is a Narrator issue. This may be verified also by following the Spinbutton pattern example. Click on the Open in CodePen button on the example and then remove the aria-valuemin="1" and aria-valuemax="31" for the Day spinbutton and wait for it to load the updated example. As a result when the Day splitbutton is clicked, Narrator reads "minimum 0 and maximum 0" as on the video.

I hope this is helpful.

Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.