RE: Example CSS issue with explore by touch

Thanks for the feedback Alan, let’s try another example – I guess the one I sent was the correct way to do it.
In the example below the checkboxes are actually positioned all the way off the screen.
http://codersblock.com/blog/checkbox-trickery-with-css/

Could you check this with iOS with explore by touch?   I was not able to locate the checkboxes with that mode but only the labels.  I know other modes of interaction work but that was my question to group – do we want to require the exploration mode.

On Android with Chrome I was able to explore to the controls in the above example.  I was not able to test on Firefox do to issues with VoiceView on the Fire tablet not supporting Firefox.

So perhaps this is a user agent issue with iOS/VocieOver not moving off-screen content onto the screen for exploration – but why would they?

Jonathan


--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>

703-637-8957 (o)
Follow us: Facebook<http://www.facebook.com/#%21/ssbbartgroup> | Twitter<http://twitter.com/#%21/SSBBARTGroup> | LinkedIn<http://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog> | Newsletter<http://eepurl.com/O5DP>

From: ALAN SMITH [mailto:alands289@gmail.com]
Sent: Thursday, November 12, 2015 5:07 PM
To: Jonathan Avila; public-mobile-a11y-tf@w3.org
Subject: Re: Example CSS issue with explore by touch


Of course there is also the keyboard commands and tab/quicknav arrow key interaction for yet the 4th method of testing for iOS and similar keyboard or device sidetapping for Android.
Regards. Alan
On Nov 12, 2015 2:39 PM, <alands289@gmail.com<mailto:alands289@gmail.com>> wrote:
Jonathan,

If you are careful, and depending on your screen size or zoom scale, you can touch focus on the radio buttons and their labels and hear the checkbox, its state and the label. Right, not the legend in my iOS version 8.4 (holding off upgrading to 9’s till later).

As you mentioned there are two ways to navigate and we should understand the value in testing both. Actually, three: 1) touch to explore, 2) swiping to next or previous, and 3) read all from top or from a current location.

This is more a factor of the radio buttons being to close to the label and is a better example of touch sizes and touch target spacing issues.

Regards,

Alan

Sent from Windows Mail

From: Jonathan Avila<mailto:jon.avila@ssbbartgroup.com>
Sent: ‎Thursday‎, ‎12‎ ‎November‎, ‎2015 ‎2‎:‎14‎ ‎PM
To: ALAN SMITH<mailto:alands289@gmail.com>, public-mobile-a11y-tf@w3.org<mailto:public-mobile-a11y-tf@w3.org>

Alan, perhaps I wasn’t very clear in my message.  With VoiceOver on iOS do not swipe to controls or use the keyboard.  Simply use explore by touch to locate the checkboxes and radio buttons.  You should not hear the role or state.  The legend not being announced is an iOS bug in versions less than 9.1.

The same thing occurs for me with Firefox and Talkback on Android 6.  When you do not swipe or use the keyboard and instead explore by touch you only hear the labels and not the role or checkbox.

In Chrome explore by touch seems to work correctly.

Jonathan

From: alands289@gmail.com<mailto:alands289@gmail.com> [mailto:alands289@gmail.com<mailto:alands289@gmail.com>]
Sent: Thursday, November 12, 2015 1:51 PM
To: Jonathan Avila <jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>>; public-mobile-a11y-tf@w3.org<mailto:public-mobile-a11y-tf@w3.org>
Subject: Re: Example CSS issue with explore by touch

Jonathan and team,

With VoiceOver I hear all labels, roles and states but focus never goes to the label for Favorite Music or Gender. And thus, those labels do not get read.
With Chrome and Talkback on Galaxy Note 4 and Galaxy Tab 2 I hear everything.

Sent from Windows Mail

From: Jonathan Avila<mailto:jon.avila@ssbbartgroup.com>
Sent: ‎Thursday‎, ‎12‎ ‎November‎, ‎2015 ‎1‎:‎34‎ ‎PM
To: public-mobile-a11y-tf@w3.org<mailto:public-mobile-a11y-tf@w3.org>

All, per our discussion on today’s call I have provided an example of where the swipe order experience is different from the explore by touch experience.

In the example below you can swipe to the checkboxes and hear the name, role, and state.  If you run your finger around the example with VoiceOver you will only hear the label because the actual control with the role and state are positioned off-screen.

http://mraccess77.github.io/examples/CSS_Checkboxes.html


So the point is that touch screen  screen reader users have two ways to they can navigate.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
703.637.8957<tel:703.637.8957> (o)
Follow us: Facebook<http://www.facebook.com/#%21/ssbbartgroup> | Twitter<http://twitter.com/#%21/SSBBARTGroup> | LinkedIn<http://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog> | Newsletter<http://eepurl.com/O5DP>