microsoft / microsoft/BotFramework-WebChat

Issues with Non-Supported/Prohibited ARIA Attributes in Bot Framework

Open
#5,388 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-accessibility Bot Services bug customer-reported
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

During an accessibility audit, the following issues with ARIA attributes were found:

  • aria-labelledby on Non-Semantic Elements:

Issue: aria-labelledby is used on non-semantic elements like

, which may cause assistive technologies to read the content instead of the attribute’s value.
Recommendation: Use semantic elements (e.g., , ) or add appropriate roles to improve accessibility.

  • aria-invalid Set to False:

Issue: Setting aria-invalid to false is equivalent to not using the attribute, which provides no useful information to assistive technologies.
Recommendation: Set aria-invalid to true only when validation fails.

  • aria-disabled Set to False:

Issue: Setting aria-disabled to false before validation or form submission doesn’t convey the element’s disabled state to assistive technologies.
Recommendation: Set aria-disabled to true when the element is disabled.

What browsers and screen readers do this issue affect?

Others

Are there any code-based customization done to Web Chat?

Yes, however, this also repro when customizations are not in use.

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

ARIA roles

What is the public URL for the website?

https://www.okanagan.bc.ca/

How to reproduce the issue?
  1. Navigate to inspect
  2. Type aria-labeledby in filter box
  3. See the divs used as labels
What do you expect?

The screen reader reader the text between the div tags.

What actually happened?

The screen reader might read the atribute value instead of the text between the divs.

Do you have any screenshots or recordings to repro the issue?

No response

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

No response

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting the Web Chat DOM on the reported public URL and filter for aria-labelledby, aria-invalid, and aria-disabled. Compare the affected elements and screen-reader behavior with the stated recommendations; done means the reported ARIA patterns no longer produce the audit findings without customizations.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.