Accessibility Issue - Input fields and visual labels are not associated

[Bradrajkumar]

Issue Description : -

If a relationship between elements is expressed with visual cues, it also needs to be programmatically determined. This enables assistive technology to communicate the relationship to users. Content may otherwise seem unstructured or disorganised.
There are form fields that are not associated with their visual labels. The purpose of the form fields may be unclear to users.

Success Criteria : -

Any relationship presented through visual cues must also use the appropriate semantics. Make sure that form fields are associated with their visual labels. In this case, wrap the visual label such as “Please give us some more…”, “First name”, “Last name” and “Email address” within the element. For example:

<label for="i1"...>
<span ...>Please give us some more details to help us respond
<span...>Required

<textarea id="i1" aria-required="true" ...></textarea>

Avoid using multiple labelling techniques on the same form field. For example, using and aria-label together will cause the aria-label to overwrite the . As well, using aria-labelledby will overwrite any other labelling techniques.

Steps to reproduce

1. Observe the visual labels for the form fields.
2. Inspect the form fields and review the DOM.
3. Observe that the visual labels are not associated with the form fields.
4. Observe that there is not an alternative labelling method that serves the same purpose

Webchat Version :- 4.13.0

[compulim]

To DRI: This is an issue on Adaptive Cards side.

This is an issue related to Adaptive Cards, as this is under the ac-adaptiveCard class.

However, I did some preliminary investigations and I believe this is a valid accessibility issue on Adaptive Cards library.

I agree with your point that, the <textarea class="ac-input ..."> highlighted should not have aria-labelledby. As the <label> already use the for attribute to point to <textarea>. Adaptive Cards should avoid using multiple labelling techniques.

I also looked at their latest library via their Adaptive Cards Designer tool. When I am using the label field on the Input.Text element, I am seeing multiple labelling techniques is being used. That means, I can confirm this is an issue on Adaptive Cards library. Here is the screenshot from their Designer tool.

Excerpt from ARIA Authoring Practices Guide on how to use labelling techniques on textbox. When <label> is being used, it should not use aria-labelledby or aria-label.

However, this is an issue with the Adaptive Cards library which we are using. Could you please do the followings?

1. File a new bug to Adaptive Cards
2. In the bug, put a link to link it back to this bug on Web Chat
   • And optionally, put the link here to reference the bug on Adaptive Cards repo
3. Don't close this bug yet. We will keep tracking the progress on Adaptive Cards library. Once they resolved it and release a production version, Web Chat will bump to use the latest version of Adaptive Cards