WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tab navigation for non-interactive content?

for

From: Birkir R. Gunnarsson
Date: Oct 28, 2016 3:35AM

That´s where ARIA comes in handy.
Use ARIA to mark custom elements as radi buttons and to group them.
Then use Javascript for keyboard interaction.
I´ve done this a few times with developers, and support with A.T. is
getting dece.t
See one of the examples I worked on at Deque University´s custom form
controls widget
https://dequeuniversity.com/library/aria/custom-controls/sf-checkboxes-radios
(you can copy the entire markup out of there and into a text editor if
you want to play with it).

On 10/28/16, JP Jamous < <EMAIL REMOVED> > wrote:
> Patrick,
>
> Funny you mentioned this. I was in a meeting with UX and UI managers
> yesterday and I think my recommendations were not welcomed by all of my
> audience.
>
> I was complaining about labels that were used as radio buttons. The devs
> completely masked them as radio buttons. As we were debating that, one thing
> came up that I took in consideration as I try to be open minded. A radio
> button is a radio button, you cannot style it with round corners or square
> ones or make it look cool. To achieve that desirable outcome they do that
> with Divs and other elements.
>
> Of course, JAWS and NVDA were having issues with the focus. JAWS would
> repeat the text a few times stating unselected and selected. So go figure
> out what status the radio button is in. NVDA, on the other hand, would not
> state anything as I up or down arrow through the list. However, visually it
> was changing between the radio buttons because of the tabindex that was
> applied to the label. In other words, it is receiving keyboard commands and
> not necessary NVDA commands.
>
> We settled on ensuring that devs do not approach this concept like that
> anymore. Stick to proper semantic.
>
> I continue to run into buttons and links and all kinds of elements that are
> masked as another element. Personally, I think it is pathetic. We have DOM
> elements that we are masking as other DOM elements.
>
> I wish W3 would come out with an update for HTML 5 and add an element called
> object and that can be only to create a custom control. That way browsers
> can provide keyboard access to it, SR manufacturers can provide support for
> it and so on.
>
> Trust me, we are not the only folks who are unhappy with that approach. SEO
> managers frown big time on things similar to that as they backfire on SEO.
>
> I hope we can overcome this issue someday.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Patrick H. Lauke
> Sent: Thursday, October 27, 2016 5:04 PM
> To: <EMAIL REMOVED>
> Subject: Re: [WebAIM] Tab navigation for non-interactive content?
>
> On 27/10/2016 20:04, Erik Conrad wrote:
>
>> I know that having a tabindex on non-interactive content is not a best
>> practice and may be unexpected or annoying for users who normally use
>> the keyboard to navigate, but as someone with experience in UI design
>> but new to accessibility, it seems like a fair trade off. I would
>> greatly appreciate any opinions about how wrong (or right?) I am about
>> that.
>
> Coincidentally, I've just recently pushed a change to the W3C HTML5.2
> editor's draft specifically warning that authors SHOULD NOT add tabindex
> values greater or equal to zero to non-interactive elements.
> https://w3c.github.io/html/editing.html#the-tabindex-attribute
>
> Some discussion on this change here:
> https://twitter.com/stevefaulkner/status/789885665253163008
>
> Generally, it's confusing for keyboard users in general (as by default only
> interactive controls/widgets receive focus). It's further problematic for
> users of assistive technologies, as these non-interactive elements, when
> focused, also lack a sensible role (since they're non-interactive, and
> usually are <div>s, <span>s or similar that don't get any special
> announcement of role by AT).
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.