Naviguer sur le site d’un restaurant, surtout lorsque l’on cherche à satisfaire une faim pressante, doit être une expérience fluide, agréable et sans effort. Malheureusement, ce n’est pas toujours le cas et certaines pratiques peuvent générer une frustration immédiate. L’objectif principal est de permettre aux visiteurs de trouver rapidement et facilement l’information ou le produit désiré, une distinction cruciale qui découle de l’observation des interactions.
1. Les points qui ne fonctionnent pas : La Frustration du client
Ces éléments défaillants sont de véritables sources de frustration pour le client, impactant directement sa capacité à interagir avec le service proposé.
A. Recherche complexe
L’un des problèmes les plus fréquemment rencontrés sur les sites de restaurants est la difficulté à accéder rapidement au contenu principal, à commencer par la carte. Ce qui devrait être une action simple, comme consulter le menu ou passer commande, se transforme parfois en véritable parcours du combattant, surtout pour les utilisateurs peu familiers avec les codes du web ou en situation de handicap.
Cette complexité provient généralement d’un menu de navigation mal structuré ou peu explicite. Les intitulés sont parfois trop vagues (“Nos produits”, “Découvrir”, “Explorer”) ou dispersés dans plusieurs sous-menus, ce qui oblige l’utilisateur à deviner, cliquer au hasard, ou abandonner. À cela s’ajoute l’utilisation d’éléments interactifs peu accessibles, comme des menus déroulants non utilisables au clavier, ou des éléments dynamiques non reconnus par les lecteurs d’écran.
Ce manque de clarté est d’autant plus problématique qu’il touche un moment critique du parcours utilisateur : la recherche de l’information centrale. Si la carte ou le bouton de commande ne sont pas immédiatement visibles ou compréhensibles, cela génère une frustration quasi immédiate. Et cette frustration peut avoir une conséquence directe : l’utilisateur quitte le site et va voir ailleurs chez un concurrent plus accessible et plus lisible.
En somme, un menu de navigation mal pensé ne constitue pas seulement un obstacle d’usage, il devient un frein commercial.
B. Carte non disponible directement sur le site
Parmi les erreurs les plus incompréhensibles figure l’absence pure et simple de la carte sur le site web du restaurant. Dans ce cas, l’utilisateur, pourtant motivé à commander, se retrouve dans une impasse : aucune information sur les plats proposés, aucun accès direct à l’offre, rien d’autre qu’un vague renvoi vers une publication sur les réseaux sociaux.
Cette pratique est contre-intuitive à l’ère du numérique. Le site web devrait être la source principale et la plus fiable d’information, notamment pour quelque chose d’aussi fondamental que la carte. La forcer à être consultée ailleurs sur une story Instagram éphémère, une publication Facebook peu lisible ou un PDF non accessible revient à demander à l’utilisateur de faire un effort supplémentaire et non justifié.
Pour les utilisateurs en situation de handicap, cela peut rapidement devenir une barrière infranchissable : les contenus postés sur les réseaux sociaux ne sont pas toujours accessibles aux lecteurs d’écran, les images de menu ne sont pas accompagnées de texte alternatif, et les plateformes tierces ne garantissent ni ergonomie, ni compatibilité avec les technologies d’assistance.
Mais au-delà de l’accessibilité, cette absence d’information sur le site génère un agacement universel. Tout client, quel que soit son profil, s’attend légitimement à trouver les informations essentielles là où il est censé les chercher : sur le site officiel. Ne pas y inclure la carte, c’est rompre cette logique, et risquer de perdre le client dès les premières secondes de navigation.
C. Conséquences de la difficulté de navigation
Ces “mauvaises pratiques” en matière de navigation ont des répercussions directes et négatives sur l’utilisateur et par extension sur l’activité du restaurant :
- Elles génèrent de la frustration de l’utilisateur.
- Elles imposent un effort supplémentaire au client pour obtenir ce qu’il cherche.
- Face à ces obstacles, le client ne commande pas et se tourne vers un concurrent, ce qui se traduit par une perte de revenu directe.
Plus largement, cette difficulté de navigation est un point de friction qui impacte non seulement la satisfaction du client mais aussi la crédibilité de la marque et les signaux positifs envoyés aux moteurs de recherche. En d’autres termes, une mauvaise expérience utilisateur peut nuire à la réputation du restaurant et à sa visibilité en ligne.
2. Les points qui fonctionnent : simplicité et accessibilité pour tous
Heureusement, il existe de bons élèves qui comprennent l’importance d’une navigation claire et explicite. Pour l’exemple, je vais prendre le site d’une pizzéria où j’ai l’habitude d’aller commander.
A. Navigation claire et explicite
Cette pizzeria a mis en place une approche très efficace : elle affiche directement dans son menu principal deux boutons clés. L’un est intitulé “Commande en ligne” et l’autre “Commander par téléphone”.
Quel est l’intérêt de cette approche simple en apparence ?
- Gain de temps immédiat : Les utilisateurs trouvent instantanément ce qu’ils cherchent, sans avoir à deviner où cliquer ou à parcourir plusieurs pages.
- Accessibilité accrue : Point capital souvent sous-estimé, pour les personnes malvoyantes ou non-voyantes qui utilisent des lecteurs d’écran et la recherche vocale, la clarté de ces boutons est un atout majeur. Un libellé clair et qui donne une indication précise où le bouton nous envoie rend la recherche à la voix beaucoup plus simple. Un bouton comme “cliquez ici” n’est pas utile pour ces technologies, contrairement à “découvrez notre carte”. C’est un pas immense vers l’inclusion numérique.
B. Les photos et ingrédients pour un plat
Au-delà de la seule navigation, l’expérience utilisateur et l’accessibilité s’étendent à la manière dont le contenu est présenté. Sur le site que j’ai analysé, j’ai observé des aspects qui méritent d’être soulignés :
- Description des ingrédients à côté des photos : Un point très positif est la présence de descriptions des ingrédients à côté de chaque photo de plat. Cela permet à l’utilisateur de connaître précisément la composition, ce qui est extrêmement utile pour les personnes ayant des restrictions alimentaires, des allergies ou simplement souhaitant faire un choix éclairé. C’est un excellent exemple de transparence et de considération pour le client.
- La gestion des images : La page listant les pizzas repose sur une bonne logique. Chaque visuel est accompagné d’une description textuelle complète des ingrédients, ce qui rend les images non essentielles à la compréhension. Elles jouent un rôle purement illustratif et peuvent donc être considérées comme décoratives. Cependant, pour qu’un site soit pleinement accessible, ces images devraient être explicitement signalées comme décoratives aux technologies d’assistance, en leur attribuant un attribut alt vide (alt=””). En revanche, si vous jugez que votre image n’est pas seulement décorative vous pouvez renseigner la balise alt avec “[Nom de la pizza] avec [les ingrédients]”
Or, pour ce site de pizzeria, aucun attribut alt n’est présent, ce qui peut entraîner une lecture parasite par les lecteurs d’écran (nom du fichier ou chemin technique). Il ne suffit donc pas de ne rien mettre : l’absence d’attribut est interprétée différemment qu’un attribut vide. Ce point mériterait d’être corrigé pour respecter pleinement les bonnes pratiques d’accessibilité.
3. Maintenant, place aux recommandations
Maintenant que nous avons analysé ce qui fonctionne et ce qui ne fonctionne pas en matière d’accessibilité sur les sites de restaurants, il est temps de transformer ces observations en actions concrètes.
A. Recommandations générales pour une navigation optimale
Pour garantir une expérience utilisateur fluide et accessible, voici les actions essentielles à mettre en place sur le site de votre restaurant :
- Rendez la carte de votre restaurant facilement accessible : Le lien vers votre menu doit être visible et clairement nommé dès la page d’accueil ou dans le menu de navigation principal.
- Utilisez des libellés de boutons explicites : Au lieu de termes génériques, optez pour des expressions claires qui indiquent précisément l’action ou la destination du clic. Par exemple, “Voir la Carte”, “Commander en Ligne”, “Réserver une Table”, “Nous Contacter” sont des exemples de libellés efficaces.
- Facilitez les actions principales : Si la commande par téléphone est une option populaire, un bouton “Commander par téléphone” avec le numéro clairement affiché est très utile.
- Pensez à l’accessibilité vocale : Des boutons avec des libellés précis et descriptifs sont non seulement utiles pour tous les utilisateurs, mais ils sont indispensables pour les personnes utilisant des assistants vocaux ou des lecteurs d’écran. Cela rend votre site utilisable par une audience beaucoup plus large.
- Évitez les informations dispersées : Toutes les informations importantes (carte, horaires, contact, adresse) doivent être centralisées et faciles à trouver sur votre site, sans obliger l’utilisateur à naviguer sur d’autres plateformes comme les réseaux sociaux.
B. Recommandations spécifiques pour les images
Les images jouent un rôle fondamental dans la communication visuelle sur le web. Mais pour de nombreux utilisateurs, notamment ceux utilisant un lecteur d’écran ou souffrant de troubles cognitifs ou visuels, elles peuvent devenir un obstacle si elles ne sont pas correctement intégrées.
Chaque image doit être accompagnée d’un texte alternatif (alt) qui décrit brièvement son contenu ou sa fonction.
- Pour une image informative, l’attribut alt doit transmettre l’information véhiculée par l’image.
- Pour une image purement décorative, utilisez un alt vide (alt=””) et excluez-la de la navigation avec role=”presentation” ou aria-hidden=”true”.
Les images ne doivent pas être le seul canal d’information. Si une information importante est transmise par une image (graphique, pictogramme, carte, etc.) :
- Fournissez une description textuelle à proximité
- Utilisez aria-describedby pour y lier une description longue si nécessaire.
Pour les images complexes (schémas, infographies, graphiques) :
- Utilisez une légende explicative en dessous de l’image.
- Fournissez un texte équivalent ou résumé détaillé, adjacent ou lié via ARIA.
Lorsque vous utilisez une image comme lien ou comme bouton interactif :
- L’attribut alt de l’image doit clairement indiquer l’action qui sera déclenchée ou la destination vers laquelle le lien mènera, plutôt que de simplement décrire l’image elle-même ou son nom de fichier. Par exemple, pour un bouton de téléchargement, l’alt devrait être “Télécharger le PDF de la brochure”.
✅ Récapitulatif : ce qu’il faut toujours vérifier
| Type d’image | Attribut alt requis ? | Contenu de l’attribut alt |
| Image informative | ✅ Oui | Décrire ce que l’image représente |
| Image décorative | ✅ Oui (alt=””) | Vide pour être ignorée par les lecteurs d’écran |
| Bouton / lien | ✅ Oui | Indiquer l’action ou la destination |
| Logo | ✅ Oui | Nom de la marque ou de l’entreprise |
| Graphique complexe | ✅ Oui + description | Résumé ou équivalent texte à part (légende, description liée) |
L’accessibilité des images est souvent négligée, mais elle constitue une composante essentielle d’un site web inclusif. En appliquant ces bonnes pratiques, vous garantissez une meilleure expérience à tous les utilisateurs, tout en respectant les obligations légales d’accessibilité numérique.
C. Recommandations : formulaires de contact accessibles
Pour ce qui est des formulaires de contact, leur accessibilité est fondamentale pour garantir que tous les utilisateurs, y compris ceux en situation de handicap, puissent interagir et accéder aux services essentiels. Un formulaire de contact bien conçu est facilement utilisable par tous.
Voici les points clés à respecter pour un formulaire de contact accessible, en s’appuyant sur les standards WCAG et le RGAA :
- Étiquetage clair des champs : Chaque champ (comme le nom, l’adresse e-mail, le message) doit avoir une étiquette visible et explicite qui décrit sa fonction, et cette étiquette doit être reliée au champ à l’aide de la balise <label> avec l’attribut for. Il est crucial d’éviter de se reposer uniquement sur les placeholders, car ils peuvent être invisibles pour les aides techniques ou disparaître lors de la saisie.
- Navigation fluide au clavier : Un utilisateur doit pouvoir naviguer dans le formulaire uniquement avec le clavier (touches Tab, Maj+Tab, Entrée, Espace). Tous les éléments interactifs doivent être atteignables et activables sans l’utilisation de la souris.
- Annonces pour les lecteurs d’écran : Pour les utilisateurs de lecteurs d’écran, des descriptions supplémentaires doivent être fournies, par exemple en utilisant aria-describedby pour lier un champ à un message d’aide. Il faut également indiquer si un champ est requis à l’aide des attributs required et/ou aria-required=”true”.
- Gestion claire des erreurs : Si une erreur survient lors de la saisie, elle doit être indiquée de manière claire à proximité du champ concerné, en utilisant une couleur combinée à un texte explicite et, si possible, une icône. Les messages d’erreur doivent également être lisibles par un lecteur d’écran, via role=”alert” ou aria-live=”assertive”.
- Retour utilisateur après action : Une fois le formulaire soumis avec succès, un message de confirmation visuel doit être affiché et lu automatiquement par un lecteur d’écran, en utilisant role=”status” ou aria-live=”polite”.
- Accessibilité mobile et zoom : Les formulaires doivent être responsives, c’est-à-dire adaptés aux écrans mobiles, et pouvoir être zoomés jusqu’à 200 % sans perte de contenu ni chevauchement.
En appliquant ces recommandations à l’ensemble des éléments du site, des menus aux formulaires, on construit une expérience réellement inclusive, cohérente et efficace pour tous les utilisateurs.
Bonus : les captchas dans les formulaires
Les CAPTCHA sont souvent utilisés pour sécuriser les formulaires contre les robots, mais ils posent de nombreux problèmes d’accessibilité. Le RGAA exige que ces dispositifs soient utilisables par tous, y compris par les personnes utilisant un lecteur d’écran ou ne pouvant pas utiliser la souris. Voici un tableau récapitulatif des enjeux et des solutions accessibles recommandées.
| Solution accessible | Description |
| Test logique simple | Par exemple : « Combien font 2 + 3 ? » – compatible clavier et vocalisation |
| Honeypot invisible | Champ caché à remplir par les bots, ignoré par les humains |
| Jetons côté serveur (CSRF token, etc.) | Vérification côté backend sans interaction utilisateur |
| Vérification différée (reCAPTCHA v3) | Analyse comportementale (score) sans interaction visible |
Conclusion : une accessibilité qui profite à tous
L’accessibilité numérique n’est pas un luxe réservé à quelques utilisateurs, mais un levier essentiel pour améliorer l’expérience de tous les clients y compris ceux en situation de handicap. Un site de restaurant accessible, c’est un site plus clair, plus fluide, plus efficace. L’exemple de la pizzeria analysée montre qu’il est possible de proposer une navigation intuitive et une présentation visuelle agréable.
En adoptant ces bonnes pratiques, les restaurants ne se contentent pas de se conformer à des normes : ils élargissent leur clientèle, améliorent leur référencement naturel, et surtout, démontrent un véritable respect de tous leurs utilisateurs.