Un accordéon (avec aria-multiselectable="false" comme tu l'indiques) a
beaucoup de similitudes avec des onglets :
- à chaque entête correspond un contenu
- cliquer sur un entête affiche le contenu correspondant et masque les
autres contenus
La différence est qu'avec un accordéon, les entêtes se retrouvent
intercalés entre 2 contenus alors que les entêtes d'onglets sont "avant"
soit en haut horizontalement soit à gauche verticalement (et peuvent
alors être regroupés dans un conteneur). Et on va avoir des effets de
slide up ou de fondu enchaîné, les possibilités d'effets sont assez grandes.
Avec aria-multiselectable="true", c'est-à-dire quand on peut avoir
plusieurs contenus d'un accordéon ouverts à la fois et donc visibles, ça
n'a par contre de sens qu'avec un accordéon ; avoir plusieurs contenus
d'onglets (Panes) à la fois ça va faire bizarre.
Philippe
Le 10/01/2017 à 14:00, Julie Moynat a écrit :
Bonjour,
Merci Philippe.
En fait, ce sont des accordéons car on peut les déplier et les
replier. De cette façon la 2ème ligne n'est pas toujours affichée.
Julie
Le 10 janvier 2017 à 12:14, Philippe Vayssière
<phili...@alsacreations.fr <mailto:phili...@alsacreations.fr>> a écrit :
Bonjour,
les en-têtes d'abord puis le contenu ensuite, pour moi ce serait
plutôt des onglets / Tabs, quelque soit leur design ?
Avec les attributs ARIA décrits dans
http://www.accede-web.com/notices/interface-riche/onglets/
<http://www.accede-web.com/notices/interface-riche/onglets/> , il
n'y a plus le souci que tu as avec un attribut tablist parent.
Semi-HS : si tu es dans le cas précis de Bootstrap 3 et la
nécessité de passer d'onglets / Tabs à accordéon (enfin
"collapse"), il y a ce script
https://github.com/flatlogic/bootstrap-tabcollapse
<https://github.com/flatlogic/bootstrap-tabcollapse>
J'en profite pour te remercier pour ton excellent article et
j'invite à le lire ceux et celles qui ne l'auraient pas encore
découvert => https://www.lelutinduweb.fr/je-suis-integrateur-web/
<https://www.lelutinduweb.fr/je-suis-integrateur-web/>
Bonne journée,
Ph. Vayssière
Le 10/01/2017 à 11:18, Julie Moynat a écrit :
Bonjour,
Je rencontre un problème avec un accordéon qui n'est pas standard
et sur lequel j'ai un peu de mal à voir le balisage ARIA à mettre
en place sur quels balises.
Il s'agit d'un bloc permettant de filtrer des résultats pour une
recherche.
En fait, j'ai un accordéon sur 2 lignes (visuellement et dans le
code) :
* Ligne 1, dans l'ordre : une barre de recherche (hors
accordéon), une liste <ul> avec mes en-têtes accordéons 1, 2,
3, 4, un lien-bouton qui valide les choix faits dans les
accordéons et dans la barre de recherche (hors accordéon)
* Ligne 2 : un bloc qui contient le contenu des accordéons
J'ai donc des contenus d'accordéons détachés de leur en-tête mais
si le balisage des aria-controls et aria-labelledby est bon, ça
ne devrait pas poser de problème.
En revanche, mon problème est que j'ai des éléments qui ne
correspondent pas à l'accordéon dans mon conteneur global (sur
lequel je suis censée mettre un role="tablist" et un
aria-multiselectable="false"). Est-ce que ça pose vraiment
problème ? Si oui, que puis-je faire sans tout casser ?
cf la notice AcceDe Web pour le balisage requis :
http://www.accede-web.com/notices/interface-riche/accordeons/
<http://www.accede-web.com/notices/interface-riche/accordeons/>
En vous remerciant,
Julie Moynat
_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
