0

Below is the code snippet for radio button. Requirement is screen reader should read it like a “For an insurance cover of $75,000, the monthly premium is $29.80. Radio button.”

<input class="form-input" type="radio" id="rb_0" name="insuranceOptionTab1" value="3">
<label class="form-label" for="rb_0"><span class="bold-one-click">$75,000</span> | $29.80</label>

Is there any way I can implement the custom message in accessibility.

chandru
  • 157
  • 1
  • 2
  • 14

1 Answers1

0
You can use the aria-describedby property to read the custom message to the user when using screen reader.. 

Nice example explained in the link 
http://www.oaa-accessibility.org/examplep/checkbox1/

use the class .offscreen to hide the content from displaying the content on the screen

.offscreen {
    position: absolute;
    left: -200em;
    top: -20em;
}
Hemraj Jain
  • 1
  • 2