cloudfour / cloudfour/cloudfour.com-patterns
Consider matching DOM order for Sky Nav elements when JS is disabled for better accessibility
- Langage dominant
- SCSS
- Étoiles
- 26
- Forks
- 3
- Merge moyen
- 19 h 32 min
- PR mergées (30 j)
- 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
--- | ---
| 
## 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
--- | ---
| 
## Other considerations
- The gradient no longer matches the original design in the proposed solution
## Related
- https://web.dev/visual-order-follows-dom/
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par localiser l’implémentation de Sky Nav et examinez son DOM ainsi que son ordre visuel avec JavaScript désactivé. Comparez l’ordre de tabulation au clavier avec les captures d’écran proposées, puis vérifiez que l’ordre de navigation est cohérent tout en tenant compte de la position du logo et du problème de conception du dégradé.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, scss
- Domaine
- accessibility, design, frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100