Le terme « vibe coding » n'existait même pas avant 2025, mais cette approche de génération de code basée sur l'IA est déjà devenue la norme, car elle permet aux développeurs de mettre en production des logiciels plus rapidement que jamais.
L'IA peut et doit être un outil puissant dans notre arsenal de développeurs. Elle élargit et renforce nos capacités, nous aidant ainsi à être plus productifs lors de l'écriture de code. Mais ce gain de productivité a parfois un coût. Le code généré par l'IA est souvent bâclé, redondant et difficile à comprendre.
C'est un problème.
Bien sûr, le mauvais code n'est pas un phénomène nouveau. C'est d'ailleurs pour cela qu'il existe des outils de test. Ce qui est nouveau, c'est la quantité de mauvais code que nous produisons aujourd'hui — et à quelle vitesse — à cause du « vibe coding ».
Que pouvons-nous faire ?
Si le « vibe coding » facilite la production rapide de code (même si cela se traduit parfois par des expériences d'accessibilité loin d'être optimales), le « vibe fixing » est la solution évidente pour que l'accessibilité suive le rythme.
Il est indispensable de tester l'accessibilité de notre code, et grâce aux workflows modernes basés sur l'IA, ces tests sont plus faciles que jamais. La correction des problèmes détectés lors de ces tests est également plus simple que jamais. Cela signifie que nous pouvons bénéficier d'un gain de productivité aussi important pour les tests d'accessibilité que pour le codage, puisque nous sommes désormais en mesure de corriger ces problèmes plus rapidement. Si vous souhaitez découvrir à quel point il est simple d'utiliser l'IA à cette fin, il vous suffit de demander une démonstration ici.
Le code généré par l'IA est souvent truffé d'erreurs d'accessibilité
Prenons un exemple concret de code entièrement généré par l'IA. Le code ci-dessous figurait dans un article de blog récent consacré à l'utilisation de l'IA pour convertir des designs Figma en code React.
import React from 'react';
import './index.css';
export default function Main() {
return (
<div className='main-container'>
<div className='header'>
<button className='cart-button'>
<span className='basket'>Basket (3)</span>
</button>
<span className='world-peas'>World Peas</span>
<span className='shop'>Shop</span>
<span className='newstand'>Newstand</span>
<span className='who-we-are'>Who we are</span>
<span className='my-profile'>My profile</span>
</div>
<div className='we-are-farmers'>
<span className='comma'>We're </span>
<span className='purveyors'>farmers</span>
<span className='comma-1'>, </span>
<span className='purveyors-2'>purveyors</span>
<span className='comma-3'>, and </span>
<span className='purveyors-4'>eaters</span>
<span className='of-organically-grown-food'>
of organically grown food.
</span>
</div>
</div>
);
}
Ce code présente de nombreux problèmes d'accessibilité, notamment :
- absence de structure claire des titres
- overuse of <span> tags
- no clear navigation or landmarks like <header>, <nav>, and <main>
- les liens considérés comme du texte brut sur lesquels le curseur ne peut pas se positionner
- un bouton « Panier » sans nom accessible ni sémantique appropriée pour le nombre d'articles
- hero text broken into multiple spans instead of a meaningful <h1>
Ces problèmes rendent la page inutilisable pour les lecteurs d'écran et les utilisateurs du clavier. C'est préjudiciable pour vos clients et cela pourrait coûter très cher à votre entreprise, tant sur le plan juridique et financier qu'en termes de réputation. (Pour en savoir plus à ce sujet, veuillez consulter l'article «Accessibilité numérique et coût de l'exclusion ».)
En tant que développeurs, nous avons besoin d'un moyen de valider le code généré par l'IA et de le déployer de manière responsable. Si l'IA doit nous aider à générer du code rapidement, nos contrôles d'accessibilité doivent eux aussi s'appuyer sur l'IA, afin que nous puissions suivre le rythme.
Vibe Fixing offre aux débutants en matière d'accessibilité les outils nécessaires pour créer des produits de qualité
Nous avons vu que certains flux de travail d’IA ne produisent pas de résultats accessibles, et nous avons établi pourquoi les tests d’accessibilité sont essentiels si nous voulons que nos applications fonctionnent pour les personnes qui dépendent de technologies d’assistance. Ce dont nous avons désormais besoin, c’est d’une solution qui s’intègre parfaitement aux flux de travail existants. De nombreux développeurs qui expérimentent le « vibe coding » utilisent déjà des serveurs MCP (Model Context Protocol) pour s’intégrer directement à leur flux de travail d’IA, et nous pouvons l’utiliser de la même manière pour la correction « vibe ».
Avec l’outil « axe MCP Server » de Deque, vos tests d’accessibilité bénéficient du même « coup de pouce » que l’IA apporte à votre codage. axe MCP Server analyse votre projet, signale les problèmes d’accessibilité et propose des corrections directement dans votre IDE. Comme il utilise le protocole MCP, il s’intègre directement à tous les agents que vous êtes susceptible d’utiliser, tels que Windsurf, Cursor ou Copilot. Vous pouvez ainsi simplement demander à Copilot de tester votre application et avoir l’assurance que vous livrez un code accessible dès sa conception.
La correction de l'ambiance en action
La configuration de Vibe au sein d'un workflow MCP est relativement simple. Dans mon propre workflow, j'ai connecté le serveur MCP d'axe à VS Code et j'ai ouvert Copilot en mode « agent ». À partir de là, il m'a suffi de saisir une requête en langage naturel, comme ceci :
[code]
#analyser http://localhost:3033/example-page pour détecter les problèmes d'accessibilité,
#corriger les éventuelles non-conformités, puis effectuer une nouvelle analyse pour vérifier que les corrections ont bien été apportées
[/code]
En quelques secondes, Copilot fait appel à l’outil d’analyse « axe MCP Server », qui effectue un scan complet de l’accessibilité dans un navigateur à l’aide de l’extension « axe DevTools », puis renvoie une liste de problèmes. Il utilise ensuite l’outil de correction pour fournir des conseils de correction ciblés et de niveau expert (des recommandations de code concrètes) que je peux accepter ou modifier directement dans mon éditeur. Il peut ensuite relancer le scan pour vérifier que tout a bien été résolu, et ainsi boucler la boucle des tests d’accessibilité.
J'ai l'habitude de jongler entre plusieurs écrans et de tester des pages en local avec Chrome DevTools, mais le fait de pouvoir effectuer ces tests directement dans l'IDE, avec des corrections bienvenues, a constitué un changement très appréciable. J'utilise Copilot depuis un certain temps déjà, et grâce à son intégration « plug-and-play », j'ai l'impression qu'il s'agit d'une extension naturelle de mon flux de travail.
Utilisez l'IA non seulement pour écrire du code rapidement, mais aussi pour qu'il soit accessible
Utilisée à bon escient, l'IA peut nous rendre tous plus efficaces, en nous dotant de « superpouvoirs » dont nous ne disposions pas auparavant et en nous faisant gagner un temps considérable en se chargeant pour nous des tâches les plus routinières de notre travail.
Cependant, ce n'est pas parce que l'IA est là pour rester qu'il faut l'adopter sans réserve : nous devons faire preuve de discernement lorsque nous l'utilisons.
Nous venons de voir un exemple illustrant comment tirer parti de l'IA pour améliorer la couverture de l'accessibilité dans nos projets, mais nous venons également de constater ce qui se passe lorsque le code n'est pas validé avant sa mise en production.
En combinant le « vibe coding » et le « vibe fixing », nous pouvons garantir l'accessibilité à la vitesse de l'IA.
Vous souhaitez en savoir plus ? Demandez une démonstration dès aujourd'hui et découvrez comment le serveur MCP d'axe s'intègre à vos workflows d'IA existants et vous permet d'accélérer la création d'expériences accessibles.
