Improve error handling

[yaaax]

See https://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-text

When an error occurs:

• prefix the
• show an error summary at the top of the page
• move keyboard focus to the start of the summary to move keyboard focus, put tabindex="-1" on the containing div and use obj.focus()
• ensure that the summary is announced to as many screen readers as possible use role="alert" on the containing div
• use a heading at the top of the summary
• associate the heading with the summary box use the ARIA attribute aria-labelledby on the containing div, so that screen readers will automatically announce the heading as soon as focus is moved to the div
• link from the error list in the summary to the fields with errors
• add a 5px red left border to the field with the error
• show a red and bold error message between each question and field with an error
• associate each error message with the corresponding field by adding it to the label (or legend)

Also consider using the aria-invalid attribute to programmatically indicate that a field has an error. The value of the aria-invalid attribute will vary depending on the type of error.