Discussion :

[labarre2002]

Bonjour


je réalise un menu qui doit occuper toute la largeur de l'écran

voici le résultat de mon travail




le souci est le retour a la ligne d un lien de mon menu a savoir l’élément "Boissons"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header>
<nav class="menu">
<ul>
<li> <a href="#">Burger</a> </li>
<li> <a href="#">Sandwich</a> </li>
<li> <a href="#">Chawarma</a> </li>
<li> <a href="#">Salades</a> </li>
<li> <a href="#">BBQ</a> </li>
<li> <a href="#">Boissons</a> </li>
 
 
</ul>
 
</nav>

le CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.menu ul li{
list-style-type: none;
display: inline-block;
padding:0 13px 0 0;
 
}
 
 
 
 a:link {
    text-decoration: none;
    color: black;
   }
 
  .menu li:hover {
    background-color: #f3ebe0;
  }
 
li{
    width:16.66%;
 
    text-align: center;
}

Merci pour de m apporter d’éventuelles éléments de réponse.

[NoSmoking]

Bonjour,
16.66 * 6 = 100%, oui mais c'est sans compter les fameux « whitespace » qui existe entre les éléments en ligne

Pour une solution, voir

↪ Espace entre éléments « inline »

[Doksuri]

pourquoi ne pas passer par du flex ?
voir meme du grid (qui prend en compte les margin/paddings)

[labarre2002]

BOnsoir

pour vos reponses

@NoSmoking Merci pour tes reponses croustillantes (toujours quelque chose de nouveau a decouvrir).

en appliquant

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

 display:table-cell

je n ai plus le retour a la ligne



a present je souhaite que mon menu occupe toute la largeur

Merci davance .

[two3d]

Comme la proposé Doksuri, le flex ou grid est une bonne solution.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
ul{
   display:flex;
   justify-content:space-[ce que tu veux]
}

[Doksuri]

si besoin, la solution grid du coup...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.menu ul {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.menu li { display: block; }

[NoSmoking]

en appliquant display:table-cell

Tu as peut-être choisi la « meilleur moins bonne solution »

Le lien que j'ai posté est surtout pour montrer l'existence des « whitespace » et comment éventuellement s'en débarrasser.

Ce qui importe est de cibler correctement ce que tu souhaites faire, et dans ton cas, menu largeur 100% avec items centrés, il y plusieurs façons de faire, comme toujours serais-je tenté de dire !

Pour commencer ton menu peut tout à fait ce résumer au HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<nav class="menu">
  <a href="#">Burger</a>
  <a href="#">Sandwich</a>
  <a href="#">Chawarma</a>
  <a href="#">Salades</a>
  <a href="#">BBQ</a>
  <a href="#">Boissons</a>
</nav>

...sémantiquement parlant c'est suffisant inutile d'ajouter une liste <ul>.

Le CSS à appliquer serait le suivant :
• avec display:table :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.menu-table {
  display: table;
  width: 100%;
}
.menu-table a {
  display: table-cell;
  width: calc( 100% / 6);
}

• avec display:inline-flex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.menu-inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
}
.menu-inline-flex a {
  flex: 1;
}

• avec display:flex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.menu-flex {
  display: flex;
  flex-wrap: wrap;
}
.menu-flex a {
  flex: 1;
}

... pratiquement le même que inline-flex, la width en moins.

• avec display:display-grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.menu-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
}

... déconcertant de simplicité !

Voilà c'était juste un petit récapitulatif !

Nota : si, de plus, tu veux faire apparaître un « menu hamburger » il te faudra gérer cela via les média-queries.

[Doksuri]

Nota : si, de plus, tu veux faire apparaître un « menu hamburger » il te faudra gérer cela via les média-queries.

ce sera l'occastion d'introduire les @contanier developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries c'est la meme chose que les media-queries, mais ca ne se base pas sur la taille de l'ecran, mais sur la taille du container

[Stellar7]

...sémantiquement parlant c'est suffisant inutile d'ajouter une liste <ul>.

Pour la sémantique du bien-voyant, peut-être, mais pas pour le mal/non-voyant.

D'après le référentiel d'accessibilité qui nous concerne (RGAA), tout ce qui se présente visuellement comme liste doit aussi l'être comme tel dans le code. Les bonnes pratiques peuvent être consultées avec les "aria practices", par exemple pour le menu.

Il y a une raison : la navigation virtuelle avec les aides, en particulier les lecteurs d'écrans. Avec un lecteur d'écran, on peut naviguer entre éléments du même type, p.ex. de titre en titre, de lien en lien, de liste en liste, etc. D'où l'intérêt de la balise <ul> (en y ajoutant un "nom accessible", tel un aria-label, mais là je déborde).

[NoSmoking]

D'après le référentiel d'accessibilité qui nous concerne (RGAA), tout ce qui se présente visuellement comme liste doit aussi l'être comme tel dans le code.

Justement, cela fait longtemps que cela ne ressemble plus à une liste si tant est que l'on sache à quoi doit vraiment ressembler une liste.

L'utilisation des listes est une convention de longue date et qui n'a jamais effectivement fait soucis même si certains lui préféraient des <divs> associées à des <spans> moins judicieux à mon sens.

Il y a une raison : la navigation virtuelle avec les aides, en particulier les lecteurs d'écrans.

Avec un « menu » d'un seul niveau la seule différence notoire que je constate sur mon lecteur d'écran, NVDA, est l'information du nombre d'éléments présents qui n'est pas forcément pertinente.
En prenant comme exemple le « menu » de https://www.w3.org/WAI/ARIA/apg/patterns/menu/, soit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section>
  <h2>Menu avec liste</h2>
  <nav class="nav" aria-label="APG avec liste">
    <ul>
      <li><a href="/WAI/ARIA/apg/">APG Home</a>
      <ul>
        <li><a href="Option 1">Option 1</a>
        <li><a href="Option 1">Option 2</a>
      </ul>
      </li>
      <li><a href="/WAI/ARIA/apg/patterns/">Patterns</a></li>
      <li><a href="/WAI/ARIA/apg/practices/">Practices</a></li>
      <li><a href="/WAI/ARIA/apg/example-index/">Index</a></li>
      <li><a href="/WAI/ARIA/apg/about/">About</a></li>
    </ul>
  </nav>
</section>

j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
titre    niveau 2  Menu avec liste
APG avec liste  navigation région    liste  de 5 éléments
•   lien    APG Home
•   lien    Patterns
•   lien    Practices
•   lien    Index
•   lien    About  hors de liste

avec le « menu allégé » :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<section>
  <h2>Menu sans liste</h2>
  <nav class="nav" aria-label="APG sans liste">
    <a href="/WAI/ARIA/apg/">APG Home</a>
    <a href="/WAI/ARIA/apg/patterns/">Patterns</a>
    <a href="/WAI/ARIA/apg/practices/">Practices</a>
    <a href="/WAI/ARIA/apg/example-index/">Index</a>
    <a href="/WAI/ARIA/apg/about/">About</a>
  </nav>
</section>

j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
titre    niveau 2  Menu sans liste
APG sans liste  navigation région
•   lien    APG Home
•   lien    Patterns
•   lien    Practices
•   lien    Index
•   lien    About

Là par contre où je suis entièrement pour, c'est lorsque le « menu » possède plusieurs niveaux, le moins possible c'est mieux, il m’apparaît important que le visiteur ait l'information du changement de liste ce qui pourrait donner quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
...
•   lien    APG Home  liste  de 2 éléments
  ◦   lien    Option 1
  ◦   lien    Option 2  hors de liste
•   lien    Patterns
...

... on sait que Option 1 se rapporte à APG Home.

... en y ajoutant un "nom accessible", tel un aria-label, mais là je déborde).

on ne déborde jamais lorsque l'on parle accessibilité

[Stellar7]

Je pense qu'on peut être globalement d'accord.

Pour les listes, je fais référence à ce qui est présenté visuellement comme une suite d'éléments, une forme liste de citations ou de suite d'éléments.
S'il s'agit d'un menu/bouton déroulant, c'est un "pattern" particulier.
Les cas concernant les aria patterns sont actuellement au nombre de 30 (v1.2 avec comme nouveau pattern un cas qui m'a bien embêté (lors de l'arrivée de la librairie ZK) le Window Splitter).

Concernant NVDA, c'est vrai que la fenêtre concernant la visionneuse de paroles (que tu sembles lister) permet de mieux comprendre ce qui est rendu, notamment via le lecteur braille (ce que seulement 10% des non-voyants utilisent, d'après mes contacts).

Pour aller plus loin, je pense qu'il faudrait pour aller plus loin créer dans DVP une section dédiée à l'accessibilité numérique (que je mentionne habituellement "AN"avec mes contacts).

Le gros problème, pour moi, est la compréhension de l'AN, du référentiel dédié (RGAA) et l'on parle alors de conformité, et qu'il faut aussi prendre en compte les 4 "piliers" de ce référentiel, dont l'un est l'utilisabilité. Et cette dernière notion n'est pas du tout naturelle pour les "voyants" (dont je fais partie, mais mes "coachs" et relations sont souvent non-voyants).

[laurentSc]

(dont je fais partie, mais mes "coachs" et relations sont souvent non-voyants).

J'appartiens depuis 2002 à un club handisport qui comporte des non et malvoyants. J'ai créé vers 2007 le site web, dont voici la Ne version : https://vhs.vercorshandisport.ovh/ (l'URL est provisoire car petit problème). Moi aussi, voyant mais j'ai déjà pensé (mais encore jamais fait) me doter d'un lecteur d'écran gratuit pour voir ce que ça donne...