How To Make Screen Readers Read Either Label Or Title Of A DropDownList

Environment

Product

Progress® Kendo UI® DropDownList for jQuery

Description

There are several widgets (DropDownList, ComboBox, MultiSelect, NumericTextBox) which need to be placed inside a label element, as described in Label Element Support help section. Still JAWS, NVDA and ChromeVox read different things, depending with which browser they are used. Some prefer reading a label, others prefer reading a title attribute instead.

How can I make Screen Readers read label or title of a Kendo UI DropDownList?

Solution

You could add a title attribute which holds the text from the label. JAWS and NVDA would read the title, while ChromeVox reads the label.

  <label>
    Amount:   
  </label>
  <input id="dropdownlist" title=" Title Amount"/>

  <script>
    $(function() {
        $("#dropdownlist").kendoDropDownList();
    });
  </script>