Difference between revisions of "IOS Fieldset"
Jump to navigation
Jump to search
Fieldset ARIA Test
| (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>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>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.
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
