Difference between revisions of "MikeS button as checkbox"

From Level Access Web Labs
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 17: Line 17:
  
 
<button type="button" aria-disabled="false" class=" _3B2QM9aA  RCjs6G-3 " role="checkbox" aria-checked="true" aria-labelledby="mike"><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><div id="mike" class="visuallyHidden" aria-hidden="true"><span>Turn on card ending in</span>...6680</div>
 
<button type="button" aria-disabled="false" class=" _3B2QM9aA  RCjs6G-3 " role="checkbox" aria-checked="true" aria-labelledby="mike"><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><div id="mike" class="visuallyHidden" aria-hidden="true"><span>Turn on card ending in</span>...6680</div>
 +
 +
<h4> Button into ARIA checkbox with aria-label</h4>
 +
 +
<button aria-label="Turn on card ending in ...6680" type="button" aria-disabled="false" class=" _3B2QM9aA  RCjs6G-3 " role="checkbox" aria-checked="true" ><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>end</h4>
 
<h4>end</h4>

Latest revision as of 17:54, 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

Button into ARIA checkbox with aria-labelledby pointing to separate DIV as accessible name

Turn on card ending in...6680

Button into ARIA checkbox with aria-labelledby pointing to separate DIV as accessible name hidden with aria-hidden

Button into ARIA checkbox with aria-label

end