WebAIM - Web Accessibility In Mind

E-mail List Archives

Best heading structure for a web page with an error message at the top

for

From: ALISTAIR DUGGIN
Date: Jul 4, 2017 11:24AM

Hi,
As part of the UK Government Style Guide we provide best practice examples for form patterns - this includes both design and code.
Form patterns: http://govuk-elements.herokuapp.com/form-elements/Error and validation patterns: http://govuk-elements.herokuapp.com/errors/
Our recommended pattern for errors is to rely on server side validation and to insert an error message at the top of the page that a user has just tried to submit (as well as including inline error message in the label of the field that has failed validation).

The error message at the top of the page is inserted above the H1 of the page. The error message also contains a heading which is marked up as an H1 and is followed by links to each of the problematic form fields.
We are proposing to change the heading in the error message to be an h2 - so that the page only has one h1 (the title of the page).
Here's an interactive example of this pattern here - if you submit the form without filling in any of the fields you will see the error message with the old markup (the error message with an H1)http://govuk-elements.herokuapp.com/errors/example-form-validation-multiple-questions


I was wondering if people agree that having an h2 in the error message above the existing h1 that contains the page title is better than having 2 h1s in the page.
We have a pull request open here where is it being discussed:https://github.com/alphagov/govuk_elements/pull/510

cheers,Al

Head of Accessibility, Government Digital Service, UK