microsoft / microsoft/BotFramework-WebChat
Doc: Update `ACCESSIBILITY.md` on the usage of `role="feed"` and `<article>`/`role="article"`
@compulim is already working on this.
Since Oct 29, 2022.
- Dominant language
- HTML
- Stars
- 1.8k
- Forks
- 1.6k
- Avg merge
- 22h 58m
- Merged PRs (30d)
- 2
Description
Is your feature request related to a problem? Please describe.
Copy my response from this comment on #4471 into ACCESSIBILITY.md section titled "Using role="feed" and role="article" to represent the chat history and activity.
Describe the suggestion or request in detail
Copy from below, may need to flush some verbiages.
In WAI-ARIA roles, there are not much roles that would fit for chat bubbles. There are:
log role
Excerpt from WAI-ARIA:
A type of live region where new information is added in meaningful order and old information may disappear. Examples include chat logs, messaging history, game log, or an error log.
While log role seems best fit for chatting (chat logs, game log), when we are using it in real world:
- Implicit live region
- Due to bugs in screen readers, we have to use a separate live region, these bugs are not workaround-able
- Adaptive Cards is a challenge because they emit a huge complex DOM tree, screen readers often misunderstand it in live regions
- At the time we implement, some ATs will not turn off live region for
logrole
- Due to bugs in screen readers, we have to use a separate live region, these bugs are not workaround-able
- Nested interactive content
logis good for static and simple content- A few sentences, images sparingly, but without audio clips, videos, inputs, or other widgets
- Our chat bubbles could contain Adaptive Cards and other interactive widgets
logis not a complex widget, and interactive widgets insidelogis not recommended because end-user do not expect non-complex widget to have nested interactive widgets- In other words, focus management and transcript navigation using
logwill create confusions
- In other words, focus management and transcript navigation using
grid role
This is more like spreadsheet controls. One of our requirements is complex focus management and transcript navigation. As grid is a complex widget, it support nested interactive element and fit this requirement.
However, we believe grid is too generic and should only be used as the last resort.
feed role
This is for a scrollable list of articles. Few things we like it over other roles:
feedsupport complex widgetarticleinsidefeedare expected to have interactive widgets, such as comment box
feedcould be used to present a stream of new stories, with text, links, images, and comments- This is actually what bot authors could present while using Adaptive Cards
- Support appending and prepending articles
- In the future, we could support loading partial chat history, and end-user could scroll up to "load more".
feedis designed to for this scenario - Particularly, it supports
aria-setsizeandaria-posinset, making navigation easy for users who uses AT
- In the future, we could support loading partial chat history, and end-user could scroll up to "load more".
feedhas a very explicit and clear instructions on how to implement navigation for its complex widgets
While we understand "article" and "message" could be a bit confusing, we tried to use aria-roledescription to override that. However, when we test in Android and iOS, their support on aria-roledescription is limited-to-nothing. It actually made the experience worse. Thus, we could not use aria-roledescription.
Given all points above, we took some compromises and chose feed role instead of log role. As a requirement for feed role, all children must be article role. Thus, we use article role for the message.
Describe alternatives you have considered
No response
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.