Creating ARIA Coding Examples (*** DRAFT ***)

creating-aria-coding-examples.md

Creating ARIA Coding Examples

Step 1: Use Example APG Template and Github Repositry

1. Fork Github ARIA authoring practices repository:
   • https://github.com/w3c/aria-practices
2. Create a new branch for adding an example
3. Find the corresponding directory for that widget pattern (e.g. aria-practices/examples/treeview for treeview examples)

• If your example will be using shared resources in the "css" and "js" directories, make a new file in the widget directory
• else if the example will not be using shared "css" and "js" directories create a new directory to put the example files

4. Create an example file using the [directory name] + N, where N is the example number (e.g. treeview-1.html) or is desciptive of the example (treeview-with-aria-selected.html).
5. Use the following template for the example file:

• https://github.com/w3c/aria-practices/blob/master/examples/coding-template/template3.html

Step 2: Use the APG information about the Widget

1. Read the APG guide for that the widget (e.g. role="grid")
2. Identify the features to be included in the example specification

• Keyboard interaction
• Roles
• Properties and states
• Focus styling
• Synchronization of visual and aria states (e.g. indicating a checked or unchecked checkbox)
  • Using inline images
  • Using CSS :before selector with the content property

Step 3: Documentation Sections

• Keyboard Interaction and Focus Management
  • Key stroke
  • Function
• ARIA Roles
  • Role
  • Usage
  • Accessible Name Source
  • Accessible description (optional)
  • Grouping label (optional)
• ARIA Properties and States
• Property/State
• Usage
• Tabindex values
  • Elements
  • Values
  • Purpose
• Events
  • Event
  • Element
  • Description
• Keyboard Focus Styling
  • Elements
  • Focus Style
  • Focus
  • Technique
• Synchronization of Visual and ARIA States
  • Elements
  • Description