On This Page

The "On This Page" component provides quick navigation to major sections within long-form content by automatically generating jump links to page headings. Use this pattern for comprehensive documents, policy pages, service guides, and any content where users need to quickly navigate to specific sections without scrolling. The component creates a table of contents with anchor links that help users understand page structure and jump directly to relevant information.

Do

  • Place prominently near page top - position the component early in the content flow so users can see navigation options immediately.
  • Use consistent heading structure - ensure your page uses proper H2 elements that the component can automatically detect and link to.
  • Keep section titles clear - write descriptive headings that accurately represent the content users will find in each section.
  • Limit to major sections - focus on primary content areas rather than every possible heading to avoid overwhelming users.
  • Test anchor functionality - verify that all generated links properly scroll to their target sections.
  • Consider mobile layout - ensure the two-column layout works well on smaller screens or adjust for single column.
  • Update dynamically - refresh the component when page content changes to maintain accurate navigation.

Don't

  • Don't use on short pages - avoid adding this component to content that doesn't require internal navigation.
  • Don't create too many links - limit to 6-8 major sections to prevent decision paralysis and maintain usability.
  • Don't forget anchor IDs - ensure all target headings have proper ID attributes for linking functionality.
  • Don't ignore accessibility - maintain proper ARIA labels and heading structure for screen reader users.
  • Don't use vague section titles - avoid generic headings like "Information" or "Details" that don't describe content.
  • Don't break the layout - ensure the component doesn't interfere with your main content flow or responsive design.
  • Don't duplicate navigation - avoid redundant navigation elements when this component is present.
  • Don't forget visual hierarchy - maintain clear distinction between the navigation component and main content.

Long Form Content Navigation Example

The example below demonstrates a clean, accessible navigation component that automatically generates jump links to major page sections. Shows proper semantic markup with ARIA labeling, responsive two-column layout, and clear visual hierarchy that helps users quickly navigate to specific content areas within long documents.

Open example in a new tab

Accessibility Features

  • Semantic navigation: Uses proper <nav> element with ARIA labeling to identify the component's purpose for screen readers.
  • Heading structure: Maintains logical heading hierarchy with H2 for the component title and proper link structure.
  • Keyboard navigation: All navigation links are accessible via keyboard with standard tab order and activation.
  • Screen reader support: ARIA-labelledby attribute connects the navigation to its heading for better context.
  • Focus management: Links provide clear focus indicators and maintain logical tab order within the component.
  • Descriptive links: Link text clearly describes the destination section without requiring additional context.
  • Landmark identification: Navigation landmark helps assistive technology users understand page structure and available navigation options.

Content Guidelines

  • Descriptive link text: Use section titles that clearly describe what users will find, avoiding generic terms or internal jargon.
  • Logical content order: Organize page sections in a logical flow that matches user needs and information hierarchy.
  • Consistent section depth: Focus on major content areas (typically H2 elements) rather than mixing different heading levels.
  • Actionable section titles: Write headings that indicate what users can accomplish or learn in each section.
  • Scannable structure: Ensure section titles work both as navigation links and as content headings within the page.
  • Plain language: Use terminology that all users can understand, avoiding technical jargon in navigation elements.

Implementation Considerations

  • Automatic generation: JavaScript or server-side logic can be implemented to automatically detect page headings and generate navigation.
  • Anchor ID management: Ensure consistent ID generation for headings, handling special characters and duplicate titles appropriately.
  • Smooth scrolling: Implement smooth scroll behavior for better user experience when jumping between sections.
  • Performance impact: Monitor page load times when automatically generating navigation for very long documents.
  • Content updates: Plan for how navigation updates when page content is modified or sections are added/removed.
Mis à jour: 02 décembre 2025