CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-toggle-content

CogJS is a production-ready JavaScript library that enhances web accessibility for neurodiverse and cognitively diverse users. Designed for flexibility and minimal setup, CogJS lets developers declaratively add support for cognitive needs using custom HTML attributes-no complex tooling or frameworks required.

cog-toggle-content is a declarative attribute that enables users to toggle between multiple versions of the same content-for example, simplified summaries, expanded explanations, or alternate formats. It improves comprehension and supports different levels of cognitive load.

What It Does

When applied to an element, cog-toggle-content automatically renders toggle buttons that cycle through child content versions. Each child <div> within the container represents a distinct version.

How It Works

• The first visible child is shown by default.
• A toggle button is injected automatically to cycle through content versions.
• Keyboard navigation and ARIA roles are added for accessibility.

Styling and Behavior

You can style the toggle UI using global CSS or inject scoped styles via your config. Buttons are keyboard accessible and labelled with appropriate ARIA attributes.

.cog-toggle-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

Enabling in HTML

Just add cog-toggle-content to a container and include two or more child <div>s with alternative versions of the content.

<section cog-toggle-content>
  <div>Short version: Step-by-step guide.</div>
  <div>Detailed version: Includes background, theory, and best practices.</div>
</section>

Accessibility Considerations

• Reduces Overload: Users only see one version at a time, helping reduce information fatigue.
• Supports Multiple Learning Styles: Enables access to both simplified and advanced versions.
• Accessible Controls: Toggle buttons are fully keyboard operable and labelled.

Testing cog-toggle-content

// Test Checklist
// - Verify toggle UI is injected
// - Cycle through all content versions
// - Confirm accessibility: keyboard support, ARIA roles, focus state
// - Ensure content remains readable in each mode

Best Practices for cog-toggle-content

• Keep Variants Clear: Make sure each version has a distinct purpose (e.g. summary, full detail).
• Use Plain Text: Avoid placing interactive elements inside content versions.
• Keep It Compact: Ideal for tips, summaries, definitions, and educational content.
• Label Versions Internally: Use headings inside each version to guide users visually.
• Combine With Other Features: Works well alongside cog-read or cog-background for richer cognitive support.