Ergonomie d'un slideshow

Bonjour à tous,

je suis développeur débutant.

Pour faire mes armes, j'ai décidé de faire un slideshow maison.

Avant de passer à la partie développement, j'aimerai avoir des conseils en ergonomie.

Quelles sont d'après vous les qualités requises afin d'avoir un slideshow ergonomique et performant?

J'ai déjà récolté quelques infos mais je ne souhaite pas les exposer tout de suite afin de ne pas orienter le jugement des personnes et avoir un retour le plus sincère possible.

Merci pour vos conseils

Ebu

Bonjour et bienvenue sur le forum,Ebu

Ebu a écrit :
J'ai déjà récolté quelques infos mais je ne souhaite pas les exposer tout de suite afin de ne pas orienter le jugement des personnes et avoir un retour le plus sincère possible.

Ça ne marche pas comme ça.
Tu est dans une communauté d'entraide, pas de travail à ta place (cf aide/règles du forum).
Rien ne permet d'être sûr de ce que tu avance. Et quand bien même, ce n'est pas une raison

Bref, après les reproches, quelques indications sur ce que j'attends d'un diaporama ergonomique :
– bouton d'arrêt/marche si défilement automatique
– accès en navigation clavier à la navigation entre les sldies et à chacun des slides
– boutons de navigation (flèches suivant/précédent mais aussi par item) accessibles et correctement labellisés
– fallback en cas d'absence de JS
– responsive possible (option du script)

Pour le confort des dévs/intés qui travailleront dessus :
– soit du JS natif, soit dépendance jQuery qui est la lib la plus courante
– templating CSS facultatif, pour maximiser la prise en main en contexte spécifique et l'efficacité pour les intés
– convention de nommage des éléments reposant sur des classes prefixées et utilisant au moins l'un des standards de nommage CSS actuels
– évidemment, respect de la sémantique HTML ; code CSS valide et raisonnablement intéropérable ; JS propre et non-obstrusif

En espérant lire plus de ta part dans la suite de tes messages

yo,

c'est volontaire de ma part. quand on met une partie de la réponse au départ, tout le monde vient ajouter un détail et c'est vite le bordel. là, ca démarre sur les chapeaux de roue. Néanmoins je comprends ta démarche car rien ne te dit que j'ai déjà fait une grosse partie du taf.

Pas de soucis de mon côté pour en remettre :
- alternatives sur toutes les images avec maitrise du contenu
- title sur les liens non explicites et maitrise du contenu
- contraste des textes suffisamment importants (possibilité d'ajouter un fond opaque sur les textes apparaissant sur l'image afin d'éviter les pb de contraste)
- présentation sous forme de liste html
- comme tu l'as évoqué indirectement : pas de perte d'information à la désactivation du css et du js

voilà,
ca va être difficile de trouver d'autres critères...

merci
Ebu
Modifié par Ebu (12 Nov 2014 - 14:34)

Hello Ebu,

Si tu veux faire de la performance, tu peux aussi faire du lazyload sur tes images. Ce qui t'évitera des requête inutiles au chargement de la page.
Par contre, niveau referencement, c'est moins top.

Yo Tomin

bonne idée pour l'optimisation, mais les problématiques d’accessibilité et de référencement sont trop importantes pour y associer du lazyload.

Je partirai sur des images bien optimisées pour compenser

:) merci

j'ajouterai :
bien signaler les boutons en cours quand on navigue au clavier.

Est ce que d'autres personnes ont un avis sur la question.

Nous avons déjà fait un gros tour de la question et je me demande s'il y a des choses à ajouter

merci

Je remonte le sujet pour mettre un lien vers un caroussel accessible bien fichu, par Romain Gervois : http://www.romaingervois.fr/carrousel/

Merci jb pour ce retour,

en effet, il y a un effort d'accessiblité.

Néanmoins, l"ergonomie 'est pas top.

ca me fera déjà une bonne base

ty

ced

Bonjour Ebu,

Je suis le développeur et l'intégrateur de ce carrousel (le fameux Romain).

Tu écris que ce carrousel n'est pas top côté ergonomie peux-tu en dire plus (je connais très peu d'implémentation de carrousel qui couvre à la fois détection du survol et détection du focus notamment) ? A moins que ce soit lié à la méconnaissance de l'utilisation clavier standardisée utilisée.

Enfin du fait de mon métier et mon expérience, je peux te certifier que l'expression "Effort d'accessibilité" est inadaptée .

Romain
Modifié par yodaswii (02 Dec 2014 - 01:09)

Bonjour Romain,

je pense que j'ai besoin de faire preuve de plus d'humilité et d'apprendre encore beaucoup et tu m'as tout l'air d'un excellent maitre Jedi:D

Pour la question d'accessibilité, je crois que l'on ne peut pas naviguer au clavier. Mais pas sûr!!!! pas envie de me faire fumer encore:)
je crois qu'un alt sur les fleches serait utile afin d'eviter la synthese vocale d'énoncer le nom du fichier en fonction de son réglage utilisateur.
y'a un truc qui s'appelle aria je crois.je ne sais pas si son utilisation rentre dans ce contexte.

ergonomie
il faudrait peut être faire disparaitre les fleches de navigation quand on désactive le css car elles n'ont plus de raison d'être dans la mesure où tout est déjà affiché. techniquement ca me semble compliqué
de plus le survol des fleches n'est pas indiqué

javascript :
je suis une quiche, je fais confiance

bon voilà, pour cet échange très pro....
J'espère que cette fois, je n'ai pas dit trop de merde
merci pour ton aide.
ced
y'a un truc qui s'appelle aria je crois.je ne sais pas si son utilisation rentre dans ce contexte.


Sur l'ergonomie :
pa d'indication visuelle au survol des fleches


clavier standardisée utilisée. : kesako . non je ne connais pas.

Quel terme correct puis je utiliser pour dire que des dispositions ont été prises pour endre accessible mais que ce n'est pas parfait?

Bonsoir Ebu,

"ebu" a écrit :
Pour la question d'accessibilité, je crois que l'on ne peut pas naviguer au clavier. Mais pas sûr!!!! pas envie de me faire fumer encore:)

La navigation clavier est prise en charge ; elle est juste inhabituelle de ce que l'on peut trouver (navigation par la touche tabulation). Sur ce carrousel, la navigation clavier au sein de chaque panneau se fait depuis les éléments placés en bas du composant (points ou chiffres) selon la configuration du carrousel : la prise de focus se fait sur l'élément sélectionné et le passage vers un autre élément se fait par les touches directionnelles (haut ou gauche pour l'élément précédent et bas ou droite pour l'élément suivant).

Note : Cette façon de naviguer est définie par la spécification ARIA (Accessible Rich Internet Applications) qui établit des modèles de conception de composants que ce soit en terme de rôles, propriétés, états et de navigation clavier (ce que j'ai appelé dans mon précédent post "navigation clavier standardisée"). Dans le cas de ce carrousel, je me suis appuyé sur le modèle de conception du composant Tab Panel.

"ebu" a écrit :
je crois qu'un alt sur les fleches serait utile afin d'eviter la synthese vocale d'énoncer le nom du fichier en fonction de son réglage utilisateur.

Les boutons précédent et suivant du carrousel sont bien dotés d'un attribut alt afin de pouvoir être correctement exploités et restitués par une synthèse vocale. Peut être penses-tu que la présence de ce alt se manifeste par la présence d'une info-bulle (comme certains navigateurs ont pu le faire autrefois) ? Ce n'est juste pas le cas. Par contre, ces deux boutons sont implémentés de manière à avoir ces info-bulles (via l'attribut title sur l'élément img contenu dans le button) :

<button type="button"><img src="previous.png" alt="Panneau 1, item précédent" title="Panneau 1, item précédent" /></button>

Par contre, pour ce code, les info-bulles ne s'affichent pas sous Firefox (lié à Firefox et non au code en lui-même).

"ebu" a écrit :
il faudrait peut être faire disparaitre les fleches de navigation quand on désactive le css car elles n'ont plus de raison d'être dans la mesure où tout est déjà affiché. techniquement ca me semble compliqué

Cela pourrait être géré mais ça ne représente aucun intérêt : il n'existe pas de contexte de navigation où l'utilisateur désactive totalement la couche CSS. Il peut bien sûr y avoir de l'adaptation pour des besoins utilisateur mais ce n'est pas problématique : je ne vois aucun utilisateur s'amuser à personnaliser l'affichage de panneaux inactifs en ciblant l'attribut aria-hidden à true (propriété ARIA permettant d'annihiler la restitution par une synthèse vocale).

"ebu" a écrit :
de plus le survol des fleches n'est pas indiqué

Cela peut effectivement être une amélioration (je suppose que tu parles d'un changement soit de couleur des flèches soit des fonds pour les boutons précédent et suivant).

"ebu" a écrit :
J'espère que cette fois, je n'ai pas dit trop de merde merci pour ton aide.

Pas de souci, quand tu fais des commentaires de ce genre de travaux, n'hésites pas à argumenter et expliquer pour que la personne concernée puisse éventuellement prendre en compte et corriger le cas échéant : tout le monde peut ainsi en profiter. Peut-être seras-tu hors sujet ou dans le faux mais l'important c'est la forme que ça soit une critique positive.

"ebu" a écrit :
Quel terme correct puis je utiliser pour dire que des dispositions ont été prises pour endre accessible mais que ce n'est pas parfait?

La perfection n'existe de toute façon pas (et ce travail n'est pas présenté comme tel). Après si tu constates des problèmes liés à l'accessibilité, n'hésites pas à me les remonter ce sera avec plaisir (et un intérêt réel) que je les prendrai en compte (et mettrai à jour en conséquence). L'expression "effort d'accessibilité" est quelque peu réducteur vu mon implication sur le sujet de l'accessibilité et sur le temps consacré à penser l'accessibilité de ce carrousel (temps plus long que la réalisation technique). Mais je mets ça sur le compte d'une maladresse de formulation .

Bonne continuation dans ton développement.
Romain
Modifié par yodaswii (09 Dec 2014 - 23:37)

Hello,
En attendant les réponses de l'auteur du carousel en question, quelques pistes ci-après.
Maisd'abord, as-tu ben lu le code généré ?

Ebu a écrit :
je crois qu'un alt sur les fleches serait utile afin d'eviter la synthese vocale d'énoncer le nom du fichier en fonction de son réglage utilisateur.

Non seulement il y a un texte alternatif, mais un intitulé est également présent pour indiquer la fonction du bouton…

Ebu a écrit :
il faudrait peut être faire disparaitre les fleches de navigation quand on désactive le css car elles n'ont plus de raison d'être dans la mesure où tout est déjà affiché.

Pourquoi ? Elle sont toujours présentes dans le DOM, donc utilisables même sans feuille de styles, sauf erreur…

Ebu a écrit :
de plus le survol des fleches n'est pas indiqué

Pas d'effet hover, certes, mais je pense que l'objet de l'auteur est de proposer une base accessible, pas un énième script de diaporama prêt à l'emploi. Je n'utiliserais clairement pas ceci sans un refonte graphique complète (à propos : Romain, si tu me lis, quelles sont les "contraintes" d'attributions de droits concernant ton –excellent– travail, si tant est qu'il soit réutilisable en fait ?).

Bon ben je me suis fait méchamment griller par yodaswii pour le coup
Modifié par audrasjb (09 Dec 2014 - 23:39)

Hello,

je ne m'attendais pas à un telle levée de boucliers dans la section débutants!!!

Sans compter que quand j'ai vu que j'avais de manière non intentionnelle était impoli, j'ai pris de grosses pincettes pour la suite de mon message. et bam, je me reprends une volée.
Merci Romain pour ton retour. Effectivement ca faisait cheveux dans la soupe mon intervention. Je m'en excuse, j'étais dans mon truc et je n'ai pas fait attention.

Bref,

En fait, si j'ai bien compris, vous avez utilisé ARIA à son maximum pour rendre l'application accessible.

alors, je vais peut être poser une question idiote, mais j'ai demandé à 3 personnes non voyantes utilisant une synthèse vocale et pas une ne connait les fonctionnalités dont vous parlez. est ce que ce sont des cas isolés ou bien est ce que les fonctionnalités d'aria ne sont pas exploitées par les utilisateurs faute de connaissance?

Autre chose, je ne parviens pas à l'utiliser avec jaws. il m'indique de faire une combinaison touche jaws+ alt + n pour contrôler les panneaux. Je crois que touche jaws est la touche insert. Mais comme ca ne fonctionne pas, je dois faire une erreur à un moment. Peux tu m'indiquer comment faire?

Audrasjb :
tu me parles d'une refonte graphique complète pour mettre un hover... je ne comprends pas bien. ca fait beaucoup de taf pour simplement grossir ou entourer un bouton. ou parles tu de l'utilisation du slide dans son ensemble?
De plus, je te rappelle que mon post touche à la fois à l'accessibilité et à l'ergonomie. Et un effet hover est justifié sur un plan ergonomique afin de simplifier et d'améliorer l'expérience utilisateur. Une personne âgée peut familiarisée avec internet sera ravi de voir le bouton grossir afin de l'identifier comme bouton cliquable.
De plus même pour moi, j'y trouve un certains confort car je sais rapidement si mon curseur et hover ou non.



Concernant l'alternative sur l'image : désolé, j'ai confondu avec le caroussel d'hoffman

Sinon sur le plan de l'accessibilité, après ces explications, il faut admettre que c'est au top du top.

Je vais tenter de reproduire tout cela, ca me fera une bonne première expérience.

merci
Modifié par Ebu (11 Dec 2014 - 15:08)

Bonjour,

"Ebu" a écrit :
je ne m'attendais pas à un telle levée de boucliers dans la section débutants!!! ... Merci Romain pour ton retour. Effectivement ca faisait cheveux dans la soupe mon intervention. Je m'en excuse, j'étais dans mon truc et je n'ai pas fait attention.

Aucun souci . C'était plus une forme d'étonnement par rapport à tes propos. Vraiment rien de grave et aucun souhait de "te rentrer dedans" (que ce soit côté audrasjb que de mon côté) .

"Ebu" a écrit :
En fait, si j'ai bien compris, vous avez utilisé ARIA à son maximum pour rendre l'application accessible.

alors, je vais peut être poser une question idiote, mais j'ai demandé à 3 personnes non voyantes utilisant une synthèse vocale et pas une ne connait les fonctionnalités dont vous parlez. est ce que ce sont des cas isolés ou bien est ce que les fonctionnalités d'aria ne sont pas exploitées par les utilisateurs faute de connaissance?

L'utilisation d'ARIA a été choisie car cette surcouche à HTML permet dans le cas de ce carrousel (ça n'est pas toujours le cas) d'être structurante fonctionnellement et qu'elle répond bien à ce que l'on peut demander en terme d'accessibilité.

Ta question n'est pas idiote (elles sont rarement idiotes sur ce genre de sujets). ARIA est une spécification assez récente et qui commence progressivement à être supportée. Donc c'est tout à fait possible que ces trois personnes n'en tirent pas encore usage (par méconnaissance de l'utilisation de leurs lecteurs d'écran ou alors car leurs lecteurs d'écran ne proposent pas encore de fonctionnalités dédiées).

"Ebu" a écrit :
Autre chose, je ne parviens pas à l'utiliser avec jaws. il m'indique de faire une combinaison touche jaws+ alt + n pour contrôler les panneaux. Je crois que touche jaws est la touche insert. Mais comme ca ne fonctionne pas, je dois faire une erreur à un moment. Peux tu m'indiquer comment faire?

J'avais eu un retour d'un utilisateur américain m'indiquant que JAWS version 15 lui proposait un raccourci clavier (touche JAWS + alt + M (et non N)) pour transmettre le focus au panneau actuellement affiché. Ce raccourci clavier me disait-il été inopérant lorsqu'il l'activait (donc un problème lié au lecteur d'écran lui-même). Peut-être est-ce le même problème : même version ? même raccourci clavier ?

"Ebu" a écrit :
tu me parles d'une refonte graphique complète pour mettre un hover... je ne comprends pas bien. ca fait beaucoup de taf pour simplement grossir ou entourer un bouton. ou parles tu de l'utilisation du slide dans son ensemble?
De plus, je te rappelle que mon post touche à la fois à l'accessibilité et à l'ergonomie. Et un effet hover est justifié sur un plan ergonomique afin de simplifier et d'améliorer l'expérience utilisateur. Une personne âgée peut familiarisée avec internet sera ravi de voir le bouton grossir afin de l'identifier comme bouton cliquable.
De plus même pour moi, j'y trouve un certains confort car je sais rapidement si mon curseur et hover ou non.

Comme l'a dit audrasjb, ce carrousel peut être soit utilisé en l'état soit adapté selon les besoins. Je n'ai pas forcément fait de travail sur l'ergonomie en temps que tel et donc c'est améliorable et adaptable selon les besoins : les sources sont à disposition sous licence MIT. Tu es donc libre d'améliorer et d'adapter.

Il ne s'agit pas à proprement parlé d'un travail conséquent mais juste que ce genre de composants (librement téléchargeable et modifiable) ne pourra pas répondre à tous les besoins de chacun. Je peux juste te dire que je prépare une nouvelle version qui va corriger un problème (honteux ) de validité du code, apporter quelques autres fonctionnalités et améliorer certaines choses (touchant à des aspects ergonomiques suite à quelques conseils que j'ai pu recueillir).

"Ebu" a écrit :
Je vais tenter de reproduire tout cela, ca me fera une bonne première expérience.

Bon développement.
Romain

Bravo pour ton impressionnant travail.

A mon stade, il m'est impossible de t'aider dans l'amélioration du caroussel, mais je vais tenter

bien cordialement