Checkbox Examples

Question

When does the checkbox name repeat?

Checkbox with explicit label

• Checkbox name repeats.
• Currently, checkboxes are rendered like this in Scenery.

Working example

Markup

    <div tabindex="-1" id="container-421-482-716-792-783-766">
      <input id="421-482-716-792-783-766" tabindex="0" type="checkbox" style="width: 1px;">
      <label tabindex="-1" id="label-421-482-716-792-783-766" for="421-482-716-792-783-766">Two-Balloon Experiments</label>
      <p tabindex="-1" id="description-421-482-716-792-783-766">Play with two balloons or just one.</p>
    </div>
	

Checkbox with aria-label

• No repetition of checkbox name.
• Possible absrtaction: render all checkboxes without visual labels using aria-label.

Working example

Markup

	<div tabindex="-1">
	  <input id="eg-03" tabindex="0" type="checkbox" aria-label="Two-Balloon Experiments">
	  <p tabindex="-1" id="description-eg-03">Play with two balloons or just one.</p>
	</div>
	

Nested Checkbox

• No repetition of checkbox name.
• Currently, not possible to nest an input within a label element in Scenery.

Working example

Markup

	<div>
	    <label tabindex="-1" id="label-eg-05" for="eg-05">Two-Balloon Experiments<input id="eg-05" tabindex="0" type="checkbox"></label>
	    <p tabindex="-1" id="description-eg-05">Play with two balloons or just one.</p>
	</div>