content/patterns/checkbox/checkbox-pattern.html - external/github.com/w3c/aria-practices - Git at Google

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <title>Checkbox Pattern</title>

     <!-- Core JS and CSS shared by all patterns -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
       <h1>Checkbox Pattern</h1>

       <section id="about">
         <h2>About This Pattern</h2>
         <p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which  allow an additional third state known as partially checked.</p>
         <p>
           One common use of a tri-state checkbox can be found in software installers where a single tri-state checkbox is used to represent and control the state of an entire group of install options.
           And, each option in the group can be individually turned on or off with a dual state checkbox.
         </p>
         <ul>
           <li>If all options in the group are checked, the overall state is represented by the tri-state checkbox displaying as checked.</li>
           <li>If some of the options in the group are checked, the overall state is represented with the tri-state checkbox displaying as partially checked.</li>
           <li>If none of the options in the group are checked, the overall state of the group is represented with the tri-state checkbox displaying as not checked.</li>
         </ul>
         <p>The user can use the tri-state checkbox to change all options in the group with a single action:</p>
         <ul>
           <li>Checking the overall checkbox checks all options in the group.</li>
           <li>Unchecking the overall checkbox will uncheck all options in the group.</li>
           <li>
             And, In some implementations, the system may remember which options were checked the last time the overall status was partially checked.
             If this feature is provided, activating the overall checkbox a third time recreates that partially checked state where only some options in the group are checked.
           </li>
         </ul>
       </section>

       <section id="examples">
         <img alt="" src="../../images/pattern-checkbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/checkbox.html">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>
           <li><a href="examples/checkbox-mixed.html">Checkbox (Mixed-State) Example</a>: Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML <code>fieldset</code>.</li>
         </ul>
       </section>

       <section id="keyboard_interaction">
         <h2>Keyboard Interaction</h2>
         <p>When the checkbox has focus, pressing the <kbd>Space</kbd> key changes the state of the checkbox.</p>
       </section>

       <section id="roles_states_properties">
         <h2>WAI-ARIA Roles, States, and Properties</h2>
         <ul>
           <li>The checkbox has role <a href="#checkbox" class="role-reference">checkbox</a>.</li>
           <li>
             The checkbox has an accessible label provided by one of the following:
             <ul>
               <li>Visible text content contained within the element with role <code>checkbox</code>.</li>
               <li>A visible label referenced by the value of <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set on the element with role <code>checkbox</code>.</li>
               <li><a href="#aria-label" class="property-reference">aria-label</a> set on the element with role <code>checkbox</code>.</li>
             </ul>
           </li>
           <li>When checked, the checkbox element has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>true</code>.</li>
           <li>When not checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>false</code>.</li>
           <li>When partially checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>mixed</code>.</li>
           <li>If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role <a href="#group" class="role-reference">group</a> that has the property <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set to the ID of the element containing the label.</li>
           <li>If the presentation includes additional descriptive static text relevant to a checkbox or checkbox group, the checkbox or checkbox group has the property <a href="#aria-describedby" class="property-reference">aria-describedby</a> set to the ID of the element containing the description.</li>
         </ul>
       </section>
     </main>
   </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Checkbox Pattern</title>

	<!-- Core JS and CSS shared by all patterns -->
	<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
	<link rel="stylesheet" href="../../shared/css/core.css">
	<script src="../../shared/js/highlight.pack.js"></script>
	<script src="../../shared/js/app.js"></script>
	<script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
	</head>
	<body>
	<main>
	<h1>Checkbox Pattern</h1>

	<section id="about">
	<h2>About This Pattern</h2>
	<p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.</p>
	<p>
	One common use of a tri-state checkbox can be found in software installers where a single tri-state checkbox is used to represent and control the state of an entire group of install options.
	And, each option in the group can be individually turned on or off with a dual state checkbox.
	</p>
	<ul>
	<li>If all options in the group are checked, the overall state is represented by the tri-state checkbox displaying as checked.</li>
	<li>If some of the options in the group are checked, the overall state is represented with the tri-state checkbox displaying as partially checked.</li>
	<li>If none of the options in the group are checked, the overall state of the group is represented with the tri-state checkbox displaying as not checked.</li>
	</ul>
	<p>The user can use the tri-state checkbox to change all options in the group with a single action:</p>
	<ul>
	<li>Checking the overall checkbox checks all options in the group.</li>
	<li>Unchecking the overall checkbox will uncheck all options in the group.</li>
	<li>
	And, In some implementations, the system may remember which options were checked the last time the overall status was partially checked.
	If this feature is provided, activating the overall checkbox a third time recreates that partially checked state where only some options in the group are checked.
	</li>
	</ul>
	</section>

	<section id="examples">
	<img alt="" src="../../images/pattern-checkbox.svg">
	<h2>Examples</h2>
	<ul>
	<li><a href="examples/checkbox.html">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>
	<li><a href="examples/checkbox-mixed.html">Checkbox (Mixed-State) Example</a>: Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML <code>fieldset</code>.</li>
	</ul>
	</section>

	<section id="keyboard_interaction">
	<h2>Keyboard Interaction</h2>
	<p>When the checkbox has focus, pressing the <kbd>Space</kbd> key changes the state of the checkbox.</p>
	</section>

	<section id="roles_states_properties">
	<h2>WAI-ARIA Roles, States, and Properties</h2>
	<ul>
	<li>The checkbox has role <a href="#checkbox" class="role-reference">checkbox</a>.</li>
	<li>
	The checkbox has an accessible label provided by one of the following:
	<ul>
	<li>Visible text content contained within the element with role <code>checkbox</code>.</li>
	<li>A visible label referenced by the value of <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set on the element with role <code>checkbox</code>.</li>
	<li><a href="#aria-label" class="property-reference">aria-label</a> set on the element with role <code>checkbox</code>.</li>
	</ul>
	</li>
	<li>When checked, the checkbox element has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>true</code>.</li>
	<li>When not checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>false</code>.</li>
	<li>When partially checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>mixed</code>.</li>
	<li>If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role <a href="#group" class="role-reference">group</a> that has the property <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set to the ID of the element containing the label.</li>
	<li>If the presentation includes additional descriptive static text relevant to a checkbox or checkbox group, the checkbox or checkbox group has the property <a href="#aria-describedby" class="property-reference">aria-describedby</a> set to the ID of the element containing the description.</li>
	</ul>
	</section>
	</main>
	</body>
	</html>