DropDownList: The "for" reference of labels is marked invalid by accessibility testing tools

[Michael]

Hi,
I use the kend dropdownlist with a attached kendo-label. However the "for" reference of the label is marked as invalid (at least by "AInspector" and "WAVE" Accessibility testing tools). 

Please see attached screen shots, where I tested against the first example from the kendo docs
( https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdownlist/basic_usage?theme=default-ocean-blue-a11y )

DOM inspection of the example shows, that the label properly references the dropdownlist, also the aria-labelledby reference is correct:

<kendo-label text="Find restaurants in your area" dir="ltr"><!---->
  <label for="k-9997b5c1-2233-4273-ba25-6e344c093c3d" id="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
  Find restaurants in your area<!----></label>
      <kendo-dropdownlist ... 
                      aria-describedby="k-80ee2bb7-41d8-4c8b-9afc-08898b371395"
                      id="k-9997b5c1-2233-4273-ba25-6e344c093c3d" ... aria-labelledby="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
          <button ...>...</button>
            ...       

The problem could be, that the label references the <kendo-dropdownlist> tag itself, not the included button or other included elements.

According to HTML documentation , only "labelable elements" can be referenced by the "for" reference of a label (e.g. button, input, see labelable elements ).

My question is, how to deal with it, and how to explain the warnings to our customers...

Thank you in advance!

[Zornitsa]

Hi Michael,

Thank you for the details provided.

After discussing the matter with a developer on our team, I can confirm that the observed warning from AInspector and WAVE can be safely ignored. To be more comprehensive, internally, the <kendo-dropdownlist> wrapper element is the correct focusable container for the component, which we use for ensuring accessibility compliance, thus the aria-labelledby attribute properly references the associated label and establishes the semantic relationship for screen readers.

You can find more information about this matter regarding the DropDownList component specifically in the following documentation article:

• https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/accessibility/aria-support_dropdownlist

It is important to mention that all Kendo UI for Angular components are tested with axeDevTools and comply with WCAG 2.2 specifications. The DropDownList component is also highly tested for accessibility compliance against WCAG 2.2 specifications, but different accessibility tools have different rules that they follow, which is why we cannot provide a component that complies with all of them.

On that note, just to be sure, I tested the DropDownList component with axeDevTools and the Ocean Blue Accessibility Swatch, but no such warnings were thrown:

• https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/accessibility

With the above being said, the warning can be safely ignored as it does not indicate an actual accessibility concern with the DropDownList implementation.

I hope the provided information sheds some light on the matter.

Regards,
Zornitsa
Progress Telerik

[Michael]

Thank you for your detailed answer! That should be a sufficient explanation.