separate into overview and shortcuts page, make more concise

Author: devalog

fern/products/docs/docs.yml

@@ -9,8 +9,6 @@ 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
@@ -164,6 +162,13 @@ navigation:
         path: ./pages/customization/user-feedback.mdx
       - page: Custom CSS & JS
         path: ./pages/component-library/custom-components/custom-css-js.mdx
+  - section: Accessibility
+    collapsed: true
+    contents:
+      - page: Overview
+        path: ./pages/accessibility/overview.mdx
+      - page: Keyboard shortcuts
+        path: ./pages/accessibility/keyboard-shortcuts.mdx
   - section: API references
     collapsed: true
     contents:

fern/products/docs/pages/accessibility/keyboard-shortcuts.mdx

@@ -0,0 +1,59 @@
+---
+title: "Keyboard shortcuts"
+description: "Learn about keyboard shortcuts in Fern documentation, including navigation shortcuts, search commands, Ask AI panel controls, and API playground shortcuts."
+---
+
+Fern docs include built-in keyboard shortcuts for navigation, search, and interactive features.
+
+## Interactive elements
+
+| Action | Shortcut |
+|--------|----------|
+| Move focus between interactive elements | `Tab` |
+| Move focus backward between interactive elements | `Shift` + `Tab` |
+| Activate [buttons](/learn/docs/writing-content/components/button) and [expandable sections](/learn/docs/writing-content/components/accordions) | `Enter` or `Space` |
+| Close open dialogs, panels, and the API playground | `Escape` |
+| Toggle Ask AI panel | `Command` + `/` (macOS)<br/>`Ctrl` + `/` (Windows/Linux) |
+| Toggle API playground/explorer | `Ctrl` + `` ` `` |
+
+<Note>
+The `Command`/`Ctrl` + `/` shortcut is different from the single `/` key which opens the regular [search dialog](#search).
+</Note>
+
+## Navigation
+
+| Action | Shortcut |
+|--------|----------|
+| Navigate to the previous or next page | `Command` + `← / →` (macOS)<br/>`Alt` + `← / →` (Windows/Linux) |
+| Scroll to top or bottom of page | `Command` + `↑ / ↓` (macOS)<br/>`Ctrl` + `↑ / ↓` (Windows/Linux) |
+
+<Note>
+Some browsers may intercept these shortcuts for back/forward history navigation.
+</Note>
+
+## Search
+
+| Action | Shortcut |
+|--------|----------|
+| Open search dialog | `Command` + `K` (macOS)<br/>`Ctrl` + `K` (Windows/Linux) |
+| Open search dialog when focus isn't in a text input field | `/` (forward slash) |
+
+<Note>
+The `/` shortcut won't work when typing in an input field, `textarea`, or `contenteditable` element.
+</Note>
+
+Within the search dialog:
+
+| Action | Shortcut |
+|--------|----------|
+| Navigate between search results | `Arrow keys` |
+| Select a search result | `Enter` |
+
+## Troubleshooting
+
+If keyboard shortcuts aren't working:
+
+- **Browser conflicts**: Some browsers use the same shortcuts for their own features (e.g., `Command` + `← / →` for history navigation).
+- **Operating system conflicts**: Your OS may intercept certain keyboard combinations. Check your system keyboard settings.
+- **Focus in input fields**: The `/` shortcut won't work when typing in a text field. Use `Command`/`Ctrl` + `K` instead.
+- **Extension conflicts**: Browser extensions may override keyboard shortcuts. Try disabling extensions.

fern/products/docs/pages/accessibility/overview.mdx

@@ -0,0 +1,35 @@
+---
+title: "Overview"
+description: "Discover the accessibility features in Fern documentation, including keyboard navigation, Web Content Accessibility Guidelines (WCAG) 2.1 AA color contrast enforcement, and screen reader support."
+---
+
+Fern docs use semantic HTML and ARIA attributes to support screen readers and keyboard navigation.
+
+<Note title="Feedback">
+    Reach out to [email protected] to report accessibility issues or suggest improvements.
+</Note>
+
+## Keyboard navigation
+
+All interactive elements support keyboard navigation using `Tab`, `Enter`, and `Space` keys. See [keyboard shortcuts](/learn/docs/accessibility/keyboard-shortcuts#interactive-elements) for the complete list.
+
+## Dialogs and panels
+
+Dialogs and panels in Fern docs are designed for [keyboard accessibility](/learn/docs/accessibility/keyboard-shortcuts#interactive-elements). 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](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) color contrast ratios to ensure text and interactive elements are readable for all users:
+
+- **Normal text**: 4.5:1 minimum ([WCAG AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum))
+- **UI elements**: 3:1 minimum
+- **Enhanced**: 7:1 when feasible ([WCAG AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced))
+
+When you [configure colors in your `docs.yml` file](/learn/docs/configuration/what-is-docs-yml#colors-configuration), 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
+
+
+