Accessibility - focus order for radio selects with tool tips

Question

I have a group of 3 radio selects each radio select has a tool tip next to it. I'm not sure what order each of these should receive keyboard focus?

Should it be... 1. First radio select 2. First corresponding tool tip 3. Second radio 3. Second tool tip etc.

Answer 1

You don't really get a choice if you're using a native <input type='radio'>. Even if your code looked like:

<input type="radio" name="pet" id="r1" value="dog"><label for="r1">Dog</label> <a href='#'>tooltip 1</a><br>
<input type="radio" name="pet" id="r2" value="cat"><label for="r2">Cat</label> <a href='#'>tooltip 2</a><br>
<input type="radio" name="pet" id="r3" value="fish"><label for="r3">Fish</label> <a href='#'>tooltip 3</a><br>

Once a radio button is selected, the group of radio buttons acts like one tabstop. The active button determines where in the tab order it is. In the case above, where "Cat" is selected, the tab order is "tooltip 1", radio group, "tooltip 2", "tooltip 3". If "Dog" were selected, the order would be radio group, "tooltip 1", "tooltip 2", "tooltip 3".

Answer 2

Basicly, a tooltip isn't ment to be focusable normally, because you never interact with it per se directly.

Equally as for regular mouse users, the tooltip must appear for keyboard users and be spoken by screen readers. However, as nothing happens when clicking on it and there is no real interaction with it, it's theortically non-sense to have it focusable.

You can use aria-live to make the text of the tooltip be spoken by screen readers when it appears on screen.