Skip to main content problems

Question

I'm tasked to do some accessibility improvements to a website. The first thing I'm trying to do is to add a "skip to main content" link by creating a link with href="#main-content", where "main-content" is the id of the div containing the main content. Adding the link itself is no problem, and there is a suitable id on the container for the main content.

The problem is the main menu. It is positioned at the top of the page. As the user scrolls down the menu stays at the top of the page and on top of the scrolled content, ie the menu has a fixed position with a high z-index.

When the user follows the "skip to main content" link, the page is scrolled so that the main content is positioned at the top of the browser, which is what I expect. The problem is that the first part of it is obscured by the main menu that floats above the page…

Is there a way to solve this without removing the feature with an "always on top" main menu?

This really lacks quite a bit of context, up for interpretation to the reader. I _assume_, but please [edit] it into your question, that you're using a named anchor and jumping to that through a `#link`? — CodeCaster, Nov 11 '16 at 10:45
@CodeCaster. I've edited my question to clarify. It's true that I use a #link, but to an element (div) with an id. I believe the use of tag no longer has a name attribute in HTML5. — haagel, Nov 11 '16 at 13:24
@CodeCaster But you're right, my question is a duplicate of the one you're referencing, which in turn is a duplicate of another question :P — haagel, Nov 11 '16 at 13:25

score 0 · Answer 1 · edited May 23 '17 at 12:13

This question is not really a duplicate of offsetting an html anchor to adjust for fixed header as it mentions "accessibility".

When a screenreader will read your page, you will have the same problem as when you click the "go to main content" link : the text read by the screenreader may not appear visually and be obscured by the fixed position menu.

This will be an accessibility problem.

You should avoid "always on top" menu which should overlay another text when read by a screenreader

score 0 · Answer 2 · answered Nov 16 '16 at 00:07

I have a hackish suggestion (that may or may not work depending on context, which I cannot see):

main:target {
  padding-top: 3em;
}

The size of that padding would need to change depending on the height of your menu. Whether or not it would work for what you need is unknown without seeing the layout/design, but it is quick and simple. It also does not (seem) to present any accessibility issues.

I took my keyboard-friendly skip link Codepen and tweaked it to do this (the skip link is not ideal, but it is there to show the idea): http://codepen.io/aardrian/pen/GNjZQZ

Skip to main content problems

2 Answers2