WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility :: Issues with <br>, Issues with Chrome, Is it Skipping

for

From: Alastair Campbell
Date: Aug 27, 2013 2:37AM

Snahendu Bhattacharya wrote:
> if we open the
> website in iPad and try to activate "skip to main content", we will find
> the link is not taking to desired location for all the pages.

Jared Smith wrote:

> This is a VoiceOver issue. Again, there's nothing you can do to fix
> this (except perhaps log a bug with Apple).
>

Is this the old webkit bug of not following within-page links?

I've had some success with using a small JS function to properly move the
focus.

In the HTML you'd have a skip to content link:
<a href="#main" id="skiplink">Skip to content</a>

Going to the main element (for example) which needs tabindex:
<main role="main" id="main" tabindex=”-1”>

Which JS/jQuery then assists VoiceOver to get to:
$("#skiplink").click(function() {
$('main').focus();
});

And since we don't want an outline around the main (usually), I tend to add
this to the CSS:
main:focus {outline: 0;}

I haven't found any issues with adding this, although hopefully it won't be
needed for much longer? Given that VoiceOver on iOS is probably the second
most used screenreader (according to WebAims survey!), we've been paying
more attention to it...

-Alastair