Accessibilité en Go : rendre les logiciels accessibles à tous

Quand le code dit : « Je t'entends »

Imaginez que vous perdiez la vue pour un jour. Votre messagerie préférée en Go devient soudainement muette. Les boutons ne sont pas vocalisés, les formulaires ne se remplissent pas, et les erreurs de validation ne sont que des rectangles rouges. Désagréable, n'est-ce pas ? Pourtant, pour des millions de personnes handicapées, ce n'est pas une expérience, mais une réalité.

L'accessibilité (ou a11y — de « a » + 11 lettres + « y ») n'est pas une simple case à cocher. Il s'agit de faire en sorte que votre service Go n'éteigne pas la lumière pour 15 % de la population mondiale. Dans cet article, nous allons voir comment intégrer l'accessibilité dans les projets Go sans fanatisme, mais avec un réel bénéfice. C'est parti !

Pourquoi l'accessibilité en Go n'est pas une option, mais une norme

Go est un langage pour le backend, mais cela ne signifie pas qu'il ne participe pas à la création d'une interface accessible. Si vous écrivez une API pour le frontend, générez du HTML côté serveur ou créez des utilitaires CLI — vous influencez déjà l'accessibilité. Mauvaise nouvelle : de nombreux développeurs Go pensent que « l'a11y est l'affaire des frontendistes ». Bonne nouvelle : vous pouvez corriger cela en une soirée.

Qu'est-ce que l'accessibilité web du point de vue de Go ?

L'accessibilité web (web accessibility) est la capacité d'un site ou d'une application à être utilisé par des personnes ayant différentes limitations : vision, audition, motricité, capacités cognitives. Dans le contexte de Go, cela signifie :

\n
• Un balisage HTML correct, généré par le serveur (par exemple via html/template) ;
\n
• Des attributs ARIA appropriés pour le contenu dynamique ;
\n
• Une navigation logique au clavier ;
\n
• Des messages d'erreur compréhensibles (pas « Erreur 500 », mais « Impossible d'enregistrer le fichier : espace insuffisant »).
\n

Et oui, Go est le langage idéal pour cela. Son typage strict et ses outils intégrés permettent de vérifier les modèles à la volée. Mais procédons dans l'ordre.

Balisage sémantique : le fondement de l'accessibilité en Go

Lorsque vous générez du HTML via html/template, vous êtes l'architecte de l'interface. Si votre code crache un <div> pour chaque bouton, les lecteurs d'écran (screen readers) ne comprendront pas de quel élément il s'agit. Mais si vous utilisez <button>, ils diront : « Bouton. Cliquez pour envoyer le formulaire ».

Exemple : un formulaire accessible en Go

Supposons que vous écriviez un formulaire d'inscription. La mauvaise version :

// Mauvais : pas de sémantique\ntmpl := `<div class="form">\n    <div>Nom</div>\n    <input type="text" id="name">\n    <div class="error">{{.NameError}}</div>\n</div>`\n

La bonne version — avec <label> et aria-describedby :

// Bien : balisage sémantique + ARIA\ntmpl := `<form>\n    <label for="name">Nom</label>\n    <input type="text" id="name" aria-describedby="name-error">\n    <span id="name-error" role="alert">{{if .NameError}}{{.NameError}}{{end}}</span>\n</form>`\n

Qu'est-ce qui a changé ? Le lecteur d'écran sait maintenant : c'est un formulaire, le champ de saisie est lié à une étiquette, et l'erreur est une alerte. L'utilisateur entendra : « Nom. Modifier le texte. Erreur : champ obligatoire ».

Attributs ARIA : quand le HTML ne suffit pas

Parfois, les balises standard ne suffisent pas. Par exemple, vous créez des onglets (tabs) avec Go + HTMX. Sans ARIA, ils sonneront comme « lien, lien, lien... ». Mais avec ARIA, ils sonneront comme « Onglet 1, sélectionné. Onglet 2. Onglet 3 ».

Comment ajouter ARIA dans les modèles Go

Les attributs ARIA sont transmis comme des attributs normaux en HTML. Voici un exemple pour les onglets :

<div role="tablist" aria-label="Paramètres du profil">\n    <button role="tab" aria-selected="{{if eq .Tab "profile"}}true{{else}}false{{end}}" \n            aria-controls="panel-profile" id="tab-profile">Profil</button>\n    <button role="tab" aria-selected="{{if eq .Tab "security"}}true{{else}}false{{end}}" \n            aria-controls="panel-security" id="tab-security">Sécurité&