CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-ghost

cog-ghost is a declarative attribute that temporarily dims and blurs surrounding content when an element receives focus. It creates a spotlight-like effect that helps users visually isolate what they're working on, especially helpful for users who are easily distracted or visually overwhelmed.

What It Does

When applied to an input, button, or focusable element, cog-ghost renders an overlay that blurs and darkens the rest of the screen. This overlay is removed automatically on blur or when focus is lost. It improves focus, reduces visual noise, and aids task flow without permanent UI changes.

<input type="text" cog-ghost placeholder="Focus me to dim surroundings">

How It Works

• When the target element gains focus, a full-screen overlay is inserted
• The overlay dims and blurs everything except the target
• Focus and z-index are managed automatically to ensure keyboard accessibility
• The overlay is removed on blur or when the user navigates away

Styling and Placement

CogJS injects a reusable overlay and default styles for the dim effect. You can override these using custom CSS or update them via the cogConfig if needed.

.cog-ghost-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 9998;
}

.cog-ghost-target {
  position: relative !important;
  z-index: 9999 !important;
}

Accessibility Considerations

• Focus Preserving: Overlay never traps or blocks keyboard focus
• Non-Modal: Does not interfere with dialogs or forms
• Auto-Reversible: Automatically resets on blur — no need to manage state manually

Testing cog-ghost

// Test Checklist
// - Add cog-ghost to an input or button
// - Focus the element and confirm the background dims
// - Confirm you can continue typing or tabbing normally
// - Ensure the overlay disappears on blur
// - Check screen readers are not interrupted

Best Practices for cog-ghost

• Use Sparingly: Apply only to elements where focus isolation genuinely helps
• Avoid Layout Shift: Don’t combine with elements that trigger modals or reflows
• Pair With Hints: Combine with cog-hint to offer guidance in context
• Theme-Aware: If using dark mode or custom backgrounds, test overlay contrast