Difference between revisions of "MikeS button as checkbox"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html> <body> <h4> Button into ARIA checkbox with inner text as accessible name</h4> <button type="button" aria-disabled="false" class=" _3B2QM9aA RCjs6G-3 " role="checkbox...")
 
Line 4: Line 4:
 
<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>Toggle on/off card ending in</span>...6680</div><svg 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>Toggle on/off 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 aria-labelledby pointing to inner text as accessible name</h4>
 
<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>Toggle on/off card ending in</span>...6680</div><svg 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" aria-labelledby="mike"><div id="mike" class="visuallyHidden"><span>Toggle on/off 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:16, 10 May 2018

Button into ARIA checkbox with inner text as accessible name

Button into ARIA checkbox with aria-labelledby pointing to inner text as accessible name