cloudfour / cloudfour/cloudfour.com-patterns

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

Ouverte
#1,994 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
⁉️ question 🎨 design 🦮 a11y
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
--- | ---
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/

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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.