docs: add accessibility and keyboard shortcuts documentation #1768
Conversation
- Add comprehensive accessibility documentation page under Getting Started - Document all keyboard shortcuts - Document WCAG 2.1 AA color contrast enforcement - Include troubleshooting section for common issues - Add page to Getting Started navigation in docs.yml Co-Authored-By: Chris McDonnell <chris@buildwithfern.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| --- | ||
| 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." |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'WCAG' has no definition.
|
|
||
| ### Search | ||
|
|
||
| Open the search dialog to quickly find content in your documentation: |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Adverbs] Remove 'quickly' if it's not important to the meaning of the statement.
| 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 |
There was a problem hiding this comment.
🚫 [vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'isn't' instead of 'is not'.
|
|
||
| ### 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. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'WCAG' has no definition.
|
|
||
| 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) |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'WCAG' has no definition.
|
|
||
| 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 |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'AAA' has no definition.
| 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. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Adverbs] Remove 'closely' if it's not important to the meaning of the statement.
|
|
||
| ### 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. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'ARIA' has no definition.
|
|
||
| ### 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. |
There was a problem hiding this comment.
[FernStyles.Please] Avoid using 'please' in technical documentation.
|
|
||
| ## 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. |
There was a problem hiding this comment.
[FernStyles.Please] Avoid using 'please' in technical documentation.
- Define WCAG acronym on first use (Web Content Accessibility Guidelines) - Remove adverb "quickly" from search section - Change "is not" to "isn't" for consistency Co-Authored-By: Chris McDonnell <chris@buildwithfern.com>
docs: add accessibility and keyboard shortcuts documentation
Summary
Added a comprehensive accessibility documentation page under the "Getting Started" section that documents existing keyboard shortcuts and accessibility features in Fern docs. This is purely informational documentation with no code changes.
What's documented:
fern check+ automatic runtime adjustment)The page is now visible in the Getting Started navigation between "Project structure" and "Customer showcase".
Review & Testing Checklist for Human
Please verify the following (in order of importance):
Test all keyboard shortcuts on a live Fern docs site to ensure they work as documented:
Verify WCAG color contrast enforcement behavior: Check if the documented behavior (warning in
fern check+ automatic runtime adjustment to 4.5:1/7:1 ratios) accurately reflects how the feature actually works. I documented this based on code infern/packages/cli/yaml/docs-validator/src/rules/accent-color-contrast/index.tsbut couldn't fully verify the runtime adjustment behavior.Check feature availability: Confirm whether the Ask AI panel (CMD/Ctrl+/) and API playground (Ctrl+`) shortcuts are available to all users or if they're behind feature flags. If they're not universally available, the documentation should be scoped accordingly.
Review for completeness: Verify I didn't miss any other keyboard shortcuts or accessibility features that should be documented.
Notes
fern-platform/packages/fern-docs/bundle/src/components/bottom-nav-client.tsx(page nav)fern-platform/packages/fern-docs/bundle/src/components/search.tsx(CMD+K)fern-platform/packages/fern-docs/bundle/src/components/search-panel.tsx(CMD+/)fern-platform/packages/fern-docs/bundle/src/components/playground/PlaygroundKeyboardTrigger.tsx(Ctrl+`)fern-platform/packages/fern-docs/bundle/src/components/playground/PlaygroundCloseButton.tsx(Escape)fern/packages/cli/yaml/docs-validator/src/rules/accent-color-contrast/index.ts