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

--000000000000600ac505a88daf9f
Content-Type: text/plain; charset="UTF-8"

 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

--000000000000600ac505a88daf9f
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr"><div class=3D"gmail_default" style=3D"font-family:trebuche=
t ms,sans-serif;font-size:small;color:#4c1130">
The WCAG doesn&#39;t specify exactly which element it should target, but fo=
r best accessibility and usability for all users including screen reader us=
ers, 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.=C2=A0</div><div clas=
s=3D"gmail_default" style=3D"font-family:trebuchet ms,sans-serif;font-size:=
small;color:#4c1130"><br></div><div class=3D"gmail_default" style=3D"font-f=
amily:trebuchet ms,sans-serif;font-size:small;color:#4c1130">Most modern HT=
ML5 websites will have either a &lt;main&gt; element to hold this content, =
or a div with role=3D&quot;main&quot;. For purely practical reasons, and go=
od (i.e. safe) development procedures this is the element the Skip link sho=
uld target. Don&#39;t target any child element inside that &lt;main&gt; ele=
ment, 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 a=
nd at the top of the &lt;main&gt; element.<br></div><div class=3D"gmail_def=
ault" style=3D"font-family:trebuchet ms,sans-serif;font-size:small;color:#4=
c1130"><br></div><div class=3D"gmail_default" style=3D"font-family:trebuche=
t ms,sans-serif;font-size:small;color:#4c1130">For instance, one morning th=
e manager comes in and says &quot;We need to display an important announcem=
ent at the top of the page!&quot; Or someone decides to add a carousel or o=
ther 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 develo=
per goes off and adds the new markup immediately following the &lt;main&gt;=
, completely forgetting that the Skip link is targeting something lower dow=
n. <br></div><div class=3D"gmail_default" style=3D"font-family:trebuchet ms=
,sans-serif;font-size:small;color:#4c1130"><br></div><div class=3D"gmail_de=
fault" style=3D"font-family:trebuchet ms,sans-serif;font-size:small;color:#=
4c1130">The result?=20
Keyboard users use the Skip link only to find they have to scroll back up a=
gain 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 Ski=
p link jumps right over it! (Though it has to be said, of course, most scre=
en reader users don&#39;t generally use the Skip link, they usually use oth=
er navigation options provided by their screen reader. But this possibility=
 is there nevertheless so should be avoided.) <br></div><div class=3D"gmail=
_default" style=3D"font-family:trebuchet ms,sans-serif;font-size:small;colo=
r:#4c1130"><br></div><div class=3D"gmail_default" style=3D"font-family:treb=
uchet ms,sans-serif;font-size:small;color:#4c1130">So as a matter of good, =
defensive development practice, it isn&#39;t just a case of skipping to the=
 first visible element. <br></div><div class=3D"gmail_default" style=3D"fon=
t-family:trebuchet ms,sans-serif;font-size:small;color:#4c1130"><br></div><=
div class=3D"gmail_default" style=3D"font-family:trebuchet ms,sans-serif;fo=
nt-size:small;color:#4c1130">(NB: In any case, a Skip link is part of a web=
site&#39;s standard page markup, so needs to skip to something that will ex=
ist on every page. This means either the &lt;main&gt; element (or role=3D&q=
uot;main&quot;), or you can add an &lt;a&gt; anchor as last item in the pag=
e header markup, which will ensure it is on every page that way. And as Pat=
rick just said, add tabindex of -1 to the &lt;main&gt;, or any anchor you u=
se for this purpose.)<br></div><div class=3D"gmail_default" style=3D"font-f=
amily:trebuchet ms,sans-serif;font-size:small;color:#4c1130"><br></div><div=
 class=3D"gmail_default" style=3D"font-family:trebuchet ms,sans-serif;font-=
size:small;color:#4c1130"></div><div><div dir=3D"ltr" class=3D"gmail_signat=
ure" data-smartmail=3D"gmail_signature"><div dir=3D"ltr"><div><div dir=3D"l=
tr"><div><div dir=3D"ltr"><div><div dir=3D"ltr"><div><div dir=3D"ltr"><div>=
<div dir=3D"ltr"><div><span style=3D"font-family:trebuchet ms,sans-serif"><=
span style=3D"color:rgb(76,17,48)">Regards,<br>Guy Hickling<br>Accessibilit=
y Consultant<br><br></span><br></span><br></div></div></div></div></div></d=
iv></div></div></div></div></div></div></div></div></div>

--000000000000600ac505a88daf9f--