New to Kendo UI for jQueryStart a free 30-day trial

Make MultiSelect Placeholder Accessible

Environment

ProductProgress® Kendo UI® MultiSelect for jQuery
Product VersionCreated with the 2019.1.220 version

Description

How to make the MultiSelect placeholder accessible to screen readers?

Solution

Use the text change event of the MultiSelect as demonstrated below.

  <input type="text" placeholder="test placeholder" />

  <select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option>Item4</option>
  </select>

  <script>
    function togglePlaceholderAria(multi) {
      if(!multi.value().length && multi.options.placeholder) {
        multi.input.attr("aria-label", multi.options.placeholder);
      } else {
        multi.input.attr("aria-label", "");
      }
    };

    $(document).ready(function () {
      var multi = $("#multiselect").kendoMultiSelect({
        placeholder: "Select CustomerID...",
        change: function(e) {
          togglePlaceholderAria(e.sender);
        }
      }).getKendoMultiSelect();

      togglePlaceholderAria(multi);
    });
  </script>

See Also