Deux questions sur les roles tablist, tab et tabpanel

Le document du W3C, WAI-ARIA 1.0 Authoring Practices — Tab Panel (w3.org) dit :

W3C a écrit :
The tabs are arranged along one of the edges of the contents

Cela est-il acceptable, si les `tabpanel` sont des descendants de `tablist` comme le sont les `tab` ? Je donne un exemple schématique :

<ul role="tablist">

   <li>
      <h3 id="tab1" role="tab" aria-controls="panel1">Titre de l’onglet N°1</h3>
      <div id="panel1" role="tabpanel" aria-labelledby="tab1">
         Contenu de l’onglet N°1.
      </div>
   </li>

   <li>
      <h3 id="tab2" role="tab" aria-controls="panel2">Titre de l’onglet N°2</h3>
      <div id="panel2" role="tabpanel" aria-labelledby="tab2">
         Contenu de l’onglet N°2.
      </div>
   </li>

   …

</ul>

Est-ce acceptable ou faut-il vraiment que les `tabpanel` soit dans un arbre distinct ? Je le fais ainsi, parce que cette structure me semble plus pratique et logique, mais me pose cette question quand-même.


La même page dit encore :

W3C a écrit :
Left Arrow - with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab.

Si je donne seulement le focus à l’onglet, sans l’activer, est-ce acceptable ? Tel que je l’ai conçu, le contenu de l’onglet ayant le focus, s’affiche en appuyant sur Entrée. Je l’ai çoncu ainsi, parce que je n’aime pas les affichages transitoires inutiles. Si on veut passer par exemple du deuxième onglet au cinquième onglet, pas besoin d’afficher le contenu des troisième et quatrième onglet, pour les faire disparaitre aussitôt après, c’est du « bruit » pour rien.

Je pense que mes raisons sont raisonnables ( ), mais avoir d’autres avis (concordants ou discordants) m’intéressent.
Modifié par hibou57 (21 Jan 2016 - 09:55)

Je suis fou, je parle tout seul .

Je crois que j’ai trouvé la réponse à ma question. C’est un design pattern ARIA nommé Accordion. Ça me semble assez correspondre aux deux points… et ce pattern utilise les rôles `tablist`, `tab` et `tabpanel` aussi, alors je n’ai même rien à changer de ce coté là.

Mais si des gens veulent commenter, ça m’intéresse toujours.
Modifié par hibou57 (21 Jan 2016 - 18:33)

Non, tu as dit ce qu'il fallait dire, ta construction ressemble pllutôt à un menu accordéon; que plusieurs éléments soit simultanément affichables ou non ne change rien par ailleurs.

Pour la réflexion concernant activer le tab ou juste lui donner le focus sur pression de flèche gauche/droite, mon avis est partagé :
* D'un côté, le comportement normal est effectivement d'activer implicitement l'onglet. Ca peut donc désorienter un peu si on ne comprend pas qu'il faille encore faire enter pour l'activer.
* De l'autre, je suis complètement d'accord avec toi, ça devient vite pénible quand on veut rapidement passer d'un onglet X à un onglet Y si abs(X-Y)!=1; surtout si les panels sont gros et/ou lourds à charger et/ou s'actualisent en permanence dès lors qu'ils sont affichés.
* En même temps si on observe un peu les applications desktop (non web) p.ex. GUI windows, on peut trouver les deux variantes. Sauf erreur un TABCONTROL permet les deux options, les onglets pour la variante activation explicite ressemble alors si je ne me trompe pas plus à des genres de boutons plutôt que des vrais tabs sous leur apparence classique.

QuentinC a écrit :
* De l'autre, je suis complètement d'accord avec toi, ça devient vite pénible quand on veut rapidement passer d'un onglet X à un onglet Y si abs(X-Y)!=1; surtout si les panels sont gros et/ou lourds à charger et/ou s'actualisent en permanence dès lors qu'ils sont affichés.

Dans mon cas présent, ça va, ce n’est pas lourd à charger (c’est même préchargé), mais ça peut modifier la hauteur du conteneur englobant. Et les changements de géométrie intempestifs, c’est désagréable.

QuentinC a écrit :

* D'un côté, le comportement normal est effectivement d'activer implicitement l'onglet. Ca peut donc désorienter un peu si on ne comprend pas qu'il faille encore faire enter pour l'activer.

Je me demandais si pour ces cas, il existe un attribut pour donner cette indication. Ou alors je peux changer le texte de l’onglet, pour que quand il a le focus et n’est pas ouvert, ça dise en plus « Appuyez sur entrée ». Je viens d’y penser à l’instant, je vais essayer ça plus tard, pour voir de quoi ça a l’air en pratique.
Modifié par hibou57 (22 Jan 2016 - 10:07)

a écrit :
Dans mon cas présent, ça va, ce n’est pas lourd à charger (c’est même préchargé), mais ça peut modifier la hauteur du conteneur englobant. Et les changements de géométrie intempestifs, c’est désagréable.

Tu n'as pas moyen que la taille du conteneur reste constante et se fixe à la taille du plus long contenu ?
ou mieux, faire en sorte que rien ne dépende de la taille de ce conteneur, i.e. positionner ce qui se trouve en-dessous en utilisant une autre stratégie.

a écrit :
Je me demandais si pour ces cas, il existe un attribut pour donner cette indication. Ou alors je peux changer le texte de l’onglet, pour que quand il a le focus et n’est pas ouvert, ça dise en plus « Appuyez sur entrée ». Je viens d’y penser à l’instant, je vais essayer ça plus tard, pour voir de quoi ça a l’air en pratique.

En théorie on a aria-describedby. Mais au mieux ce n'est pas annoncé d'office, il faut appuyer sur une combinaison de touches genre Ctrl+F1, Insert+F1 ou Insert+Tab.
ON aaussi title mais l'annonce ou non est assez aléatoire donc on ne peut pas trop s'y fier.

Tu peux peut-être faire annoncer un message avec aria-live="polite" dans un div planqué au moment où un tab prend le focus, c'est à tester.
Ou sinon, plus simple, tu ajoutes cette indication dans un span planqué directement après le nom de l'onglet.
Modifié par QuentinC (23 Jan 2016 - 23:23)