Bug (Keyboard Accessibility): Add "Skip to main content" link

[dsmchen]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Bug: brief description of bug format, e.g. Bug: Lesson complete button does not update on click
• Would you like to work on this issue?

Bug description

• Parent issue: Add Keyboard Accessibility and Conduct Keyboard Testing #2893
• "On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content ... Skip navigation links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content." (https://webaim.org/techniques/skipnav/#overview)

How to reproduce

1. Go to https://www.theodinproject.com/
2. Press tab key
3. First tab keypress goes to header logo anchor element

Expected behavior

1. Go to https://www.theodinproject.com/
2. Press tab key
3. First tab keypress goes to "Skip to main content" link

What browsers are you seeing the problem on?

Firefox, Chrome

What OS are you using?

MacOS

Discord Name

doris6601

Additional Comments

No response

[dsmchen]

Hey @mao-sz, what does this issue need to remove "Status: Needs Review"?

[mao-sz]

It first needs me to actually send the message I thought I had sent but clearly didn't 🤦

@thatblindgeye any thoughts on where might be the most appropriate place in the DOM for this kind of thing, if we did include it? Not sure how that might play with the various different ToC options being discussed. Is this something that requires figuring out the ToC stuff first before we have an idea for the "skip to main content" button?

[dsmchen]

Hi @thatblindgeye, in case you missed the above message :)

[dsmchen]

Hi @thatblindgeye, following up on the above :)

[mao-sz]

@dsmchen Had some time to revisit this a little more deeply. Is this something you're still interested in working on?

An invisible-until-focused skip link makes sense but on top of actually making the skip link, we'd need to add an appropriate ID like id="main-content" to the main content element for the link to href to. That involves a few things:

• Some pages will have the main content inside a <div> instead of a <main>. Such pages would ideally have this <div> changed to a <main>, and the right ID given to it.
• Some pages have multiple <section>s but they're not all contained within a <main> or equivalent (i.e. they're siblings to the <nav>).
• Speaking of the <nav>, it's not within a <header> and I think we ought to have the appropriate landmarks (header -> main -> footer). We have the footer, but the header and main aren't actually in those landmarks and should be.

Which means to implement the skip link, we'd need to:

1. Put the <nav> in a <header>.
2. Make sure all pages' main content is inside a <main>. That will involve amending views for lesson pages but also any of our static pages, and may involve wrapping things in a <main id="main-content"> or changing a "main div" to a <main> with the ID.
3. Then we should be able to add the invisible-until-focused skip link to the header with href="#main-content" as the first focusable.
4. We'd also need to ensure that any relevant selectors in CSS/client-side JS are amended due to the new layout.
5. Write tests.

@KevinMulhern does this sound about right to you? Anything I may have missed, particularly with specifics of this code base?

If we do come to think about redesigning the lesson ToC then we can always work around what we have at the time, rather than having that discussion block this issue.