Move the target for "skip to main link"

Problem/Motivation

“Skip to main content” can only skip repeated content (like the header on every page). It should not skip unique content. For example, we currently have it setup so if a user interacts with "skip to main content" it brings them past the page title, past any breadcrumbs, past any links in the hero, and goes straight to the <main>. This is an issue for many sites where we have links in the hero.

This has been noted in other projects, but has been a blocker for Lem's A11y launch.

Proposed resolution

Move <a id='main-content' tabindex='-1'></a> to right below the <header> as a default.

This way, the focus will always be brought to whatever is right after the header whether that is in the main or banner or what. This is a very common occurrence with our designs and our implementation.

Open to other placement if there is a better solution