It looks to me like the problem is because the skip link is being rendered behind your site’s header, because the header has fixed position. You’ll want to change the z-index of the skip link when focused. I tested using z-index 100,000; you probably don’t need something that high, but it would work!
This is mostly likely caused by a difference in behavior between browsers in treating elements that are hidden by other elements, but you’ll have to address this to check whether this fix works.
Thanks for replying,
I’ve increased the value of the z-index for the skip link when in focus but it still doesnt seem to work in IE.
Is this css you’re referring to?
#skiplinks a:active, #skiplinks a:focus {
left: 1em;
top: 1em;
background: #f6f3fa;
color: #00c;
padding: 5px;
border: 1px solid #357;
box-shadow: 2px 2px 2px #777;
border-radius: 5px;
font-size: 1.4em;
z-index: 1000;
}
OK. So I think this looks like a conflict with your theme, Avia; it’s enqueuing a script that takes over the behavior of any in-page link. That script scrolls the page, and prevents the change of focus (only changing the position, rather than the focus). In most browsers, the change of focus is happening anyway, but it appears that IE is only handling the first request, and ignoring the request from the skip link.
If you can disable the smooth scroll in your theme, that would be worth testing.
Hi Joe, sorry for the late reply.
I managed to get a skip to content link working through making my own link (not the ‘make a custom link’ section of the plugin) and placing it in the header of the website. However everytime I tab through the site it tabs to the “a11y-toolbar ltr” class, is there a way to make the user tab to the custom link first? e.g. can I go the .js files and remove the -1 tabindex thats given to the “a11y-toolbar” or will that mess up the plugin?
thanks.
Actually nevermind, I got it to work now 🙂 thanks for the help joe 😀
