a11y-dialog | A very lightweight and flexible accessible modal dialog | User Interface library

I have a element which, when opened, requests some content from the server using AJAX. When the content returns (which of course can be any length of time depending on connection speed and amount of content) the new content is then dynamically appended to the dialog.

How can I make screen reader users aware that this content now exists and that they can move to it? Should focus be moved to the content once it is inserted?

I'm using the a11y-dialog library to open the dialog.

I have the container for the dialog set up with aria-live="polite" and add aria-busy="true" once I start the AJAX request.

aria-busy is then set to false once the AJAX request returns and the content is added to the container.

This works to announce the content as soon as it arrives, however, it reads all text entered, which in some cases can be several paragraphs. My experience with the screen reader controls is limited, so I'm unsure if there is a way to interrupt this automatic reading process.

This is the HTML code for the dialog. The AJAX container has the id #dialog-ajax-wrapper.