CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-remind

cog-remind is a declarative attribute that triggers timed nudges or reminders. It’s designed to help users stay on track during long-form tasks or timed activities - especially useful for users who benefit from periodic prompts or pacing support.

What It Does

When applied to an element, cog-remind="10m:Don't forget to submit!" will display a toast-style reminder after the specified time has passed. Reminders are delivered non-intrusively via accessible, visually distinct toast messages.

<form cog-remind="10m:Don't forget to submit!">
  <!-- form content here -->
</form>

How It Works

• Supports time values in seconds (s), minutes (m), or hours (h)
• Once the timer expires, a toast message appears near the top-right corner of the screen
• Reminders auto-dismiss after a few seconds, with optional styling via cogConfig

Styling and Placement

Toasts appear in a dedicated container at the top-right of the viewport and can be styled with custom CSS. CogJS injects default styles that you can override.

.cog-remind-toast {
  background: #000;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

Accessibility Considerations

• Polite Live Region: Toasts use aria-live="polite" to notify assistive tech without interrupting focus
• Non-Blocking: Does not steal focus or interrupt keyboard navigation
• Visual Distinction: Designed for high contrast and quick readability

Testing cog-remind

// Test Checklist
// - Add cog-remind to a container element
// - Confirm toast appears after the specified delay
// - Confirm screen reader announces it politely (not immediately)
// - Ensure it disappears after ~ns and does not interfere with input

Best Practices for cog-remind

• Use Sparingly: Reminders should support attention, not distract
• Be Encouraging: Use friendly, motivational copy in your messages
• Pair With Actions: Use in forms or learning modules to pace progress
• Adapt Timing: Match durations to task complexity (e.g. 5–15m for writing)
• Test On Devices: Check visibility and timing across screen sizes