Hidden content visually is not hidden from a screen reader

[mohammad-suliman]

Problem description:

As I understand, the dialogue with the chatbot is a sequence of dialogs one displayed each step in the process. For a screen reader, the content of other dialogs is always available even though they are visually hidden.

Solution:

• The availability of the content should be the same both visually and semantically, that is for a screen reader, in most cases
• To achieve this in the mentioned case, you can add the aria-modal attribute to the div of the visually displayed modal
• See aria-modal - MDN
• The keyboard focus in a case of a dialog shouldn't be able to reach content which is visually hidden
• See this dialog example from w3