W3C home > Mailing lists > Public > public-html@w3.org > May 2012

RE: Promise broken on ISSUE 204?

From: David MacDonald <david100@sympatico.ca>
Date: Wed, 9 May 2012 12:01:27 -0400
Message-ID: <BLU0-SMTP90ECF34E7D5C4F1DDF67D5FE110@phx.gbl>
To: "'Benjamin Hawkes-Lewis'" <bhawkeslewis@googlemail.com>
CC: "'HTML Accessibility Task Force'" <public-html-a11y@w3.org>, "'HTML WG'" <public-html@w3.org>
Hmmm that would require a visible change to the page (on focus), which I don't think is in every use case. 

Cheers
David MacDonald

CanAdapt Solutions Inc.
  "Enabling the Web"
www.Can-Adapt.com


-----Original Message-----
From: Benjamin Hawkes-Lewis [mailto:bhawkeslewis@googlemail.com] 
Sent: May-08-12 5:31 PM
To: David MacDonald
Cc: Leif Halvard Silli; Maciej Stachowiak; Sam Ruby; Laura Carlson; Judy Brewer; Cynthia Shelly; Paul Cotton; HTML Accessibility Task Force; HTML WG
Subject: Re: Promise broken on ISSUE 204?

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 Wednesday, 9 May 2012 16:02:10 UTC

This archive was generated by hypermail 2.3.1 : Monday, 29 September 2014 09:39:32 UTC