I'm working on a login page that consists of a logo, a paragraph, and some fields. There's no clear content to put into an H1. How should this be handled for accessibility? Put an H1 around the logo?

I'm working on a login page that consists of a logo, a paragraph, and some fields. There's no clear content to put into an H1. How should this be handled for accessibility? Put an H1 around the logo?

• html
• accessibility
• screen-readers
• heading

• Best practice is to have an h1 near the top of the page, but it is not a WCAG requirement. For a simple login page, as long as the page has a sufficient title, an h1 may not really be needed, but it's going to depend on the context of how this page is being used. – Roland McLeod Commented Feb 5 at 22:04

3 Answers 3

Either conjure a suitable title for the page for everyone, or use common strategies to hide the heading from visual users, such as offscreen CSS. Bootstrap has a model for this you could follow:

.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption) {
    position: absolute!important
}

Keep in mind that accessibility is really just universal usability, so reconsider whether your page should simply have a proper heading for all users.

Ideally, copy the page title into your <h1>, like:

<h1>Login</h1>

Or, if you use some template engine, extract the page title without the application name and copy it there.
If for some reason this is not possible (why?), ensure there is a <main> region or at least (it's worse!) <div role="main">; and autofocus the first field, like email or username. The fields must be properly labeled, of course. Thus your users will know that they are on the login page and they need to, well, enter some login data.

In a situation like this, I'd typically create an invisible h1, like:

<h1 style={{ display:none }}>Login</h1>