CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-delay

cog-delay is a declarative attribute that adds a short, cancelable countdown before a button’s action is triggered. It’s ideal for preventing accidental clicks, especially on destructive or irreversible actions like “Delete” or “Submit”.

What It Does

When added to a <button>, cog-delay intercepts the click and presents a short confirmation window with a visible countdown and cancel button. If not canceled, the action proceeds. This pattern slows down risky actions just enough to prevent mistakes, without disrupting flow.

<button cog-delay="5" cog-onclick="deleteItem">
  Delete Account
</button>

<script>
  function deleteItem(btn) {
    alert("Account deleted.");
  }
</script>

How It Works

• On click, the button shows a static label and a countdown timer (e.g., “Confirm action (5)”)
• A cancel button appears alongside for a limited time
• If not canceled, the original action (via cog-onclick or native click) is triggered
• If canceled, the button returns to its original state

Styling and Placement

The delay mechanism uses a static label with a visually updated countdown. You can style the countdown and cancel button with CSS:

.cog-delay-countdown {
  margin-left: 0.5rem;
  opacity: 0.75;
}

.cog-delay-cancel {
  margin-left: 1rem;
  font-size: 0.9rem;
  padding: 0.3rem 0.75rem;
}

Accessibility Considerations

• Live Region Announcement: Announces “You have X seconds to cancel” once when activated
• Focus Safe: Keeps original button label static to avoid “selected” announcements
• Keyboard Accessible: Cancel button is tabbable and labeled for screen readers
• Describedby Support: Countdown is optionally linked via aria-describedby

Testing cog-delay

// Test Checklist
// - Add cog-delay to a button with cog-onclick handler
// - Click the button and verify countdown starts
// - Confirm the cancel button is visible and accessible
// - Wait for countdown to trigger original action
// - Confirm screen reader announces the countdown message once
// - Cancel and verify button resets correctly

Best Practices for cog-delay

• Use on Destructive Actions: Great for delete, reset, or irreversible choices
• Keep it Short: 3-7 seconds is ideal — just enough to pause but not frustrate
• Don’t Overuse: Only use when the user benefit outweighs the delay
• Pair With cog-ghost: Combine with cog-ghost for a full-screen dimming effect during delay
• Write Clear Labels: Use labels like “Delete account” or “Reset all” to help users make informed decisions