5569 sujets

Sémantique web et HTML

Bouton doctolib et accessibilité web

Bonjour, je dois intégrer un bouton "doctolib" (prise de rendez-vous thérapeute) sur le site de mon client. Le code me parait vraiment pas terrible (css inclue, pas de balise <button>, target blank..., ) de plus mon site est en accessibilité web et je ne pense pas que ce type de bouton le soit, bien étrange pour un site proposant des rendez-vous à des clients (sauf non-voyant et mal voyant).
Au téléphone j'ai eu un markéteu agressif qui ne comprends pas l'intérêt de l'accessibilité. Pouvez-vous me dire ce que vous pensez du code ?


<a href="https://www.doctolib.fr/psychologue/paris/test" style="color:#fff" target="_blank" data-reactroot=""><div style="display:block;text-align:center;background-color:#0596DE;color:#ffffff;font-size:14px;overflow:hidden;width:100%;height:44px;line-height:44px;padding:none;position:fixed;z-index:1010;bottom:0;right:0;left:0"><img style="height:23px;float:left;margin:10px 5px 0 5px;vertical-align:middle;width:auto" src="https://www.doctolib.fr/external_button/doctolib-white-transparent.png" alt="Doctolib"/><span style="display:block;float:left">Prendre rendez-vous en ligne</span><button type="button" style="display:block;width:176px;height:34px;border-radius:4px;background-color:#ffffff;line-height:32px;color:#0596DE;margin:0 auto;text-transform:uppercase;float:right;margin-top:5px;margin-right:5px">Cliquez ici</button></div></a>
Bonjour,

le code est assurément pas terrible mais je suppose que tu peux faire ton propre code vu que c'est un simple lien :

<a href="https://www.doctolib.fr/psychologue/paris/test" class="button">let's go</a>
Bonjour,
c'est vrai, je pourrais faire le bouton... mais Doctolib distribue ses boutons sous cette forme et je suis très surpris que l'accessibilité ne soit pas prise en charge, d'autant que Doctolib s'adresse à des patients, les personnes non-voyantes n'auront donc pas accès au planning (qui lui même n'est pas accessible...).
Ça ne m'étonne pas car il n'y a que très peu d'investissement de faits pour rendre les sites accessible. C'est dommage mais on est dans une période du vite et pas cher au détriment de la qualité du service.
Modérateur
Bonjour, le code n'est pas magnifique, mais tu peux l'adapter comme tu le souhaites, c'est juste un lien. Par contre il ne me semble pas poser de grave problèmes en termes d'accessibilité, l'ouverture du lien dans une nouvelle fenêtre devrait être annoncée, mais ce n'est pas la fin du monde non plus (cela ne rend pas la chose inutilisable).

ps: l'utilisation de la balise <a> est plus correcte ici que <button>, car c'est un lien, non un boutton
Bonjour,
le bouton est distribué comme cela à l'ensemble des thérapeutes, la balise <button> aurait été préférable... C'est plus pour l'accessibilité que je m'inquiète, je trouve étonnant qu'une société comme Doctolib n'est pas intégré dans son cahier des charges cette accessibilité web, il est regrettable que l'utilisateur final soit le client (thérapeute, médecin...) et non le patient. Le profit à court terme de la part de ce type de société dématérialisée à de plus en plus tendance à m'énerver...
Modérateur
En terme d'accessibilité comme je l'ai dit il n'y a pas de grave dysfonctionnement avec ce code.
a écrit :
la balise <button> aurait été préférable...

Non. Ni en termes d'accessibilité ni sémantiquement, <a> est plus correct.
ta réponse est étonnante, tu n'est pas dérangé par le target blank, les styles dans le code <span>, le "cliquez ici" qui ne veut rien dire en terme de direction... ce code te semble bon en accessibilité et W3C ?
J'aurai plutôt mis un lien classique aussi.

Je pense que dans leur cahier des charges il est marqué quelque part que l'application doit être accessible/conforme aux standards. Mais derrière personne n'est formé pour (d'ailleurs ça existe des études ou l'on apprend cela ?) ni ne s'y intéresse et quand on voit ce type de codes cela laisse supposer qu'on est même assez loin d'avoir les bases (font en px, largeur fixe).

Après il faut qu'il y est une volonté dès le départ du projet et mettre les moyens pour - concrètement embaucher des gens pour faire cela - car le dev ou le commercial ne sont que des maillons de la chaîne et n'y peuvent pas grand chose

Le target blank je n'en utilisai jamais a titre personnel mais malheureusement les clients cassent systématiquement les pieds avec ça donc à force on prend l'habitude de les mettre sur les liens externes afin d'éviter un aller-retour avec le client.
Modifié par Depassage (20 Feb 2019 - 10:54)
Modérateur
«bon» je n'irais pas jusque là. Loin s'en faut.

Les problèmes d'accessibilité de ce code sont les suivants:

1) Le plus problématique: Un <button> dans un <a>, en plus d'être invalide en HTML, ça peut être problématique en terme d'interaction et de compréhension. (La solution est de remplacer le button par un span, et probablement lui donner un aria-hidden)
2) Un manque de visibilité du focus du <a>, qui est dépendant uniquement du style de la page dans lequel il est inséré.
3) Le target _blank sans mentionner explicitement l'ouverture dans une nouvelle fenêtre, bien que cela est et reste mineur comme souci.

Cela n'empêchera pas les mal-voyants d'accéder au lien, cela rendra l'utilisation moins confortable pour certains, attention à ne pas tomber dans l'éxagération.

Mais, le style intégré n'est pas un problème d'accessibilité, ni en matière de validité. C'est un problème d'organisation et de maintenance du code, problème que de toute façon tu auras si tu copie-colles du code sans réflexion dans tes pages. Le code à copier-coller pour intégrer ne sera de toute façon jamais parfait.
Modifié par kustolovic (20 Feb 2019 - 12:24)
merci pour cette réponse. J'ai imaginé naïvement que ce type de société (doctolib) mettait les moyens pour l'utilisateur final et que l'ensemble du projet était audité pour du W3C et de l'accessibilité. C'est un autre monde...
Greg_Lumiere a écrit :
Si je ne pouvais n'en citer qu'un: Atalan Smiley smile


Je parlai surtout de cursus universitaire car c'est un métier a part entière qui pourrait/devrait avoir ses propres filières.
Sujet clos
Aller à