Skip to main content

CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-break

cog-break is a declarative attribute that injects a "Take a Break" button into your page. When clicked, it opens a fully accessible modal for a timed break, including a countdown timer, custom title, message, and a cancel option. This feature encourages self-regulation and reduces cognitive fatigue during long tasks or reading sessions.

What It Does

When attached to any element, cog-break adds a visible button. Clicking it opens a break modal with a live countdown. After the set duration (e.g., 20 minutes), the modal automatically closes. Users can cancel the break early if needed. 

<div cog-break="20"></div>

<script>
// Optional custom config
window.cogBreakConfig = {
  buttonText: 'Pause Now',
  title: 'Break Time!',
  message: 'Enjoy your well-deserved rest.',
  cancelButton: 'End Break'
};
</script>

How It Works

  • On load, a "Take a Break" button is added inside the element
  • On click, a full-screen modal appears with a title, countdown, and cancel button
  • The countdown updates every minute (e.g., "You have 19 minutes left")
  • The user can either cancel manually or wait for the break time to expire

Styling and Placement

The modal and buttons are styled automatically by CogJS. You can override styles via your own CSS targeting the following classes: 

.cog-break-modal {
  /* Modal overlay styles */
}

.cog-break-inner {
  /* Inner modal box styles */
}

.cog-break-title {
  /* Title inside modal */
}

.cog-break-message {
  /* Countdown message */
}

.cog-break-cancel {
  /* Cancel break button */
}

.cog-break-button {
  /* "Take a Break" trigger button */
}

Accessibility Considerations

  • Full Modal Structure: Uses role="dialog" and aria-modal="true" for screen readers
  • Focus Trap: Focus is moved to the modal and trapped until canceled or completed
  • Escape Key Support: Pressing Esc cancels the break and closes the modal
  • Timer Updates: Countdown messages are short and visually accessible without creating alert spam

Testing cog-break

// Test Checklist
// - Add cog-break to a div
// - Verify "Take a Break" button appears
// - Click button: modal opens with title, message, cancel button
// - Confirm countdown updates every minute
// - Press Escape or click Cancel to close modal
// - Let countdown expire and ensure modal closes automatically

Best Practices for cog-break

  • Use During Long Tasks: Ideal for forms, study materials, or interactive sessions over 10+ minutes
  • Customise Messages: Friendly, supportive language improves user experience
  • Default to Gentle: Avoid urgent or warning language - break time should feel positive
  • Combine with cog-ghost: For extra focus, use cog-ghost to dim background when the break starts
  • Keep Breaks Optional: Don't force breaks; offer them as support, not as an interruption