When errors are on top, how does a screen reader back up and read those errors?

I would recommend moving the errors to the top for longer forms. In general, we don’t want to mess with the users focus location. Imagine the focus location is the persons anchor to the page. There are things we do in accessibility to make sure that focus does not get moved around without user action or good reason. That’s because it’s very disorienting for the user. You’ve moved their place and they need to move around. One of the exceptions to that, is after the user does something. In this case the user is hitting submit, and the worst thing a screen reader user could hear is silence because they will not know if that was a success or a failure. There are some cases in which a submit would cause a new page to load. Whenever a new page loads, the screen reader reads the new title and then will start reading the page until the user does something else. In a case like this, we’re not going to reload the page, we would move the focus so that someone would hit the submit button, and the focus would move to the container listing the form errors and read the errors they need to correct. In a short form, I would take the error and tuck it under the appropriate field, called an inline error, and associate it to the field that was already described. Then you move focus to the first field in error state. That way we’ve put the user in the right place, given them the error, and told them what they need to do to fix the error state.