Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
octsdamas opened this issue Nov 29, 2024 · 0 comments
Open
Labels
area-accessibility Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete.

Comments

@octsdamas
Copy link

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

@octsdamas octsdamas added area-accessibility Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete. labels Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-accessibility Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete.
Projects
None yet
Development

No branches or pull requests

1 participant