Mastodawn

Sinon, je peux mettre un lien vide ou un bouton vide au tout début du DOM avec un aria-labelledby ? 🤔

Après, je commence à me dire que ce n'est peut-être pas un problème technique mais plutôt un problème de design.

En gros on a ce genre de composant mais en très simplifié. Un bouton à gauche, pas d'image, un titre, des boutons à droite et la "carte" (ou le "panel") est moins haut.

Sur Steam, je vois que la zone cliquable n'est pas étendue sur l'entiereté du panel (sûrement car il y a d'autres actions possibles).
Cependant, on a un autre composant très similaire où j'ai réussi à avoir l'entièreté du panel qui est cliquable mais les boutons à droite sont cliquables aussi.

Bon après je suis pas spécialiste mais je peux focus des éléments qui ne font rien. Quand je tabule je passe sur l'image puis sur le titre et ces deux éléments font la même action (rediriger vers la page du jeu). Je pense que Steam n'est pas spécialement un exemple en accessibilité (encore une fois je peux me tromper).

https://livefront.com/writing/accessibility-dos-and-donts-for-interactive-cards/

Tout ce qu'on trouve sur Internet semble être choisi pour être simple… trop simple par rapport à ce qu'on peut voir dans la vraie vie.

C'est très bien mais si ma carte est un lien, je ne vais pas mettre mes boutons dans le lien ? Donc je vais faire la solution évoquée, c'est ça dire mettre tout ça dans une div class="card" (ou mieux une balise article) et que se passera-t-il si mon bouton est à gauche et non en bas ou à droite ? Le bouton de gauche recevra le focus avant la carte.

Accessibility Dos and Don'ts for Interactive Cards | Livefront Digital Product Consultancy

Expand the reach of card UIs with sturdy, conventional markup Card UIs are everywhere UI designers love cards for good reason: they group related information in a visually engaging, interactive way. But making them accessible for keyboard and screen reader users is trickier than it seems.

Livefront

Emmanuel 🌱6d ago

@feudjais À ce stade il faudrait un exemple de ton code sur un jsBin ou autre codePen. Difficile de comprendre de quoi il retourne sinon. 😕

Considération supplémentaire : si les actions ont des zones actives qui se superposent, tu as potentiellement un point RGAA en difficulté (je n'ai pas le point précis en tête à l'instant).

@feudjais tu as l'attribut tabindex peut-être ? https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex

HTML tabindex global attribute - HTML | MDN

The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.

MDN Web Docs

@luciledt Oui mais jouer avec ça, ça n'est pas très accessible je crois.

En particulier si on se retrouve avec plusieurs cartes sur la page.

Si je mets -1, les boutons seront tabulés avant les cartes.
Si je mets 1, tous les boutons seront tabulés après avoir parcouru les cartes.

Donc je pense que ça n'est pas la solution, hélas 😕

@feudjais si dans ton cas j'étais partie sur cette solution, j'aurais utilisé l'attribut sur tous les éléments, pour définir explicitement leur ordre. C'est poussif mais ça a le mérite de fonctionner

@luciledt sauf erreur, ça ne peut pas marcher, si ?

Si j'ai 5 cartes, j'aurais :

5 boutons gauche avec tabindex=1
5 boutons principaux/liens avec tabindex=0

Donc quand on tabulera on passera sur tous les boutons principaux (les cartes) puis sur tous les boutons de gauche ?

Et si je fais l'inverse je parcourerai d'abord tous les boutons gauche puis toutes les cartes.

Ou je me plante complet ?

@feudjais tu fais tabindex=1, tabindex=2, tabindex=3... jusqu'à avoir couvert tout ce que tu veux naviguer au clavier :)

@feudjais à moins que je comprenne mal ton problème, j'ai un cerveau peu fonctionnel ces temps-ci 😅

@feudjais ah oui oublie j'ai mal lu ton premier message, désolée de t'avoir fait perdre du temps !

Sylvain G.5d ago

@feudjais perso je suis plutôt favorable à un ordre de lecture aligné avec le visuel. Mais sinon l’ordre dans le DOM prend la main. Pourquoi ne pas juste mettre ces boutons de droite en premier dans le DOM ? Ils sont probablement positionnés de toute façon ?