summaryrefslogtreecommitdiff
path: root/Documentation/source/frontend/accessibility.rst
diff options
context:
space:
mode:
authorBertrand Yuan <me@bertyuan.com>2026-04-27 20:52:54 +0800
committerBertrand Yuan <me@bertyuan.com>2026-04-27 20:53:14 +0800
commitdbb5e791f0c228369605d126dd590962ebe1eddc (patch)
tree8c83fc84bd9547630e6733929dec77e102e055a8 /Documentation/source/frontend/accessibility.rst
parent658798b3a2378bb6df16cfbb16d707c6fb719e1e (diff)
docs: add comprehensive documentation for operations
This commit introduces a complete set of documentation files covering various aspects of the project, including environment setup, quality checks, command references, and architecture. The documentation is structured to assist developers and contributors in understanding the project's configuration, workflow, and best practices. Additionally, translations for Simplified and Traditional Chinese have been added to ensure accessibility for a wider audience. This enhances the overall usability and maintainability of the project. Signed-off-by: Bertrand Yuan <github@bertyuan.com>
Diffstat (limited to 'Documentation/source/frontend/accessibility.rst')
-rw-r--r--Documentation/source/frontend/accessibility.rst48
1 files changed, 48 insertions, 0 deletions
diff --git a/Documentation/source/frontend/accessibility.rst b/Documentation/source/frontend/accessibility.rst
new file mode 100644
index 0000000..bca6fbf
--- /dev/null
+++ b/Documentation/source/frontend/accessibility.rst
@@ -0,0 +1,48 @@
+Accessibility
+=============
+
+Baseline
+--------
+
+The current frontend already uses semantic landmarks such as ``main``,
+``section``, and ``article`` in key routes. Several icon buttons include
+accessible labels, and theme-aware colors are centralized through design
+tokens.
+
+Required Practices
+------------------
+
+* Give icon-only controls an accessible name.
+* Preserve visible keyboard focus for custom controls.
+* Keep text readable in both light and dark themes.
+* Use semantic elements before ARIA.
+* Do not hide essential navigation or status only behind animation.
+* Validate empty, loading, success, and error states for forms.
+
+Review Checklist
+----------------
+
+.. list-table::
+ :header-rows: 1
+ :widths: 34 42
+
+ * - Check
+ - Expected Result
+ * - Keyboard navigation
+ - Header, menus, buttons, form controls, and links are reachable.
+ * - Screen reader labels
+ - Icon-only actions have clear names.
+ * - Contrast
+ - Text and UI states remain readable in light and dark modes.
+ * - Layout
+ - Text does not overlap or overflow at mobile and desktop breakpoints.
+ * - Feedback
+ - Form errors and success states are visible and announced where needed.
+
+Known Follow-ups
+----------------
+
+* Improve visible focus states for all custom controls.
+* Audit icon-only social and action links.
+* Add reusable empty states for posts and tags.
+* Add visual regression coverage for critical routes.