The main container should only contain the main page content

[svenaas]

The <main> container which is defined in default.html should only contain the main page content. In most cases (e.g. page, post) this is so, but in sections of our website where a sidenav is present (the documentation sections of the cloud.gov site and of the cloud.gov Pages subsite) that sidenav's <aside> is located within — and first within — the <main> container.

The reason <main> shouldn't include the sidenav <aside> is that the contents of the aside aren't unique parts of the page — the list of links is repeated on every page in the section the sidenav applies to. Having the aside in <main> means this repeated content is likely to be indexed as part of the page content, with the nav terms leading to unhelpful search term matches on pages where they don't apply.

I discovered this DOM situation when working on an accessibility issue (#2320), and want to credit Dawn McClesky for pointing out the SEO and semantic issue when I asked for advice in Slack and recommending that we change it.

Notes

• The sidenav is currently conditionally rendered by the docs.html template and this logic will need to be moved to default.html. The bigger challenge will be adjusting the CSS to render the page correctly in spite of this nesting change.
• In resolving Add additional skip link for pages with sidenav #2320 with the changes in Add second skip link to improve accessibility for keyboard navigation users #2321 I moved id="main-content" off of <main> and placed it in several other places. When this issue is addressed it should be possible — though not essential — to move #main-content back to <main> in default.html, and remove the corresponding id attribute from the data, docs, page, post, and wide templates (the last of which will no longer need a <div> around {{ content }} — it didn't have one before). The benefits of Add second skip link to improve accessibility for keyboard navigation users #2321 — a second, conditional skip link to the sidenav, and a main skip link that goes directly to the main content — will not be adversely affected provided <main id="main-content> only does contain the main content.

Acceptance Criteria

• The sidenav <aside> is moved out of <main>, becoming a DOM sibling instead of a DOM child of the latter element.
• The sidenav and main content still render correctly: in wide layouts the sidenav appears to the left of the main content; in narrow layouts the sidenav appears below the main content.
• The main skip link ("Skip to main content", which links to #main-content) still works, taking the user to the <h1> and page content and not into the sidenav on pages where the sidenav occurs.
• The secondary skip link ("Skip to section navigation", which occurs in the documentation sections) still works, taking the user to the sidenav <aside>