update exemple de menu déroulant #733
Open
+67
−74
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for a11y-guidelines ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Removed empty <dt> element from dropdown menu instructions.
MewenLeHo
requested changes
Dec 22, 2025
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
MewenLeHo
requested changes
Jan 15, 2026
Collaborator
MewenLeHo
left a comment
MewenLeHo
left a comment
There was a problem hiding this comment.
Some comments on the french version.
| <p>Pour que ce menu soit accessible, il doit être utilisable, à la souris, au clavier et au lecteur d'écran.</p> | ||
|
|
||
| <h3>Navigation au clavier</h3> | ||
| <dl> |
Collaborator
There was a problem hiding this comment.
It's strange to remove the <dl> if you keep the </dl> on line 78.
And you have <dt></dt> on line 77 that should be removed or at least not empty.
I am also wondering if a description list <dl> is the best semantic choice here? It's not really a glossary, could we consider it as key-value pairs type of things?
|
|
||
| <p>En complément le pattern ARIA décrit l'utilisation d'un attribut <code>aria-controls</code>, ainsi que des interactions claviers optionnelles supplémentaires : <kbd lang="en">Home</kbd>/<kbd lang="en">End</kbd></p> | ||
| <p>Exemple : <a href="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html" hreflang="en" lang="en">Example Disclosure for Navigation Menus</a></p> | ||
| <p>Le pattern ARIA décrit les composants "Menu" et "Menubar" qui utilisent les rôles <code>menu</code> ou <code>menubar</code>.</p> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <p>Le pattern ARIA décrit les composants "Menu" et "Menubar" qui utilisent les rôles <code>menu</code> ou <code>menubar</code>.</p> | |
| <p>Le motif de conception <abbr>ARIA</abbr> décrit les composants "Menu" et "Menubar" qui utilisent les rôles <code>menu</code> ou <code>menubar</code>.</p> |
Collaborator
There was a problem hiding this comment.
Not sure to understand why line 94 is identical to line 98, copy-paste error mistake maybe?
| <dd>Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permettant d'ouvrir le menu</dd> | ||
| <dt>Déplacer le focus sur le bouton « Mon compte » à l'aide de la touche <kbd>Tab</kbd> et valider avec la touche <kbd>Entrée</kbd>.</dt> | ||
| <dd>Le menu s'ouvre.</dd> | ||
| <dt>Utiliser les flèches <kbd>Haut</kbd>/<kbd>Bas</kbd>.</dt> |
Collaborator
There was a problem hiding this comment.
Comment for line 76:
permetant => permettant
| <p>L'exemple d'implémentation décrit ci-dessous est aussi bien adapté aux menus de navigation comme aux composants unitaires présentant une liste d'actions.</p> | ||
| <p>Les menus déroulants permettent d’organiser et d’afficher des options de navigation ou des actions de manière compacte et structurée. Cependant, s’ils ne sont pas correctement développés, ils créent des problèmes d’accessibilité pour de nombreux utilisateurs.</p> | ||
| <p>Un menu déroulant accessible garantit une navigation fluide et intuitive pour tous, en respectant la conformité et les recommandations des normes (<abbr>WCAG</abbr>, <abbr>RGAA</abbr>, <abbr>EN301549</abbr> etc.).</p> | ||
| <p>Dans les exemples suivants, nous allons utiliser le <a href="https://boosted.orange.com/docs/5.3/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="https://boosted.orange.com/">Boosted</a>.<br /> Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange et conforme aux normes WCAG ainsi qu'au <a hreflang="en" href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <p>Dans les exemples suivants, nous allons utiliser le <a href="https://boosted.orange.com/docs/5.3/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="https://boosted.orange.com/">Boosted</a>.<br /> Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange et conforme aux normes WCAG ainsi qu'au <a hreflang="en" href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p> | |
| <p>Dans les exemples suivants, nous allons utiliser le <a href="https://boosted.orange.com/docs/5.3/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="https://boosted.orange.com/">Boosted</a>.<br /> Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange et conformes aux normes WCAG ainsi qu'au <a hreflang="en" href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p> |
| <p>Le pattern ARIA décrit les composants "Menu" et "Menubar" qui utilisent les rôles <code>menu</code> ou <code>menubar</code>.</p> | ||
|
|
||
| <h2>Cas particulier des menus applicatifs</h2> | ||
|
|
Collaborator
There was a problem hiding this comment.
Comment for line 99:
applications bureaux => applications de bureaux
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.