Accessible FAQ Navigation with External Links

📝 Overview

This document discusses the accessibility concerns and best practices for including an FAQ button in a website's main navigation when the FAQ page resides on an external website. It also provides a CSS-only solution to notify keyboard users about external links without disrupting sighted users using a mouse.

⚠️ Accessibility Concerns

❌ Why an External FAQ Link in Main Nav Is a Problem

🔄 Unexpected Navigation Disrupts Users
- Screen reader and keyboard users expect main navigation links to be internal unless explicitly indicated.
- Taking users to another website without warning can be disorienting, especially for those with cognitive disabilities.
🧭 Loss of Context
- Users may lose track of where they were, particularly if the external site does not provide an easy way back.
📢 Screen Reader Announcement Issues
- JAWS and NVDA do not automatically announce external links unless coded properly.
- Users may unknowingly leave the current site.

✅ Best Practices for External Links in Navigation

🔗 Indicate That the FAQ Link Is External

Use aria-label and a visible icon to notify users that the link leads to an external website:

<a href="https://externalfaq.com" target="_blank" rel="noopener" aria-label="FAQ (opens in a new tab)">FAQ <span aria-hidden="true">🔗</span></a>

📂 Use a Separate Section for External Links

Instead of placing the FAQ in the main navigation, consider grouping it under "Help" or "Support."

🚨 Provide a Warning Before Leaving (Only for Keyboard Users)

A pure CSS solution using :focus-visible ensures that only keyboard users receive a warning before navigating to an external link.

🎨 CSS Implementation:

/* Style the external link */
a[rel~="external"]::after {
  content: " (Opens in a new tab)";
  font-size: 0.9em;
  color: #888;
  visibility: hidden; /* Hide by default */
  margin-left: 0.5em;
}

/* Show the warning ONLY when the link is focused via keyboard */
a[rel~="external"]:focus-visible::after {
  visibility: visible;
}

🏗 HTML Usage:

<a href="https://externalfaq.com" rel="external noopener">FAQ</a>

🔍 How This Solution Works

rel~="external" → Targets only external links.
::after pseudo-element → Adds a non-intrusive text warning.
visibility: hidden; → Keeps the message hidden unless needed.
:focus-visible → Shows the warning only when navigating with a keyboard (not on mouse clicks).

🎯 Why This Approach Is Ideal

✅ No JavaScript needed ✅ Only affects keyboard users (benefits screen reader + keyboard users) ✅ No disruption for sighted mouse users

🎯 Conclusion

Placing an external FAQ link in the main navigation is not an accessibility best practice unless it is clearly labeled as external.
A simple CSS-only solution can notify keyboard users without disrupting the experience for sighted users using a mouse.
Proper ARIA labels and structured navigation can improve the user experience for all visitors, including those using assistive technologies.

📚 References

By following these guidelines, you ensure that your website remains accessible, predictable, and user-friendly. ✅

dragontheory/accessible_faq_navigation_with_external_links.md