Chatbot Test

This example demonstrates a chatbot. Since there is no official chatbot pattern, it uses the common design of showing responses above a question form.

Problem

The common chatbot design poses several problems for screen reader users:

Knowing that a response has appeared - responses are typically displayed dynamically without the page reloading. By default, screen readers do not announce when this happens, so users may not recognize that anything happened after entering their question.
Knowing where the response is - responses are typically displayed above the question textbox, which comes before the question in the default reading and focus order, so users need to know to read backwards to find the response and may end up reading long responses in reverse order.
Moving between previous responses - it can be difficult to find and navigate between multiple responses in the chat history.

Recommendation

The simplest solution is to:

Start each response with a heading - in the above example, the question is repeated before each response and marked as an h2 heading. This enables screen reader users to easily navigate between previous questions/responses. (If this is excessive for long questions, short, visibibly-hidden headings such as "Question 1", "Question 2", etc. could be used instead.)
Move focus to the response heading - by setting tabindex="-1" and moving focus to each new heading, screen readers automatically read the heading and activate and position the reading cursor so the user can read the response in the correct order (by pressing down arrow).

It is also worth considering:

Labelling questions & responses - hidden text (or icons with alt text) can indicate "You asked:" and "AI replied:" (or similar) before each question and answer to help clarify which is which. (This is done in the above example.)
Providing a status message - if there is a delay of more than a few seconds before showing a response, a status message should say "Thinking..." or similar.
Using aria-live - setting aria-live="polite" on the response region will cause screen readers to automatically read new responses. This is useful for short responses but overwhelming for long ones. If used, it may be best to provide this as an option, e.g.: Automatically read responses.

References

Utah Design System: AI Chatbot - an alternate approach with responses below the question form.