Accessibility (A11y) Overview
Accessibility (A11y) in FO UI Framework ensures inclusive and user-friendly experiences for everyone, including people with disabilities. Our framework is aligned with WCAG 2.1 Level AA guidelines and implements ARIA attributes by default.
WCAG Principles
WCAG (Web Content Accessibility Guidelines) defines four core principles known as POUR: Perceivable, Operable, Understandable, and Robust.
| Perceivable | Content must be presented in ways that users can perceive (text alternatives, captions). |
|---|---|
| Operable | Interface must be usable via keyboard and other input methods (focus states, skip links). |
| Understandable | Information and interface should be clear and predictable (labels, instructions, error messages). |
| Robust | Content must work reliably across assistive technologies (screen readers, browsers). |
Framework Implementation
FO Framework integrates accessibility at its core:
- Semantic HTML usage by default (e.g., <button>, <nav>).
- Automatic ARIA attributes on interactive components.
- Color contrast ratios meeting WCAG AA (min 4.5:1).
- Keyboard navigability and visible focus states.
- Screen reader-friendly labels and roles.
Color Contrast Example
Good contrast ensures readability for users with low vision. Below is an example comparing good vs poor contrast:
Good Contrast
(Meets 4.5:1)
Poor Contrast
(Fails WCAG)
Keyboard Navigation Demo
All interactive components in FO Framework are fully keyboard navigable. Use Tab to move forward and Shift + Tab to move backward. Press Enter or Space to activate buttons or links.