Re: Skip links - must they navigate to a focusable element?

 The WCAG doesn't specify exactly which element it should target, but for
best accessibility and usability for all users including screen reader
users, the Skip to Main Content link should go to the very start of the
main content, for the reasons given by Alan Smith just now.

Most modern HTML5 websites will have either a <main> element to hold this
content, or a div with role="main". For purely practical reasons, and good
(i.e. safe) development procedures this is the element the Skip link should
target. Don't target any child element inside that <main> element, because
that leaves you open to mistakes later. At the very least it requires the
skip link to be changed later if new content is added inside and at the top
of the <main> element.

For instance, one morning the manager comes in and says "We need to display
an important announcement at the top of the page!" Or someone decides to
add a carousel or other display component at the top, and these are
generally placed above any main heading there may be on the page, or above
other content. So a developer goes off and adds the new markup immediately
following the <main>, completely forgetting that the Skip link is targeting
something lower down.

The result? Keyboard users use the Skip link only to find they have to
scroll back up again to see a load of content that just scrolled up out of
sight! Some screen reader users may also never see the new content because
the Skip link jumps right over it! (Though it has to be said, of course,
most screen reader users don't generally use the Skip link, they usually
use other navigation options provided by their screen reader. But this
possibility is there nevertheless so should be avoided.)

So as a matter of good, defensive development practice, it isn't just a
case of skipping to the first visible element.

(NB: In any case, a Skip link is part of a website's standard page markup,
so needs to skip to something that will exist on every page. This means
either the <main> element (or role="main"), or you can add an <a> anchor as
last item in the page header markup, which will ensure it is on every page
that way. And as Patrick just said, add tabindex of -1 to the <main>, or
any anchor you use for this purpose.)

Regards,
Guy Hickling
Accessibility Consultant