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.
>
>