How to create screen reader accessible AJAX regions and DOM insert/remove updates?

Question

My user interaction process is as follows:

1. The user is presented with a drop-down list containing a list of cities
2. After selecting a city, an AJAX request gets all buildings in the city, and inserts them into a div (this AJAX request returns a list of checkboxes)
3. The user then can check/uncheck a checkbox to add the city to a table that is on the same page. (This dynamically inserts/removes table rows)

Here is my select dropdown:

<label for="city-selector">Choose your favorite city?</label>
  <select name="select" size="1" id="city-selector" aria-controls="city-info">
  <option value="1">Amsterdam</option>
  <option value="2">Buenos Aires</option>
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="5">London</option>
  <option value="6">Los Angeles</option>
  <option value="7">Moscow</option>
  <option value="8">Mumbai</option>
  <option value="9">New York</option>
  <option value="10">Sao Paulo</option>
  <option value="11">Tokyo</option>
</select>

Here is the ajax div that gets empties/populated:

<div role="region" id="city-info" aria-live="polite">
<!-- AJAX CONTENT LOADED HERE -->
</div>

Here is the checkbox list that gets placed inside the ajax div:

<fieldset id="building-selector" aria-controls="building-table">
  <legend>Select your favorite building:</legend>  
  <input id="fox-plaza" type="checkbox" name="buildings" value="fox-plaza">
  <label for="fox-plaza">Fox Plaza</label><br>
  <input id="chrysler-building" type="checkbox" name="buildings" value="chrysler-building">
  <label for="chrysler-building">Chrysler Building</label><br>
  <input id="empire-state-building" type="checkbox" name="buildings" value="empire-state-building">
  <label for="empire-state-building">Empire State Building</label><br>
</fieldset>

And finally the table that holds the cities that he user adds/removes

<table id="building-table" aria-live="polite">
  <caption>List of buildings you have selected</caption>

  <tr>
    <th scope="col">Building name</th>
    <th scope="col">Delete Building</th>
  </tr>

  <tr>
    <td>Empire State Building</td>
    <td><button>Delete</button> /td>
  </tr>

</table>

I thought I was on the right path by using aria-controls="" and aria-live="", but that doesn't seem to be enough for the screen reader to detect the changes. In fact, I don't know if I'm missing something in my markup, or if I need to trigger any alert events or anything like that, to make this work.

Answer 1

You describe a situation, not a problem.

As long as your screenreader can read the content when the visual focus moves on it (using your AT shortcuts), then it's the expected result.

The screenreader won't move by itself to the checkbox list after you select a city. It's due to the way the visual focus of the screenreader is uncorrelated with the standard focus.

aria-live is something to make an announcement but won't let you interact with any inner control inside the same div and it would not move the visual focus to this element.

In your case you should describe the action of the form:

Chose a city in the list to select your favorite building