Accessibility
Mobile Navigation Accessibility Pass
Make the mobile menu and dropdowns genuinely usable: keyboard operable, focus-trapped, screen-reader labeled, with correct ARIA state and reduced-motion respect — verified across real mobile browsers.
HMX Zone
ARIA roles + aria-expanded
Verified HMX-owned case
Outcome signals
These are the real outcome statements attached to this HMX case study.
- Keyboard
- menu fully operable without a mouse
- Focus-safe
- focus trapped and restored correctly
- Announced
- screen readers report open/closed state
- Verified
- checked on real iOS and Android browsers
Case architecture
Mobile Navigation Accessibility Pass Architecture
6 nodes
Rebuild the menu and
roles
@base-ui/react primitives
ARIA roles + aria-expanded
Fallback Path
Keyboard menu fully operable
- 01Rebuild the menu and
Make the mobile menu and dropdowns genuinely usable: keyboard operable, focus-trapped, screen-reader labeled, with correct ARIA state and reduced-m...
- 02roles
Add roles, aria-expanded, and labels so state is announced correctly
- 03@base-ui/react primitives
@base-ui/react primitives supports the route, form, or data boundary for Mobile Navigation Accessibility Pass so public UX and backend state stay connected.
- 04ARIA roles + aria-expanded
Trap focus while open and restore it to the trigger on close
- 05Fallback Path
When automation confidence is low, route the record to a manual owner with the source, stage, and last action attached.
- 06Keyboard menu fully operable
Keyboard menu fully operable without a mouse; Focus-safe focus trapped and restored correctly; Announced screen readers report open/closed state; V...
Problem
The operating gap
The mobile nav works only by tap. It cannot be operated by keyboard, focus escapes behind the open menu, dropdowns lack ARIA state, and screen readers announce nothing useful — locking out keyboard and assistive-tech users and failing basic accessibility checks.
Build
What gets built
Rebuild the navigation on an accessible primitive: proper roles and aria-expanded state, focus trapping while open, Escape-to-close, visible focus rings, and labels screen readers can announce. Honor reduced-motion for transitions, then verify behavior on real iOS Safari and Android Chrome rather than assuming desktop parity.
Build steps
Mobile Navigation Accessibility Pass uses a web app route, data, and conversion layer for Full-Stack Websites. Make the mobile menu and dropdowns genuinely usable: keyboard operable, focus-trapped, screen-reader labeled, with correct ARIA state and reduced-m... The architecture connects rebuild the menu and, @base-ui/react primitives, aria roles + aria-expanded, and keyboard menu fully operable with an explicit control path.
- 01Rebuild the menu and dropdowns on an accessible component primitive
- 02Add roles, aria-expanded, and labels so state is announced correctly
- 03Trap focus while open and restore it to the trigger on close
- 04Support Escape-to-close and visible keyboard focus indicators
- 05Respect reduced-motion for open and close transitions
- 06Verify keyboard and screen-reader flows on real mobile browsers
Stack
Tools and layers
- @base-ui/react primitives
- ARIA roles + aria-expanded
- Focus trap + Escape handling
- prefers-reduced-motion
- Playwright (Chrome/Firefox/WebKit)
- React 19
- Experience layer: Rebuild the menu and dropdowns on an accessible component primitive
- Server layer: Add roles, aria-expanded, and labels so state is announced correctly
- Database layer: @base-ui/react primitives supports the route, form, or data boundary for Mobile Navigation Accessibility Pass so public UX and backend state stay connected.
- Automation layer: ARIA roles + aria-expanded handles routine steps while rebuild the navigation on an accessible primitive: proper roles and aria-expanded state, focus trapping while open, Escape-to-close, visible focus...
- Measurement layer: Keyboard menu fully operable without a mouse; Focus-safe focus trapped and restored correctly; Announced screen readers report open/closed state; V...
Data flow
- 01Rebuild the menu and dropdowns on an accessible component primitive
- 02Add roles, aria-expanded, and labels so state is announced correctly
- 03Trap focus while open and restore it to the trigger on close
- 04Support Escape-to-close and visible keyboard focus indicators
- 05Respect reduced-motion for open and close transitions
- 06Verify keyboard and screen-reader flows on real mobile browsers
Controls
- The mobile nav works only by tap.
- Rebuild the navigation on an accessible primitive: proper roles and aria-expanded state, focus trapping while open, Escape-to-close, visible focus...
- When automation confidence is low, route the record to a manual owner with the source, stage, and last action attached.
Research basis
A route assembles through form, data, metadata, and deploy checks.
The same website operating path
Full-stack websites for service businesses and operators: route architecture, service pages, lead capture, metadata, proof boundaries, blog/database paths, analytics, and deployment checks.
Route map
Service architecture
Clear service routes
01active
Progress72%
Lead capture
Form and context flow
Lead capture that saves context
02active
Progress86%
Public metadata
SEO and schema layer
SEO and schema on public pages
03active
Progress64%
Launch QA
Analytics and deployment checks
Analytics events tied to CTAs
04active
Progress91%