cloudfour / cloudfour/cloudfour.com-patterns

Consider matching DOM order for Sky Nav elements when JS is disabled for better accessibility

Open
#1,994 2 comments 0 reactions 0 assignees View on GitHub
⁉️ question 🎨 design 🦮 a11y
Dominant language
SCSS
Stars
26
Forks
3
Avg merge
19h 32m
Merged PRs (30d)
81

Description

When JS is disabled:
- the "Menu" button is hidden
- the Sky Nav is open

## Current implementation

The DOM order of the nav does not match the visual order in the current solution:
Current tab order count | Current tab order in action
--- | ---
Screen Shot 2022-08-02 at 9 39 01 AM | ![source-order-current](https://user-images.githubusercontent.com/459757/182430440-70c954b7-2f48-44eb-ba57-ec6de151e657.gif)

## Proposed solution

We should consider allowing the visual order to match the DOM order when JS is disabled. We might even consider centering the Cloud Four logo since the button is not shown:
Proposes tab order count | Proposed tab order in action
--- | ---
Screen Shot 2022-08-02 at 9 46 09 AM | ![source-order-proposal](https://user-images.githubusercontent.com/459757/182430606-c5ad6067-3ca0-4dbb-9830-c53b0ec94eb5.gif)

## Other considerations

- The gradient no longer matches the original design in the proposed solution

## Related

- https://web.dev/visual-order-follows-dom/

Contributor guide

Open the contributing guide

Research direction

Start by locating the Sky Nav implementation and reviewing its DOM and visual order with JavaScript disabled. Compare keyboard tab order against the proposed screenshots, then verify that the navigation order is aligned while accounting for the logo position and gradient design concern.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, scss
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.