Difference between revisions of "MikeS button as checkbox"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
<html> | <html> | ||
<body> | <body> | ||
| + | |||
| + | <h4> Button into ARIA checkbox with aria-labelledby pointing to inner text as accessible name</h4> | ||
| + | |||
| + | <button type="button" aria-disabled="false" class=" _3B2QM9aA RCjs6G-3 " role="checkbox" aria-checked="true" aria-labelledby="mike"><div id="mike" class="visuallyHidden"><span>Turn on card ending in</span>...6680</div><svg focusable="false" class="_30IrJbGi _3LZgyf2O kxNWfqxJ " width="62px" height="30px" viewBox="0 0 62 30" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="62" height="30" data-vert-line="true" class="_2wO7nvM2"/><rect x="16" y="7" width="2" height="16" class="_1xYoki70"/><circle cx="43.5" cy="15" r="7.5" class="_1ureT047"/><circle class="_2ltGxEzC" cx="46" cy="15" r="12.5" data-knob="true"/></svg></button> | ||
<h4> Button into ARIA checkbox with inner text as accessible name</h4> | <h4> Button into ARIA checkbox with inner text as accessible name</h4> | ||
<button type="button" aria-disabled="false" class=" _3B2QM9aA RCjs6G-3 " role="checkbox" aria-checked="true"><div class="visuallyHidden"><span>Turn on card ending in</span>...6680</div><svg focusable="false" class="_30IrJbGi _3LZgyf2O kxNWfqxJ " width="62px" height="30px" viewBox="0 0 62 30" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="62" height="30" data-vert-line="true" class="_2wO7nvM2"/><rect x="16" y="7" width="2" height="16" class="_1xYoki70"/><circle cx="43.5" cy="15" r="7.5" class="_1ureT047"/><circle class="_2ltGxEzC" cx="46" cy="15" r="12.5" data-knob="true"/></svg></button> | <button type="button" aria-disabled="false" class=" _3B2QM9aA RCjs6G-3 " role="checkbox" aria-checked="true"><div class="visuallyHidden"><span>Turn on card ending in</span>...6680</div><svg focusable="false" class="_30IrJbGi _3LZgyf2O kxNWfqxJ " width="62px" height="30px" viewBox="0 0 62 30" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="62" height="30" data-vert-line="true" class="_2wO7nvM2"/><rect x="16" y="7" width="2" height="16" class="_1xYoki70"/><circle cx="43.5" cy="15" r="7.5" class="_1ureT047"/><circle class="_2ltGxEzC" cx="46" cy="15" r="12.5" data-knob="true"/></svg></button> | ||
| − | |||
| − | |||
| − | |||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 00:53, 10 May 2018
