Difference between revisions of "IOS Fieldset"

From Level Access Web Labs
Jump to navigation Jump to search
 
(17 intermediate revisions by 3 users not shown)
Line 7: Line 7:
 
<body>
 
<body>
 
<form name="form1" method="post" action="">
 
<form name="form1" method="post" action="">
   </p>
+
   <p>This fieldset has no enhancements to overcome the missed legend tag</p>
  This fieldset has no enhancements to overcome the missed legend tag</p>
 
 
   <fieldset>
 
   <fieldset>
 
     <legend>What fruit is also a color?</legend>
 
     <legend>What fruit is also a color?</legend>
Line 30: Line 29:
 
     </p>
 
     </p>
 
   </fieldset>
 
   </fieldset>
   </p>
+
   <p>This fieldset has the legend included as an aria-describedby for each radio button. It is read out as a hint in iOS</p>
  This fieldset has the legend included as an aria-describedby for each radio button. It is read out as a hint in iOS</p>
 
 
   <fieldset>
 
   <fieldset>
 
     <legend><span id="colorq">What color is also a fruit?</span></legend>
 
     <legend><span id="colorq">What color is also a fruit?</span></legend>
 
     <p>
 
     <p>
       <label id>
+
       <label id="redl">
         <input aria-describedby="colorq" type="radio" name="color" value="Red" id="color_0">
+
         <input aria-describedby="colorq redl" type="radio" name="color" value="Red" id="color_0">
 
         Red</label>
 
         Red</label>
 
       <br>
 
       <br>
       <label>
+
       <label id="bluel">
         <input aria-describedby="colorq" type="radio" name="color" value="Blue" id="color_1">
+
         <input aria-describedby="colorq bluel" type="radio" name="color" value="Blue" id="color_1">
 
         Blue</label>
 
         Blue</label>
 
       <br>
 
       <br>
       <label>
+
       <label id="orange">
         <input aria-describedby="colorq" type="radio" name="color" value="Orange" id="color_2">
+
         <input aria-describedby="colorq orangel" type="radio" name="color" value="Orange" id="color_2">
 
         Orange</label>
 
         Orange</label>
 
       <br>
 
       <br>
       <label>
+
       <label id="greenl">
         <input aria-describedby="colorq" type="radio" name="color" value="Green" id="color_3">
+
         <input aria-describedby="colorq greenl" type="radio" name="color" value="Green" id="color_3">
 
         Green</label>
 
         Green</label>
 +
      <br>
 +
    </p>
 +
  </fieldset>
 +
  <p>This fieldset has the aria-labelledby with no legend.</p>
 +
  <h2 id="colorq">What fruit is also a color?</h2>
 +
  <fieldset aria-labelledby="colorq">
 +
    <p>
 +
      <input type="radio" name="fruit" value="Apple" id="fruit_0">
 +
      <label for="fruit_0">Apple</label>
 +
      <br>
 +
      <input type="radio" name="fruit" value="Grape" id="fruit_1">
 +
      <label for="fruit_1">Grape</label>
 +
      <br>
 +
      <input type="radio" name="fruit" value="Orange" id="fruit_2">
 +
      <label for="fruit_2">Orange</label>
 +
      <br>
 +
      <input type="radio" name="fruit" value="Pear" id="fruit_3">
 +
      <label for="fruit_3">Pear</label>
 
       <br>
 
       <br>
 
     </p>
 
     </p>
 
   </fieldset>
 
   </fieldset>
 
</form>
 
</form>
 
 
</body>
 
</body>
 
</html>
 
</html>
 
+
== Notes ==
 +
* Android will not read the label of the radio button unless it is included in the aria-describedby attribute. In such a case the label is read twice
 
[[Category:Legend Element]]
 
[[Category:Legend Element]]
 
[[Category:iOS]]
 
[[Category:iOS]]
 
[[Category:Mobile]]
 
[[Category:Mobile]]
 +
[[Category:ARIA]]

Latest revision as of 04:16, 7 February 2018

VoiceOver in iOS prior to iOS 9 does not support the LEGEND tag. iOS will skip it entirely making the LEGEND content completely inaccessible.

Fieldset ARIA Test

This fieldset has no enhancements to overcome the missed legend tag

What fruit is also a color?





This fieldset has the legend included as an aria-describedby for each radio button. It is read out as a hint in iOS

What color is also a fruit?





This fieldset has the aria-labelledby with no legend.

What fruit is also a color?





Notes

  • Android will not read the label of the radio button unless it is included in the aria-describedby attribute. In such a case the label is read twice