You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/en/articles/dropdown-menu/index.njk
+42-46Lines changed: 42 additions & 46 deletions
Original file line number
Diff line number
Diff line change
@@ -3,18 +3,27 @@ title: "Dropdown menu"
3
3
abstract: "Create an accessible drop-down menu."
4
4
titleBeforeTag: true
5
5
date: "2018-01-17"
6
+
updateDate: "2026-03-13"
6
7
tags:
7
8
- component
8
9
---
9
10
10
11
<h2>Introduction</h2>
11
-
<p>In this example we will use the <ahref="https://boosted.orange.com/docs/5.1/components/dropdowns/">drop-down menu</a> available in the <ahref="https://boosted.orange.com/">Boosted</a> library. This library based on Bootstrap allows you to quickly create <abbrtitle="User Interface">UI</abbr> components branded with the Orange colours.</p>
12
12
13
-
<p>The example implementation described below is suitable for navigation menus as well as for unit components presenting a list of actions.</p>
14
-
15
-
<h2>Final example</h2>
16
-
<p>This is how the drop-down looks with our library.</p>
13
+
<p>Dropdown menus help organize and display navigation options or actions in a compact, structured way. However, if they are not properly implemented, they create accessibility issues for many users.</p>
14
+
<p>An accessible dropdown menu ensures smooth and intuitive navigation for everyone, while complying with the recommendations of standards (<abbr>WCAG</abbr>, <abbr>RGAA</abbr>, <abbr>EN 301 549</abbr>, etc.).</p>
15
+
<p>In the following examples, we will use the <ahref="https://boosted.orange.com/docs/5.1/components/dropdowns/">dropdown menu</a> available in the <ahref="https://boosted.orange.com/">Boosted</a> library.<br /> This Bootstrap‑based library makes it possible to quickly design accessible interfaces in Orange brand colors and compliant with WCAG as well as the <ahref="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">ARIA combobox design pattern</a></p>
16
+
17
+
<h2>Dropdown menu</h2>
18
+
<p>To make the dropdown menu accessible, pay particular attention to the following:</p>
19
+
<ul>
20
+
<li>Support mouse and keyboard navigation (navigation with the <kbd>Tab</kbd> key, activation with <kbd>Enter</kbd> or <kbd>Space</kbd>, movement with the arrow keys).</li>
21
+
<li>Be compatible with assistive technologies (<abbr>AT</abbr>) by providing appropriate semantics, roles, and attributes (for example, <code>aria-expanded</code> and <code>aria-current</code>).</li>
22
+
<li>Provide sufficient visibility and contrast to ensure readable text and a clearly visible keyboard focus.</li>
23
+
<li>Ensure the behavior of the dropdown and item selection is predictable and consistent to avoid confusion.</li>
<p>For this menu to be accessible, it must be usable with a mouse, keyboard and screen reader.</p>
61
+
<h3><abbr>ARIA</abbr> attributes</h3>
62
+
<ul>
63
+
<li><code>aria-expanded</code>: the <code>aria-expanded</code> attribute with a value of <code>true/false</code> allows assistive technologies to announce the menu state (open or closed).</li>
64
+
<li><code>aria-current</code>: if the dropdown is used within a navigation menu, consider adding <code>aria-current="page"</code> to the item corresponding to the active page.</li>
65
+
<li><code>aria-haspopup</code>: the <code>aria-haspopup</code> attribute is reserved for the <code>menu</code> role (see the “Special case of application menus” section). It is therefore not present in this implementation.</li>
66
+
</ul>
67
+
68
+
<h2>Time to test</h2>
54
69
55
70
<h3>Keyboard navigation</h3>
56
71
<dl>
57
-
<dt>Move the focus to “My Account” using the <kbd>Tab</kbd> key and press the <kbd>Enter</kbd> key.</dt>
72
+
<dt>Move focus to the “My account” button using the <kbd>Tab</kbd> key and activate with the <kbd>Enter</kbd> key.</dt>
58
73
<dd>The menu opens.</dd>
59
-
<dt>Use the <kbd>up</kbd> / <kbd>down</kbd> arrows.</dt>
60
-
<dd>These allow you to navigate the different menu items.</dd>
61
-
<dt>Press <kbd>Escape</kbd>.</dt>
62
-
<dd>The menu closes. On closing, the focus is automatically repositioned onto the button that opened the menu.</dd>
63
-
<dt></dt>
74
+
<dt>Use the <kbd>Up</kbd>/<kbd>Down</kbd> arrow keys.</dt>
75
+
<dd>These allow you to move between the different menu items.</dd>
76
+
<dt>Press the <kbd>Escape</kbd> key.</dt>
77
+
<dd>The menu closes. When it closes, focus is automatically returned to the button that opens the menu.</dd>
64
78
</dl>
65
79
66
80
<h3>Screen reader navigation</h3>
67
81
<dl>
68
-
<dt>Position the cursor on “My Account”.</dt>
69
-
<dd>The screen reader says there is a drop-down menu, and vocalizes the drop-down state (open or closed).</dd>
82
+
<dt>Place focus on the “My account” button.</dt>
83
+
<dd>The screen reader indicates that it is a dropdown menu and announces the menu state (open or closed).</dd>
70
84
<dt>Press the <kbd>Enter</kbd> key.</dt>
71
-
<dd>The menu opens, the first item is selected. This element is automatically vocalized by the screen reader.</dd>
72
-
<dt>Use the <kbd>up</kbd> / <kbd>down</kbd> arrows.</dt>
73
-
<dd>These allow you to navigate to the different menu items.</dd>
85
+
<dd>The menu opens, the first item is selected, and it is automatically announced by the screen reader.</dd>
86
+
<dt>Use the <kbd>Up</kbd>/<kbd>Down</kbd> arrow keys.</dt>
87
+
<dd>These allow you to move between the different menu items.</dd>
74
88
<dt>Select a menu item using the <kbd>Enter</kbd> key.</dt>
75
-
<dd>The menu closes. As the focus is repositioned automatically, the screen reader again vocalizes the menu button, and its state.</dd>
89
+
<dd>The menu closes. Since focus is automatically returned, the screen reader announces the menu button again, along with its state.</dd>
76
90
</dl>
77
91
78
-
<h3><abbr>ARIA</abbr> attributes</h3>
79
-
80
-
<ul>
81
-
<li><code>aria-expanded</code>: the <code>aria-expanded</code> attribute with a <code>true</code>/<code>false</code> value, allows to vocalize menu states (open or closed).</li>
82
-
<li><code>aria-current</code>: if the dropdown menu is used within a navigation menu, provide for the addition of an attribute <code>aria-current="page"</code> on the item corresponding to the active page.</li>
83
-
<li><code>aria-haspopup</code>: the <code>aria-haspopup</code> attribute is reserved for the <code> menu </code> role (see paragraph "Special case of application menus"). It is therefore not present in this implementation.</li>
<p>In addition, the ARIA pattern describes the use of an <code>aria-controls</code> attribute, as well as additional optional keyboard interactions: <kbdlang="en">Home</kbd> / <kbdlang="en">End</kbd></p>
93
+
<p>Additionally, the ARIA pattern describes the use of an <code>aria-controls</code> attribute, as well as optional extra keyboard interactions: <kbd>Home</kbd>/<kbd>End</kbd>.</p>
98
94
<p>Example: <ahref="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html">Example Disclosure for Navigation Menus</a></p>
99
95
100
96
<h2>Special case of application menus</h2>
101
97
102
-
<p>The ARIA pattern describes a "Menu" and "Menubar" component, using the roles <code>menu</code> or <code>menubar</code>.</p>
103
-
<p>Please note, this pattern is reserved only for the creation of an application menu, the interactions of which should be similar to the behavior of the menus present in desktop applications for example.</p>
104
-
<p>These implementations are more complex and unnecessary for web navigation menus.</p>
98
+
<p>The ARIA pattern describes “Menu” and “Menubar” components, using the <code>menu</code> and <code>menubar</code> roles.</p>
99
+
<p>Note that this pattern is intended only for building application menus, whose interactions should be similar to menus in desktop applications, for example.</p>
100
+
<p>These implementations are more complex and not necessary for web navigation menus.</p>
Copy file name to clipboardExpand all lines: src/fr/articles/menu-deroulant/index.njk
+28-30Lines changed: 28 additions & 30 deletions
Original file line number
Diff line number
Diff line change
@@ -3,18 +3,27 @@ title: "Exemple de menu déroulant"
3
3
abstract: "Créer un menu déroulant accessible."
4
4
titleBeforeTag: true
5
5
date: "2018-01-17"
6
+
updateDate: "2026-03-13"
6
7
tags:
7
8
- component
8
9
---
9
10
10
-
<h2>Préambule</h2>
11
-
<p>Dans cet exemple nous allons utiliser le <ahref="https://boosted.orange.com/docs/5.1/components/dropdowns/">menu déroulant</a> disponible dans la librairie <ahref="https://boosted.orange.com/">Boosted</a>. Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange.</p>
11
+
<h2>Introduction</h2>
12
12
13
-
<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>
13
+
<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>
14
+
<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>
15
+
<p>Dans les exemples suivants, nous allons utiliser le <ahref="https://boosted.orange.com/docs/5.3/components/dropdowns/">menu déroulant</a> disponible dans la librairie <ahref="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 <ahreflang="en"href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p>
14
16
15
-
<h2>Rendu final</h2>
16
-
<p>Voici le rendu de notre menu.</p>
17
+
<h2>Menu déroulant</h2>
18
+
<p>Pour que le menu déroulant soit accessible, il faudra faire particulièrement attention aux points suivants :</p>
19
+
<ul>
20
+
<li>Permettre la navigation à la souris et au clavier (navigation avec la touche <kbd>Tab</kbd>, activation avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>, déplacement avec les flèches directionnelles).</li>
21
+
<li>Être compatible avec les technologies d’assistance(<abbr>AT</abbr>), en fournissant une sémantique, des rôles et des attributs adaptés.(<code>aria-expanded</code> et <code>aria-current</code> par exemple)</li>
22
+
<li>Une visibilité et un contraste suffisants pour une bonne lisibilité des textes et du focus au clavier.</li>
23
+
<li>Le comportement du menu déroulant et de la sélection d'un élément doivent être prévisibles et cohérents pour éviter toute confusion.</li>
<li><code>aria-expanded</code> : l'attribut <code>aria-expanded</code> avec comme valeur <code>true/false</code>, permet de vocaliser l'état du menu (ouvert ou fermé).</li>
64
+
<li><code>aria-current</code> : si le menu déroulant est utilisé au sein d'un menu de navigation, prévoir l'ajout d'un attribut <code>aria-current="page"</code> sur l'item correspondant à la page active.</li>
65
+
<li><code>aria-haspopup</code> : l'attribut <code>aria-haspopup</code> est réservé au rôle <code>menu</code> (voir paragraphe "Cas particulier des menus applicatifs"). Il n'est donc pas présent dans cette implémentation.</li>
66
+
</ul>
67
+
52
68
<h2>Place aux tests</h2>
53
-
<p>Pour que ce menu soit accessible, il doit être utilisable, à la souris, au clavier et au lecteur d'écran.</p>
54
69
55
70
<h3>Navigation au clavier</h3>
56
-
<dl>
71
+
<dl>
72
+
<dd>Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permettant d'ouvrir le menu</dd>
57
73
<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>
58
74
<dd>Le menu s'ouvre.</dd>
59
75
<dt>Utiliser les flèches <kbd>Haut</kbd>/<kbd>Bas</kbd>.</dt>
60
76
<dd>Celles-ci permettent de se déplacer sur les différents éléments du menu.</dd>
61
77
<dt>Appuyer sur la touche <kbd>Échap</kbd>.</dt>
62
78
<dd>Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permetant d'ouvrir le menu</dd>
63
-
<dt></dt>
64
79
</dl>
65
80
66
81
<h3>Navigation au lecteur d'écran</h3>
@@ -75,31 +90,14 @@ tags:
75
90
<dd>Le menu se ferme. Comme le focus est replacé automatiquement, le lecteur d'écran vocalise à nouveau le bouton du menu, ainsi que son état.</dd>
76
91
</dl>
77
92
78
-
<h3>Attributs <abbr>ARIA</abbr></h3>
79
-
<ul>
80
-
<li><code>aria-expanded</code> : l'attribut <code>aria-expanded</code> avec comme valeur <code>true/false</code>, permet de vocaliser l'état du menu (ouvert ou fermé).</li>
81
-
<li><code>aria-current</code> : si le menu déroulant est utilisé au sein d'un menu de navigation, prévoir l'ajout d'un attribut <code>aria-current="page"</code> sur l'item correspondant à la page active.</li>
82
-
<li><code>aria-haspopup</code> : l'attribut <code>aria-haspopup</code> est réservé au rôle <code>menu</code> (voir paragraphe "Cas particulier des menus applicatifs"). Il n'est donc pas présent dans cette implémentation.</li>
<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 : <kbdlang="en">Home</kbd>/<kbdlang="en">End</kbd></p>
97
-
<p>Exemple : <ahref="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html"hreflang="en"lang="en">Example Disclosure for Navigation Menus</a></p>
95
+
<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>
98
96
99
97
<h2>Cas particulier des menus applicatifs</h2>
100
98
101
99
<p>Le pattern ARIA décrit un composant "Menu" et "Menubar", utilisant les rôles <code>menu</code> ou <code>menubar</code>.</p>
102
-
<p>Attention, ce pattern est réservé uniquement à la création de menu applicatif, dont les interactions devront se rapprocher du comportement des menus présent dans des applications bureaux par exemple.</p>
100
+
<p>Attention, ce pattern est réservé uniquement à la création de menu applicatif, dont les interactions devront se rapprocher du comportement des menus présent dans des applications de bureaux par exemple.</p>
103
101
<p>Ces implémentations sont plus complexes et non nécessaires aux menus de navigation web.</p>
0 commit comments