CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-path

cog-path is a declarative attribute that renders a breadcrumb-style navigation trail based on the user’s page history. It provides better spatial awareness for users with memory, orientation, or executive functioning challenges.

What It Does

When placed on a <nav> or container element, cog-path dynamically builds a path from previously visited CogJS-enhanced pages or sections. The trail updates in-session and helps users retrace their steps in complex UIs.

<nav cog-path aria-label="Breadcrumb"></nav>

How It Works

• Paths are stored using sessionStorage for up to 2 hours
• Each page visit adds a new step to the path, using the document <title> or an override
• Breadcrumbs are rendered in-order and link to previously visited pages

Optional Overrides

You can manually set the path label for a page using:

<meta name="cog-path-label" content="My Custom Title">

Accessibility Considerations

• Improves Orientation: Helps users keep track of where they are and how they got there
• Keyboard Navigable: Breadcrumbs are rendered as standard links for full keyboard support
• Screen Reader Compatible: Uses semantic markup with aria-label on the nav

Testing cog-path

// Test Checklist
// - Add cog-path to a <nav> element
// - Navigate through multiple CogJS pages
// - Confirm path shows correct order and page names
// - Verify accessibility for screen readers and keyboard users

Best Practices for cog-path

• Place Near Top: Add cog-path early in the page layout, typically before <main>
• Use Descriptive Titles: Page titles should be meaningful for the breadcrumb trail
• Keep It Short: Display only the last 3–5 steps to avoid clutter
• Combine With cog-chunk: Helps users retrace their journey through progressive content
• Respect Privacy: Breadcrumbs are session-scoped only-no permanent storage