Implicit label/radio issue in JAWS - IE Edge & IE 11

In this example below you will see how to do a Implicit label/radio issue in JAWS - IE Edge & IE 11 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jasonday, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jasonday ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Implicit label/radio issue in JAWS  - IE Edge & IE 11</title>
  
  
  
  
  
</head>

<body>

  <h3>
Implicit labels
</h3>
<fieldset>
  <legend>
    fieldset 1
  </legend>
  <label>
    <input type="radio" name="color"> color 1
  </label>
  <label>
    <input type="radio" name="color"> color 2
  </label>
  <label>
    <input type="radio" name="color"> color 3
  </label>
</fieldset>
<h4>Issues:</h4>
<ul>
  <li>IE Edge - radio count for each radio is "1 of 1"</li>
  <li>IE 11 - no count of radios in group is announced, and each label is announced as the first option's label when an option has been selected. In this example, every radio is announced "color 1"</li>
</ul>
<br/>
<br/>
<h3>
Explicit labels
</h3>
<fieldset>
  <legend>
    fieldset 2
  </legend>
  <input type="radio" name="color2" id="a">
  <label for="a">color 1</label>
  <input type="radio" name="color2" id="b">
  <label for="b">color 2</label>
  <input type="radio" name="color2" id="c">
  <label for="c">color 3</label>
</fieldset>
<h4>Issues:</h4>
<ul>
  <li>IE 11 - no count of radios in group is announced</li>
</ul>
  
  

</body>

</html>

Comments