Skip to Main Content button

[nathanj3]

Description

I'd love the addition of a toggle option for HTML/book rendering to add a "Skip to main content" button that's hidden but becomes visible when tab navigated. It seems possible to add manually by putting the html code inside

book:
  sidebar:
    header: |
      <custom code that links to H1 on that page>

and then to add custom css to make it hide/display correctly, but it would be very nice to have it built in. It's an accessibility feature that makes life easier for keyboard users, and I'm working to bring everything up to snuff with the new US ADA Title II requirements.

[mcanouil]

What's "main content" exactly?

It's an accessibility feature that makes life easier for keyboard users, and I'm working to bring everything up to snuff with the new US ADA Title II requirements.

Would you mind sharing a reference for this?

[nathanj3]

Absolutely! "Main content" is the page content that's not a navbar, sidebar, or header/footer. In the tabbing order, it comes after those navigational elements, and having the skip link is helpful for keyboard and screen reader users to skip the navigational elements and interact with the meat of the page. In the 3-column style used for R4DS, it's the middle column with the chapter text.

If you go to https://illinois.edu/ and hit the tab key, the skip button will appear at the top and, when used, it skips to an anchor point below the navbar and cover image (I think it's usually the first H1 on the page).

NC State Univ also has an article that discusses it.

[nathanj3]

To be a little clearer -- there's no special "main content" tag. At the most basic it could just be an anchor point, or a region landmark aria-element could also be used.

[mcanouil]

For reference:

• No skip to content link #11603