CODEWITHSUNDEEP
iosaccessibilityvoiceoverwai-aria
slugolicious
slugolicious

Reputation: 17475

For iOS, Safari, VoiceOver, how do I get VoiceOver to read custom radio buttons?

I have a custom radio button that has a colorized and larger circle for the button. It's implemented using CSS as found in http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

enter image description here

However, when you have display:none in your CSS for the radio button, it confuses VoiceOver and the element is no longer read as a radio button even though the <input> type is 'radio'.

<input type="radio" value="1" id="rad1" name="station"><label for="rad1"><span></span>Helium</label>
<input type="radio" value="2" id="rad2" name="station"><label for="rad2"><span></span>Hydrogen</label>

input[type="radio"] 
   {
   display:none;
   }

I tried adding role='radio' to the <input> tag but that didn't help. When VoiceOver doesn't think it's a radio button, then you lose valuable interaction information. VO no longer says "radio button" or "1 of 4" or "checked".

All I can think of is not using display but rather using position and left to force the original radio button circle to be off the display.

input[type="radio"]
   {
   position: absolute;
   left: -1em;
   }

This does seem to work but doesn't seem "right". Is there something more elegant? Typically, with screen readers, you don't want to move an element off the visible display because with a screen reader, you can still put your focus on the item through various navigation techniques.

Also, when the circle itself is just pushed off the display, VoiceOver still knows about it and draws its focus rectangle to include the item that's off the display. This causes the rectangle to span all the way to the left edge.

Edit: Using left:-1em doesn't work either because it causes the display to scroll to the item that's off the screen when you swipe with VoiceOver on. My next attempt is to not hide the radio buttons (ie, don't use display:none) but leave the buttons there but cover them up with the background image used for the buttons (as explained in the webdesign url). This seems to work. I have 

left:-20px;
position: relative;

for my <span> tag (which is where the image is displayed) and that causes the image to be displayed on top of the radio button circle.

So the end result is that, visually, you don't see the native radio button circle but rather see my image circle, and VoiceOver still thinks everything is a radio and announces "1 of 4" and "checked".

I didn't mark this as my answer to my own question because it still feels like a hack. It sounds like a bug with VoiceOver that it doesn't announce the element as a radio button.

Upvotes: 3

Views: 4099

Answers (3)

Ryan Badour
Ryan Badour

Reputation: 582

Another option is to use role="radio" on the element you want screen readers to focus as the radio button. You'll want to make sure you add aria-checked, aria-disabled, etc as needed. Lastly, you can use aria-hidden on the real radio button to make screen readers ignore them.

More info. about role="radio": https://www.w3.org/TR/wai-aria-1.1/#radio

Upvotes: 0

Daniel G&#246;ransson
Daniel G&#246;ransson

Reputation: 1175

I use CSS to hide the actual <input type=radio/> under the <label>-graphic by using z-index: 2; or something else higher then the <input>'s z-index on the <label>. This is proven to work even on older iOS where pressing the label didn't focus/activate the input.

Another way is to hide the <input type=radio/> by hiding it off-screen like this:

position: absolute;
left: -999em;

(If you minus this could you explain why? This is the most accessible solution for all iOS versions and other User Agents/Assistive Technologies combos)

Upvotes: -1

ssollinger
ssollinger

Reputation: 170

display:none and visibility:hidden will hide content from screen readers. Using an absolute position off the screen is called "Screen reader text", this will hide the content visually but still have it read by a screen reader. This is true for all desktop and mobile screen readers.

So if you use display:none your radio button will be ignored, this is correct behaviour. The usual solution would be to place the radio button off the screen, but you are right that VoiceOver then places the focus on the left edge of the screen. Other (desktop) screen readers won't do that, it's just a weird behaviour of VoiceOver (imho a bug in VoiceOver). I wouldn't worry about this too much as this is just how VoiceOver works, but obviously your own suggested solution (placing the radio button behind the image) is possible in this case and is far better as the visual VoiceOver focus is then in the correct place. I wouldn't call it a "hack" - at least not any more that the very common practice of "screen reader text" is essentially just a hack.

Note there are often situations where you need to add some extra information for screen readers like VoiceOver where you don't have an image to hide the text behind, then placing the text off the screen may be the only option and the visible VoiceOver focus at the edge of the screen is a trade-off you need to accept.

A good summary of different techniques how to hide content can be found here: http://webaim.org/techniques/css/invisiblecontent/

Upvotes: 2

Related Questions