It makes sense to inform screenreader users of these forms – particularly login and search, because they form an important part of getting things done on the site, or navigating to a personalised part of the site.

For that reason, preface all of these forms with a header. This allows screenreader users to use headers as a way of navigating all the elements in the page. Make the header text descriptive, for example “Login to your account”, or “Search this site”. It would be better to integrate these headings as part of the design, but they can be hidden by positioning it off-left if needed.

It’s more natural for this heading is placed before the start of the form, outside the opening form tag. That way a screenreader user can find the relevant header in heading navigation mode, and when they switch back to the normal page navigation mode the first thing immediately after the header is the form.

Ensure that the heading level makes sense in the document structure, and don’t skip a heading level. Use an h2 header for forms that appear before the h1 header; there ideally should be only one h1 header per page.

Related info

• YouTube: Importance of HTML headings for accessibility: shows how useful headers can be as a way of navigating a page of content in a screenreader (JAWS), and the difference when headers are not marked up.