Question

This should be a simple answer. I’m just not knowledgeable enough in CSS to know what to look for to fix this.

My employer wants me to add Skip to Content links to all the pages on our website as he’s with a visual disability and it would improve accessibility by a lot.

I want to implement the method described here: http://webaim.org/techniques/skipnav/#focus

My problem is that when the links gain focus, the rest of the page layout gets pushed down by a few pixels due to the text suddenly appearing. I want to have the text show at the top of the page without it affecting the layout below it. Can I fix the position of my layout somehow?

The entire layout is wrapped with a div container already, so I’m guessing it would just be a matter of adding a CSS property to that container that will fix it’s position.

Thanks in advance.

Answer 1

You should be able to do this by absolutely positioning the link:

#skip a:active, #skip a:focus
{
position:absolute;
top: 0px; 
width:100%;
height:auto;
text-align: center;
}

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist, so this will add the link right at the top of the page, but should not cause the rest of the page elements to move.