docs: add accessibility and keyboard shortcuts documentation

fern/products/docs/docs.yml

@@ -9,6 +9,8 @@ navigation:
         path: ./pages/getting-started/quickstart.mdx
       - page: Project structure
         path: ./pages/getting-started/project-structure.mdx
+      - page: Accessibility and keyboard shortcuts
+        path: ./pages/getting-started/accessibility.mdx
       - link: Customer showcase
         href: https://buildwithfern.com/showcase#docs-customers.alldocs-features
   - changelog: ./pages/changelog

fern/products/docs/pages/getting-started/accessibility.mdx

@@ -0,0 +1,104 @@
+---
+title: "Accessibility and keyboard shortcuts"
+subtitle: "Navigate and use Fern docs with keyboard shortcuts and accessibility features"
+description: "Learn about keyboard shortcuts and accessibility features in Fern documentation, including navigation shortcuts, search commands, and WCAG 2.1 AA color contrast enforcement."
+---
+
+Fern docs are designed to be accessible and keyboard-friendly, supporting navigation and interaction without requiring a mouse. This page outlines the keyboard shortcuts and accessibility features available in Fern documentation.
+
+## Keyboard shortcuts
+
+### Page navigation
+
+Navigate between previous and next pages in your documentation using keyboard shortcuts:
+
+- **Command + ← / →** (macOS) or **Alt + ← / →** (Windows/Linux): Navigate to the previous or next page
+  - Note: Some browsers may intercept these shortcuts for back/forward history navigation
+
+### Search
+
+Open the search dialog to quickly find content in your documentation:
+
+- **Command + K** (macOS) or **Ctrl + K** (Windows/Linux): Open search dialog
+- **/** (forward slash): Open search dialog when focus is not in a text input field
+  - Note: The `/` shortcut won't work when typing in an input field, textarea, or contenteditable element
+
+Once the search dialog is open:
+- **Arrow keys**: Navigate between search results
+- **Enter**: Select a search result
+- **Escape**: Close the search dialog
+
+### Ask AI panel
+
+Toggle the Ask AI side panel for AI-powered search assistance:
+
+- **Command + /** (macOS) or **Ctrl + /** (Windows/Linux): Toggle Ask AI panel
+  - Note: This is different from the single `/` key which opens the regular search dialog
+
+### API playground
+
+Control the API playground/explorer when available:
+
+- **Ctrl + `** (backtick): Toggle API playground/explorer
+- **Escape**: Close the API playground when it's open
+
+### Browser shortcuts
+
+Standard browser keyboard shortcuts also work in Fern docs:
+
+- **Command + ↑ / ↓** (macOS) or **Ctrl + ↑ / ↓** (Windows/Linux): Scroll to top or bottom of page (browser-native behavior)
+
+## Accessibility features
+
+### Interactive elements
+
+All interactive elements in Fern docs are keyboard accessible:
+
+- **Enter** or **Space**: Activate buttons and expandable sections
+- **Tab**: Move focus between interactive elements
+- **Shift + Tab**: Move focus backward between interactive elements
+
+### Dialogs and panels
+
+Dialogs and panels in Fern docs are designed for keyboard accessibility:
+
+- **Escape**: Close open dialogs, panels, and the API playground
+- Focus is trapped within open dialogs to prevent navigation outside the dialog
+- 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, including those with visual impairments.
+
+When you configure colors in your `docs.yml` file, Fern validates and adjusts accent colors to meet accessibility standards:
+
+- **Minimum contrast ratio**: 4.5:1 (WCAG AA standard for normal text)
+- **Enhanced contrast ratio**: 7:1 (WCAG AAA standard when feasible)
+- **UI elements**: 3:1 minimum contrast ratio for graphics and user interface components
+
+If your configured 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
+
+This ensures your documentation remains accessible regardless of your color choices, while still respecting your brand colors as closely as possible.
+
+## Troubleshooting
+
+### Keyboard shortcuts not working
+
+If keyboard shortcuts aren't working as expected:
+
+- **Browser conflicts**: Some browsers use the same shortcuts for their own features (e.g., Command + ← / → for history navigation). Try using the alternative shortcuts where available.
+- **Operating system conflicts**: Your OS may intercept certain keyboard combinations. Check your system keyboard settings if shortcuts aren't responding.
+- **Focus in input fields**: The `/` shortcut for search won't work when typing in a text field. Use **Command/Ctrl + K** instead, which works from anywhere.
+- **Extension conflicts**: Browser extensions may override keyboard shortcuts. Try disabling extensions if you experience issues.
+
+### Screen reader support
+
+Fern docs use semantic HTML and ARIA attributes to support screen readers. If you encounter accessibility issues with screen readers or other assistive technologies, please report them to the Fern team.
+
+## Feedback
+
+If you have suggestions for additional accessibility features or encounter any accessibility issues, please reach out to the Fern team through the [Slack community](https://buildwithfern.com/slack) or contact support.