Accessibility

Overview

Fern docs use semantic HTML and ARIA attributes to support screen readers and keyboard navigation.

Feedback

Reach out to support@buildwithfern.com to report accessibility issues or suggest improvements.

Keyboard navigation

All interactive elements support keyboard navigation using Tab, Enter, and Space keys. See keyboard shortcuts for the complete list.

Dialogs and panels

Dialogs and panels in Fern docs are designed for keyboard accessibility. Focus is trapped within open dialogs to prevent navigation outside the dialog, and the search dialog supports full keyboard navigation with arrow keys.

Color contrast

Fern automatically enforces WCAG 2.1 AA color contrast ratios to ensure text and interactive elements are readable for all users:

  • Normal text: 4.5:1 minimum (WCAG AA)
  • UI elements: 3:1 minimum
  • Enhanced: 7:1 when feasible (WCAG AAA)

When you configure colors in your docs.yml file, Fern validates accent colors. If your accent color doesn’t meet the minimum contrast ratio against your background color, Fern will:

  1. Display a warning during fern check validation
  2. Automatically adjust the accent color at runtime to meet WCAG AA standards
  3. Attempt to further adjust toward WCAG AAA (7:1) when possible