microsoft / microsoft/BotFramework-WebChat

Doc: Update `ACCESSIBILITY.md` on the usage of `role="feed"` and `<article>`/`role="article"`

Open
#4,477 0 comments 0 reactions 1 assignee View on GitHub

@compulim is already working on this.

Since Oct 29, 2022.

area-docs feature-request
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 log role
  • Nested interactive content
    • log is 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
    • log is not a complex widget, and interactive widgets inside log is 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 log will create confusions

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:

  • feed support complex widget
    • article inside feed are expected to have interactive widgets, such as comment box
  • feed could 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". feed is designed to for this scenario
    • Particularly, it supports aria-setsize and aria-posinset, making navigation easy for users who uses AT
  • feed has 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

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.