Accessibility reference

Accessible behaviour is built into the component contract.

FG UI provides keyboard, focus, ARIA and display-mode behaviour designed to support accessible interfaces. Your application markup, content and testing still matter, so the kit treats accessibility as a shared responsibility rather than a marketing checkbox.

Built with FG UI itself.

This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.

Core expectations

The stable core includes these expectations for interactive components.

Keyboard access Visible focus states Menu arrow, Home, End and Escape handling Roving tab focus Accordion ARIA synchronisation Modal, drawer and lightbox focus management Focus return after close Reduced-motion handling Forced-colours fallbacks Mobile touch targets

Advanced controls

Complex controls keep native or documented accessibility contracts.

  • Combobox uses role=combobox, list relationships and keyboard support.
  • Tree Select synchronises expanded state and retains native checkboxes.
  • Character Counter preserves native maxlength.
  • Dual Range uses two native range inputs with separate labels.
  • Enhanced Select retains the real select as the form/value source.
Release protection

Automated checks backed by real-device validation.

Markup and keyboard gates

Automated checks cover language/main/H1 structure, duplicate IDs, control names, menu and tab keyboard patterns, focus management and ARIA state.

Contrast and display modes

Principal semantic colour pairs, reduced motion, forced colours, print behaviour and no-JavaScript fallback are part of release checks.

Responsive quality

Supported widths, zoom-equivalent reflow, long/localised content, touch targets and mobile control sizing are checked.

Automation is not the whole accessibility story.

Release validation includes real screen-reader testing, current desktop browsers, iPhone Safari, Android Chrome, operating-system high-contrast and reduced-motion review, high zoom and physical touch-device interaction.