Answered

How do we add a visual focus indicator to radio button?

(0) Share

Report

Posted on by nsoren

Hello,

I am doing accessibility work on a Power App, and my team needs to add a visual focus indicator to a radio button. For the other input fields a border appears when it receives focus.

It should be a small border around a radio button that appears when the Tab key is pressed and keyboard focus shifts to the first radio button in a group, when the selection is changed to another radio button, the visible focus indicator should shift to the button that is now selected.

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (1)

iAm_ManCat 18,228 Most Valuable Professional on at

Like (1)

Report

Hi @nsoren

With a radio in Power Apps, you don't tab into the radio selections themselves, you tab into the control and then use the arrow keys to move the selection to one of the radios - as you do this the radio gets selected, which visually indicates which item you are on (also this is read out by screen readers as you use the arrows through each item)

Cheers,

Sancho

Was this reply helpful? Yes No
nsoren 6 on at

Like (0)

Report

Thanks for the response, @iAm_ManCat .

You're correct that Tab will shift focus to the group, and the selection is controlled by the arrow keys. That part works as expected. To meet accessibility standards we need a visual border to appear around the group (or the currently selected radio button) when a Tab press shifts keyboard focus to the group.

The radio group on this app indicates the selection as a typical radio button does, but it is not indicating visually that the radio group is in keyboard focus with visual focus indicator as it does in this W3C example: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

Was this reply helpful? Yes No
Verified answer

iAm_ManCat 18,228 Most Valuable Professional on at

Like (1)

Report

Ok, well I think this will be something that may been mis-configured for the Radios in this particular App then, as the default radio works as described:

Has the BorderColor, BorderThickness, FocusedBorderColor, FocusedBorderThickness and the BorderType been set appropriately?

By Default the FocusedBorderColor will refer to the BorderColor of the control, so if someone has set BorderColor to Transparent (which is not the suggested way to hide borders, making the BorderThickness zero is the advised method), then the FocusedBorderColor will never show. The same will apply if the BorderType has been set to the 'None' style of border.

Was this reply helpful? Yes No