- From: Benjamin Hawkes-Lewis <bhawkeslewis@googlemail.com>
- Date: Tue, 8 May 2012 22:30:57 +0100
- To: David MacDonald <david100@sympatico.ca>
- Cc: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>, Maciej Stachowiak <mjs@apple.com>, Sam Ruby <rubys@intertwingly.net>, Laura Carlson <laura.lee.carlson@gmail.com>, Judy Brewer <jbrewer@w3.org>, Cynthia Shelly <cyns@microsoft.com>, Paul Cotton <Paul.Cotton@microsoft.com>, HTML Accessibility Task Force <public-html-a11y@w3.org>, HTML WG <public-html@w3.org>
On Tue, May 8, 2012 at 9:03 PM, David MacDonald <david100@sympatico.ca> wrote:
>> Off-screen controls are included in the tab order, exposed the accessibility tree, listed in enumerations of controls (e.g. JAWS link list), available to skip commands, and are available to users who do not apply author styles.
>
> Off screen tab stops fail WCAG 2.4.7 (focus visible) at level AA. http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
That's not the case when the author makes controls visible when they
receive focus.
For simple cases this is trivial to do with CSS alone:
.skip {
position: absolute;
left: -999999px;
}
.skip:focus {
position: static;
}
<a class=skip href=#main>Skip to main content</a>
If you want to also shift content surrounding focused controls
on-screen, you currently need JS. This means you should only shift the
controls off-screen when JS is available. By allowing authors to
specify the subject of a selector chain, CSS4 Selectors will allow us
to do it with CSS alone:
.a11y {
position: absolute;
left: -999999px;
}
.a11y:focus,
.a11y! :focus {
position: static;
}
<p class="a11y">Using a screen reader? See our <a
href="accessibility-help.html">accessibility help</a></p>.
See http://dev.w3.org/csswg/selectors4/#subject
--
Benjamin Hawkes-Lewis
Received on Tuesday, 8 May 2012 21:31:49 UTC