Profil « Cliquer facilement »
Tremblements, clavier seul : un site plus facile à cliquer
Le profil « Cliquer facilement » d'Octeasy agrandit d'un clic les boutons, les cases et les liens de menu, entoure d'un cadre jaune épais l'élément atteint au clavier et affiche un grand curseur noir. Le panneau se pilote entièrement au clavier et s'ouvre avec Alt + Maj + A.
Dans le panneau, choisissez « Cliquer facilement ». Raccourci : Alt + Maj + A.
- Gratuit pour le visiteur
- Sans cookie
- Réglages gardés sur l'appareil
- Panneau en français et en anglais
- Boutons 44 × 44 px
- Cases 24 × 24 px
- Liens de menu aérés
- Focus jaune 4 px
- Halo noir 8 px
- Curseur noir 48 px
Qui profite du profil « Cliquer facilement » ?
Le profil est pensé pour les mains qui tremblent, se raidissent ou se fatiguent, et pour ceux qui naviguent au clavier. Le tremblement essentiel, à lui seul, toucherait 5,79 % des personnes de 65 ans et plus selon une méta-analyse mondiale ; le profil rend aussi service, sans aucun trouble, à quiconque clique sur un trackpad, dans le bus ou d'une main.
Avec un trouble ou une maladie
- Tremblements, maladie de ParkinsonTremblement essentiel ou parkinsonien, gestes fins plus lents : une cible plus grande se rate moins souvent.
- Arthrose, polyarthrite des mainsDes doigts raides ou douloureux visent moins bien : de grandes zones et le clavier épargnent les gestes précis.
- Sclérose en plaquesFatigue, maladresse, clavier ou contacteur : un focus bien visible montre toujours où l'on en est.
Au quotidien, sans aucun trouble
- « Je clique à côté des petits boutons »Boutons, cases et liens de menu agrandis : on vise moins, on recommence moins.
- « J'utilise un trackpad ou une souris fatiguée »Un pointeur qui accroche ou glisse trop : les grandes zones pardonnent l'écart, le grand curseur se retrouve d'un coup d'œil.
- « Je tiens mon téléphone d'une main dans le bus »Avec les secousses et le pouce seul, des boutons d'au moins 44 pixels se touchent plus sûrement.
- « Je préfère le clavier »Tab pour avancer, Entrée pour valider : le cadre jaune montre toujours où vous êtes.
Petits boutons, focus invisible : ce que règle le profil
Des boutons trop petits, des cases minuscules, un focus clavier à peine visible et un pointeur qu'on perd de vue font partie des obstacles que décrivent les WCAG. Le profil « Cliquer facilement » active trois réglages qui y répondent, sur toute la page, sans la recharger.
Ce qui gêne : Les petits boutons se ratent
Ce que fait le profil : Grandes zones 44 × 44 px
Au minimum, pour les boutons, champs et listes déroulantes. Plus grands, ils ne changent pas.
Ce qui gêne : Les cases à cocher sont minuscules
Ce que fait le profil : Grandes zones 24 × 24 px
Pour les cases à cocher et les boutons radio.
Ce qui gêne : Les liens de menu sont collés
Ce que fait le profil : Grandes zones +0,35 em
De marge en haut et en bas, pour les liens des menus, des listes et du pied de page.
Ce qui gêne : On ne voit pas où l'on est au clavier
Ce que fait le profil : Focus très visible cadre jaune de 4 px
Doublé d'un halo noir de 8 px, lisible sur fond clair comme sur fond sombre.
Ce qui gêne : Le pointeur se perd sur l'écran
Ce que fait le profil : Grand curseur noir, 48 px
Cerné de blanc. Un grand curseur blanc est aussi proposé.
Dans le panneau, en plus
- Plan de la page Il liste les titres : un clic ou Entrée mène à la partie voulue, sans tabuler partout.
- Surligner les liens Les liens ressortent sur fond jaune, faciles à repérer avant de viser.
- Taille du texte De 100 à 200 % : les liens placés dans le texte grandissent avec lui.
- Stopper les animations Un bouton qui bouge se vise mal : les animations CSS s'arrêtent.
Voir les valeurs exactes : Les valeurs d'Octeasy face aux repères des WCAG
| Élément | Avec le profil | Repère minimal (AA) | Repère renforcé (AAA) |
|---|---|---|---|
| Boutons, champs, listes déroulantes | 44 × 44 px au moins | 24 × 24 px (critère 2.5.8) | 44 × 44 px (critère 2.5.5) |
| Cases à cocher, boutons radio | 24 × 24 px | 24 × 24 px (critère 2.5.8) | 44 × 44 px (critère 2.5.5) |
| Liens de menus et de listes | +0,35 em en haut et en bas | 24 × 24 px, ou assez d'espace autour (critère 2.5.8) | 44 × 44 px (critère 2.5.5) |
| Liens dans une phrase | inchangés | exemptés (critère 2.5.8) | exemptés (critère 2.5.5) |
| Focus clavier | cadre jaune de 4 px, halo noir de 8 px | visible (critère 2.4.7) | au moins l'aire d'un contour de 2 px, contraste de 3:1 (critère 2.4.13) |
Les WCAG s'adressent au site : elles décrivent ce que la page doit offrir d'elle-même, en pixels CSS. Le profil agrandit ce qui existe ; il ne remplace pas des cibles bien dimensionnées dès la conception.
Avant, après : les mêmes boutons
D'abord un formulaire comme on en voit souvent, puis le même avec les réglages exacts du profil. Essayez la touche Tab sur le lien et le bouton, ou ouvrez le widget.
Prise de rendez-vous
Choisissez un créneau dans la liste, cochez la case d'acceptation des conditions puis validez. Un e-mail de confirmation vous sera envoyé aussitôt.
Voir les créneauxRéserver
Activer « Cliquer facilement » en trois gestes
À la souris, au doigt ou au clavier : Tab pour avancer, Entrée ou Espace pour activer, Échap pour fermer. Les réglages restent ensuite enregistrés dans le navigateur, pour ce site.
Ouvrir le panneau
Le bouton d'Octeasy sur la page, ou Alt + Maj + A, sans rien viser.
Choisir « Cliquer facilement »
Zones de clic, focus et curseur changent aussitôt sur toute la page.
Ajuster
Curseur blanc sur un site sombre, liens surlignés, plan de la page : gardez ce qui aide.
Taille des zones de clic et tremblements : ce que disent les études
Plus une cible est petite, plus elle est longue et difficile à atteindre : c'est l'un des résultats les plus solides de l'ergonomie. Les études auprès de personnes atteintes de la maladie de Parkinson le confirment sur écran tactile. Le grand curseur, lui, n'a pas d'effet mesuré sur la précision.
Petite cible, geste plus long
Le temps pour atteindre une cible augmente quand elle rétrécit ou s'éloigne : c'est la loi de Fitts, décrite dès 1954 et vérifiée depuis.
Fitts, 1954Parkinson : des cibles de 14 mm
Chez 39 personnes atteintes de la maladie de Parkinson, des cibles tactiles de 14 mm de côté ou plus ont été touchées avec 97 % de précision ou plus, contre 94 % à 10,5 mm.
Nunes et al., 2016Le pouce, d'une seule main
Sur un téléphone tenu d'une main, des cibles de 9,2 mm suffisaient pour toucher un bouton isolé au pouce sans dégrader la performance.
Parhi et al., 2006Les normes : 24 px au moins, 44 px au mieux
Les WCAG demandent des cibles d'au moins 24 × 24 pixels CSS (AA) et 44 × 44 au niveau renforcé (AAA), en citant les tremblements et l'usage d'une seule main.
W3C, WCAG 2.2, critères 2.5.8 et 2.5.5
À retenir : agrandir les cibles et montrer le focus repose sur des bases solides. Le grand curseur aide surtout à retrouver le pointeur. Et rien ne remplace un site utilisable au clavier.
Navigation clavier sur un site web : ce qui reste à faire
Un widget agrandit et souligne ce qui existe ; il ne rend pas utilisable au clavier un bouton qui ne l'est pas. Ces points, tirés des WCAG, se règlent dans le code et la maquette du site.
Clavier
- Tout le site utilisable au clavier, sans piège (WCAG 2.1.1 et 2.1.2).
- Un ordre de tabulation logique et un lien d'évitement vers le contenu.
- Un focus toujours visible, jamais supprimé par « outline: none » (WCAG 2.4.7).
Zones de clic
- Des cibles d'au moins 24 × 24 pixels (WCAG 2.5.8), 44 si possible.
- De l'espace entre deux boutons voisins.
- Des liens de menu cliquables sur toute leur largeur.
Gestes et temps
- Une autre solution à chaque glisser-déposer (WCAG 2.5.7).
- Pas de geste à plusieurs doigts ou de tracé sans alternative simple (WCAG 2.5.1).
- Assez de temps pour remplir un formulaire, ou un moyen de le prolonger (WCAG 2.2.1).
Vos questions sur la motricité et la navigation au clavier
Comment naviguer sur un site web au clavier ?
Tab passe à l'élément suivant, Maj + Tab revient en arrière, Entrée suit un lien, Espace coche une case ou active un bouton, les flèches parcourent les listes. Le plus dur est souvent de voir où l'on est : le focus très visible d'Octeasy entoure l'élément atteint d'un cadre jaune épais.
Quelle taille minimale pour un bouton ou une zone de clic ?
Les WCAG 2.2 demandent au moins 24 × 24 pixels CSS, ou assez d'espace autour (critère 2.5.8, niveau AA), et 44 × 44 pixels au niveau renforcé (critère 2.5.5, AAA). Avec le profil « Cliquer facilement », les boutons, champs et listes déroulantes passent à 44 × 44 pixels au moins.
J'ai des tremblements : comment cliquer plus facilement avec la souris ?
Sur un site équipé d'Octeasy, choisissez « Cliquer facilement » : zones agrandies, focus visible, grand curseur. Le clavier évite aussi de viser. Ailleurs, les réglages d'accessibilité de l'ordinateur ou du téléphone aident : pointeur agrandi, vitesse du pointeur réduite, touches filtres, adaptations du toucher.
Le widget rend-il un site utilisable au clavier ?
Non. Si un bouton, un menu ou un formulaire ne répond pas au clavier, Octeasy ne le répare pas : il montre mieux où se trouve le focus et agrandit ce qui existe déjà. Rendre chaque élément accessible au clavier se fait dans le code du site.
Le panneau d'Octeasy s'utilise-t-il sans souris ?
Oui. Alt + Maj + A l'ouvre de n'importe où sur la page. Tab et Maj + Tab parcourent les réglages sans sortir du panneau, Entrée ou Espace les activent, Échap le ferme et rend le focus là où il était. Tous les réglages sont de vrais boutons.
Octeasy fonctionne-t-il avec un contacteur ou la commande vocale ?
Le panneau est fait de boutons standard, utilisables au clavier : les outils qui passent par le clavier ou activent les éléments de la page peuvent donc s'en servir. Le résultat dépend de chaque outil et de ses réglages ; le plus simple est de l'essayer sur notre site.
Octeasy rend-il mon site conforme au RGAA ?
Non. Le widget améliore le confort du visiteur qui l'ouvre, mais il ne corrige pas un site : un menu inaccessible au clavier ou des boutons trop petits restent à reprendre dans le code. Octeasy ne rend pas un site conforme au RGAA et ne remplace pas un audit.
Le widget est-il gratuit pour le visiteur ?
Oui. Le visiteur ne paie rien et n'installe rien : toutes les fonctions de confort sont incluses dans chaque formule, même gratuite. Aucun compte à créer, aucun cookie : les réglages restent dans son navigateur, pour ce site.
Sources (10)
- W3C, WCAG 2.2, critère 2.5.8 Taille de la cible (minimum)
- W3C, WCAG 2.2, critère 2.5.5 Taille de la cible (renforcée)
- W3C, WCAG 2.2, critère 2.4.7 Visibilité du focus
- W3C, WCAG 2.2, critère 2.4.13 Apparence du focus
- W3C, WCAG 2.2, critère 2.1.1 Clavier
- Louis et McCreary, « How Common is Essential Tremor? Update on the Worldwide Prevalence of Essential Tremor », Tremor and Other Hyperkinetic Movements, 2021
- Inserm, dossier « Maladie de Parkinson »
- Fitts, « The information capacity of the human motor system in controlling the amplitude of movement », Journal of Experimental Psychology, 1954
- Nunes et al., « User interface design guidelines for smartphone applications for people with Parkinson's disease », Universal Access in the Information Society, 2016
- Parhi, Karlson et Bederson, « Target size study for one-handed thumb use on small touchscreen devices », MobileHCI 2006
Contenu revu le .
Essayez « Cliquer facilement » ici, puis installez-le sur votre site
Le visiteur a toutes les fonctions de confort, même avec la formule gratuite. Une ligne de script suffit.
Les autres profils
- Lire facilementDyslexie et autres troubles dys
- Mieux voirMalvoyance, fatigue visuelle
- Rester concentréTDAH, troubles de l'attention
- Comprendre facilementTroubles cognitifs, mémoire
- Éviter les mouvementsÉpilepsie, migraines, vertiges
- Réduire la lumièrePhotophobie, maux de tête
- Confort seniorPresbytie, vue qui baisse