Fix a11y audit: headings on left menu and link to design doc

[hannahiss]

Related issues

#2667

Description

On the left menu (issue 1-1):

• add a visually-hidden <h1 class="visually-hidden"> labelled Docs navigation
• on the <nav> element, change the aria-label to aria-labelledby to point to this heading
• For each category, define a <h2>
• change some classes and CSS to keep the same rendering than before even in responsive

On the page "Design guidelines" (issue 3-2):

• remove the aria-label on the link "Visit system.design.orange.com"
• Change the title to be exactly "Visit system.design.orange.com"

On the home page (same issue than above):

• Add a title to the link "Visit system.design.orange.com"

Motivation & Context

Changes asked by the a11y auditor to increase our accessibility note. See #2267 issues 1-1 and 3-2.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2859--boosted.netlify.app/
• https://deploy-preview-2859--boosted.netlify.app/docs/guidelines/
• https://deploy-preview-2859--boosted.netlify.app/docs

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	6652d80
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/67bc398dcac48b000890251a
😎 Deploy Preview	https://deploy-preview-2859--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

I'm wondering if we should have h1 and h2 or h2 and h3 ?

[vprothais]

I'm wondering if we should have h1 and h2 or h2 and h3 ?

If we use h2 we would have the h2 from the menu without any h1 parent because it will come later in the page. Is it ok ?

[hannahiss]

I'm wondering if we should have h1 and h2 or h2 and h3 ?

If we use h2 we would have the h2 from the menu without any h1 parent because it will come later in the page. Is it ok ?

It is better to respect a logical hierarchy with h1 then h2, even if some prefer to have only one h1. If we wanted to have h2 and h3, to be consistent, these titles should come after our real h1 (eg "Getting started") but I don't think that's possible?

But, what is strange and even more disturbing is that we always have the "cookie management panel" in the first h1 of the page, and which seems to be the title of the banner (present whether the banner is visible or not). And when we display the modal, we again have another h1 "cookie management panel" which is the title of the modal.

I propose that for now we stick with h1 and h2 for the left menu, and:

• I will track this issue regarding headings in our repo
• I will comment on the issue on tarteaucitron's side: Aria Level 1 et description des boutons AmauriC/tarteaucitron.js#1258