Single-page JavaScript page navigation

Accessibility and usability concerns for single-page navigation

• Screen reader support:
  Use aria-live="polite" to announce content updates dynamically.
• Focus management:
  Shift focus to key elements like headings when content changes.
  Use tabindex="-1" on non-interactive elements to make them focusable. (but be careful how that could affect people)
• Scroll position:
  Reset the scroll to the top using window.scrollTo(0, 0) after view changes.
• Back/forward button behavior:
  Implement listeners for popstate or hashchange to handle navigation properly.
• Page titles:
  Dynamically update document.title to match the new content for accessibility and SEO.
• JavaScript dependency:
  Provide fallback functionality so the site remains usable if JavaScript fails.
• URL bookmarking/sharing:
  Ensure URLs reflect the correct state so users can bookmark or share them without issues.
• Navigation structure:
  Test with keyboard-only users to ensure proper focus management and smooth tab navigation.

Key difference between hash and history API navigation

• Hash navigation:
  Easier to implement but results in URLs with hashes (e.g., #about).
• History API navigation:
  Produces cleaner URLs (e.g., /about) but requires more effort to manage
  popstate events and accessibility concerns.