Skip to main content

CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-chunk

cog-chunk is a declarative attribute that breaks long forms or complex content into smaller, more manageable steps. It supports users who benefit from progressive disclosure, such as those with ADHD, cognitive fatigue, or executive functioning challenges.

What It Does

When applied to a container such as a <form> or <section>, cog-chunk automatically adds "Next" and "Previous" buttons to help users navigate step-by-step. Each child <fieldset> is treated as an individual step. 

<form cog-chunk>
  <fieldset>
    <legend>Step 1: Choose a plan</legend>
    <label><input type="radio" name="plan" value="basic"> Basic</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>

  <fieldset>
    <legend>Step 2: Your details</legend>
    <label>Name: <input type="text" name="name"></label>
    <label>Email: <input type="email" name="email"></label>
  </fieldset>

  <fieldset>
    <legend>Step 3: Confirm</legend>
    <p>Please review your details before submitting.</p>
    <button type="submit">Submit</button>
  </fieldset>
</form>

How It Works

  • Each <fieldset> is shown one at a time
  • Navigation buttons are injected automatically
  • Users can use Tab/Shift+Tab or click buttons to progress
  • Focus is managed to improve keyboard accessibility

Accessibility Considerations

  • Reduces Overload: Breaks long processes into easier, bite-sized steps
  • Focus Management: Moves focus to the next chunk for seamless keyboard navigation
  • Form Preservation: Maintains native HTML structure for validation and accessibility

Testing cog-chunk

// Test Checklist
// - Apply cog-chunk to a form or content section
// - Verify only one fieldset is visible at a time
// - Confirm navigation buttons are keyboard accessible
// - Ensure focus moves correctly between steps
// - Check form validation still works as expected

Best Practices for cog-chunk

  • Keep Steps Short: Each <fieldset> should focus on a single task or group of related inputs
  • Use Clear Legends: Provide descriptive <legend> elements for each step
  • Include Progress Indicators: Optionally show step numbers or a progress bar for better orientation
  • Test for Keyboard Use: Make sure users can complete the process without a mouse
  • Combine With cog-hint or cog-read: Add guidance or narration where steps might be complex