Limits: Ensuring Accessible Navigation with Jeet Fluid Grid Breakpoints

Answer

Use semantic markup, Jeet’s fluid column mixins with breakpoint-specific min-width limits, and :focus-visible for focus outlines. Keep DOM order matching visual order, add a skip link, and test keyboard and screen reader behavior at each breakpoint.

Confirmed steps for this case

1. Mark up navigation with <nav> and an unordered list of links. Ensure each link has visible text or an appropriate aria-label.
2. Apply Jeet fluid columns: @include col(1/1); for narrow viewports, then change layout at breakpoints, e.g. @include breakpoint(sm) { @include col(1/3); }.
3. Apply explicit min-width inside breakpoint blocks to keep legibility without breaking fluidity, e.g. @include breakpoint(sm) { min-width: 200px; } on the column or list item.
4. Preserve focus outlines with :focus-visible on links, e.g. a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } and avoid generic outline: none.
5. Add a skip-navigation link at the top of the page that becomes visible on focus.
6. Ensure touch targets are at least 44×44 px using Jeet gutter and padding or explicit min-height/min-width.

Explanation

Jeet fluid columns adapt width with viewport. Without a lower bound columns can shrink below readable or tappable size, which harms users with low vision. Coupling fluid mixins with breakpoint-specific min-width preserves fluidity while enforcing legibility. Keeping source order identical to visual order prevents keyboard focus from diverging from visual order. :focus-visible provides consistent keyboard focus across browsers while leaving mouse interaction clean.

Missing diagnostic detail

Exact breakpoint pixel values for sm, md, lg are needed to specify precise min-width thresholds. Please share the current Jeet breakpoint map from your settings file.