Add H1 page titles to login/registration forms for accessibility

Context

While working on login form design changes for another petition and discussing accessibility, it dawned upon me that current ClassicPress (and WordPress) login, registration, and lost password pages are missing H1 page titles.

The H1 is wasted on the logo, and the title is technically the <p> text styled as an alert box.

WCAG requires <title> but it is a best practice for the <title> to match top heading on the page, usually marked as H1.

A quick look at some of the largest companies’ login forms - Google, Amazon, Apple, US government - all have H1 page titles.

Possible implementation

First, the logo should probably be wrapped in a <div> with the appropriate class.
Second, add H1 titles using the same text string that’s used to generate <title> for these pages. This will take care of the translations too, no new text.

  • Log In
  • Lost Password
  • Registration Form

This uses the updated form design from the other petition but can be implemented on the current forms/pages.

Will you be able to help with the implementation?

I may be able to help. Maybe as part of the updated form design petition.

Good point! All the custom login pages I’ve built do something like this.

1 Like