EXAMPLE_NAME

Replace this text with an overview of the example that is something like the following. Following are three example implementations of the design pattern for checkbox that demonstrate how to make a widget that uses the mixed value for aria-checked. These examples also show three different ways of labeling a collection of checkboxes so screen reader users can perceive that all members of the collection are part of a logical group.

In the below examples, a set of checkboxes is used to choose condiments for a sandwich. The user can use the first checkbox, labeled "All Condiments", to quickly specify a desire for either all or none of the condiments. If the user chooses to have some but not all condiments, the "All Condiments" checkbox will reflect that state as "partially checked"; this is the mixed value of aria-checked.

Examples

If there is a brief, important note that applies to all the implementations, put it here.

Example 1: title of this variation of the implementation

This is the preferred implementation whenever feasible. (Delete this paragraph if there is not a preferred implementation.)

This is the place where the reader will experience the first functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines.

Notes

  1. First of a short list of distinguishing characteristics of this implementation.
  2. Second of a short list of distinguishing characteristics of this implementation.
  3. ... Continue as needed.
  4. Do not describe common features that will be included in other sections below.

Example 2: title of this variation of the implementation

This is the place where the reader will experience the second functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines .

Notes

  1. First of a short list of distinguishing characteristics of this implementation.
  2. Second of a short list of distinguishing characteristics of this implementation.
  3. ... Continue as needed.
  4. Do not describe common features that will be included in other sections below.

Example 3: title of this variation of the implementation

This is the place where the reader will experience the third functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines .

Notes

  1. First of a short list of distinguishing characteristics of this implementation.
  2. Second of a short list of distinguishing characteristics of this implementation.
  3. ... Continue as needed.
  4. Do not describe common features that will be included in other sections below.

Other Accessibility Features

Optional section; delete if not needed. Use this section to list other accessibility features demonstrated in these examples. These could be features that are included to make the example more relevant to application in the real world but are not specifically part of the design pattern. For an example use of this section, see the listbox pattern example page.

  1. Feature 1
  2. Feature 2
  3. Etc.

Keyboard Support

Role, Property, State, and Tabindex Attributes

Attribute Applied to Element Usage
role="ROLE_NAME" HTML_ELEMENT Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.
aria-labelledby="ID_REF" HTML_ELEMENT Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.
And so on ... covering all relevant attributes ... ...

Javascript and CSS Source Code

HTML Source Code

Example 1: title of this variation of the implementation

Example 2: title of this variation of the implementation


    
    
    

    
Example 3: title of this variation of the implementation