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.

In this implementation:

  • First of a short list of distinguishing characteristics of this implementation.
  • Second of a short list of distinguishing characteristics of this implementation.
  • ... Continue as needed.
  • 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.

In this implementation:

  • First of a short list of distinguishing characteristics of this implementation.
  • Second of a short list of distinguishing characteristics of this implementation.
  • ... Continue as needed.
  • 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.

In this implementation:

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

Accessibility Features

Please replace this content with a list of accessibility features demonstrated in this implementation, such as the following. If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.

Keyboard Support

Key Function
key 1 Key 1 action
key 2 Key 2 action
key 3 Key 3 action

ARIA Roles, Properties, and States

Role Property/State Element Usage
role element X
  • Identify element with the role behavior
aria-xxxxx X[role="yyy"] element
  • Purpose of aria properties or aria states within example

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