Skip to main content

CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-active

cog-active is a high-level control attribute that enables or disables all CogJS features on a specific element and its children. It is ideal for excluding interactive components, legacy sections, or third-party content from CogJS enhancements.

What It Does

When set to cog-active="false", all CogJS functionality (e.g., backgrounds, reading buttons, animation suppression) is disabled for the element and its descendants. This ensures those parts of the page remain unaffected by CogJS processing.

Enabling in HTML

To enable a theme, add cog-active="false" to the root element or any section of your page. 

<section cog-active="false">
  <p>This section is excluded from CogJS features.</p>
  <button>Custom feature not managed by CogJS</button>
</section>

Use Cases

  • Sections where CogJS styling or interactivity is undesirable
  • Third-party widgets or embedded apps
  • Legacy code areas not compatible with CogJS
  • Admin panels or developer tools

Default Behavior

By default, CogJS is globally active when window.cogConfig.active = true. Use cog-active to selectively override this behavior at the element level.

Accessibility Considerations

  • Respects Developer Intent: Gives precise control over where accessibility enhancements apply.
  • Avoids Conflict: Prevents CogJS from altering functionality in complex UI components.
  • Scoped Deactivation: Deactivation is inherited by all nested child elements.

Testing cog-active

// Test Checklist
// - Add cog-active="false" to a test block
// - Verify no CogJS buttons, backgrounds, or effects apply within it
// - Confirm that outside sections still behave as expected
// - Test nested elements and mixed usage

Best Practices for cog-active

  • Use for Isolation: Wrap non-accessible components or third-party UIs in cog-active="false".
  • Document Exclusions: Note why a section is excluded to aid future audits and maintenance.
  • Keep It Scoped: Don’t disable CogJS globally unless absolutely necessary.
  • Re-test Frequently: Revisit exclusions when features evolve or accessibility audits are conducted.