Skip to content

update exemple de menu déroulant #733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

update exemple de menu déroulant #733

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2cba99d
update exemple de menu déroulant
damiengomez Jun 18, 2025
1f6d07e
sentences corrections and adding informations
damiengomez Jun 18, 2025
fdbf394
Merge branch 'master' into master-dgo-update-article-dropdown
damiengomez Jun 18, 2025
c2c8680
Merge branch 'master' into master-dgo-update-article-dropdown
damiengomez Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 23 additions & 26 deletions src/fr/articles/menu-deroulant/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,22 @@ tags:
- component
---

<h2>Préambule</h2>
<p>Dans cet exemple nous allons utiliser le <a href="https://boosted.orange.com/docs/5.1/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="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>
<h2>Introduction</h2>

<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é, ils créer 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.1/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 href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p>

<h2>Rendu final</h2>
<p>Voici le rendu de notre menu.</p>
<h2>Menu déroulant</h2>
<p>Pour que le menu déroulant soit accessible, il faudra faire particulièrement attention aux points suivants :</p>
<ul>
<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>
<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)</i>
<li>Une visibilité et un contraste suffisants pour une bonne lisibilité des textes et du focus au clavier.</li>
<li>Le comportement du menu déroulant et de la sélection d'un élément doit être prévisible et cohérent pour éviter toute confusion.</li>
</ul>

<h2>Exemple</h2>
<!-- Final menu -->
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
Expand All @@ -30,17 +38,17 @@ tags:
</ul>
</div>

<h2>Code de l'exemple</h2>
<h3>Code de l'exemple</h3>

<!-- Code de l'exemple 1 -->
<pre><code class="html">
&lt;div class="dropdown"&gt;
&lt;button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;
&lt;button class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;
Mon compte
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mon panier&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#" &gt;Mon panier&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes commandes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes informations&lt;/a&gt;&lt;/li&gt;
&lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;
Expand All @@ -49,8 +57,14 @@ tags:
&lt;/div&gt;
</code></pre>

<h3>Attributs <abbr>ARIA</abbr></h3>
<ul>
<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>
<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>
<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>
</ul>

<h2>Place aux tests</h2>
<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>
Expand All @@ -75,23 +89,6 @@ tags:
<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>
</dl>

<h3>Attributs <abbr>ARIA</abbr></h3>
<ul>
<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>
<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>
<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>
</ul>

<pre><code class="html">
&lt;button aria-expanded="false"&gt;Mon compte&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mon panier&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#" aria-current="page"&gt;Mes commandes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes informations&lt;/a&gt;&lt;/li&gt;
&lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Déconnexion&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<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>
Expand Down