Accessibilité web : les points à contrôler sur un site dédié à l’impression 3D

Un bouton représenté par une simple icône de corbeille peut sembler évident à l’écran. Sans nom accessible, il ne dit pourtant rien à une personne qui utilise un lecteur d’écran. Même constat pour un formulaire qui signale une erreur uniquement par une bordure rouge : l’information échappe à ceux qui ne perçoivent pas cette couleur. L’accessibilité web vise à supprimer ces obstacles dès la conception, pour que les contenus et fonctions restent utilisables avec des capacités, des équipements et des conditions de consultation variés.

Elle ne concerne pas uniquement le handicap permanent. On peut utiliser le clavier à la suite d’une blessure, consulter une fiche technique sur un écran mal éclairé, augmenter fortement la taille du texte, disposer d’une connexion lente ou dicter une recherche. Sur un site consacré à l’impression 3D, cela touche les comparatifs de machines, les tableaux de spécifications, les notices de sécurité et les formulaires de demande de devis.

Ce que recouvre réellement l’accessibilité

Les recommandations internationales les plus utilisées sont les WCAG, pour Web Content Accessibility Guidelines. Elles reposent sur quatre exigences : le contenu doit être perceptible, utilisable, compréhensible et compatible avec les navigateurs comme les technologies d’assistance. Il ne s’agit pas de règles de style graphique, mais de conditions que l’on peut contrôler.

• Perceptible : une information ne doit pas reposer sur un seul sens. Une image importante nécessite un équivalent textuel ; une vidéo parlée demande des sous-titres ou une transcription.
• Utilisable : les actions essentielles doivent pouvoir être réalisées sans souris, notamment au clavier.
• Compréhensible : les libellés, les messages d’erreur et la navigation doivent rester prévisibles.
• Compatible : le code doit transmettre correctement la structure et l’état des éléments aux navigateurs et aux technologies d’assistance.

Un audit sérieux ne se limite donc ni à une couleur ni à un score automatique. Il faut tester des tâches réelles : trouver une imprimante selon son volume d’impression, filtrer des filaments, comparer deux fiches techniques, télécharger une notice ou envoyer un message. Si l’une de ces actions devient impossible sans souris ou sans perception des couleurs, le défaut est bien fonctionnel.

Commencer par la structure sémantique

La base la plus efficace reste un HTML qui décrit le contenu avant de le mettre en forme. Le titre principal doit être un h1, les grandes sections des h2, puis les sous-sections des h3. Ces balises ne doivent pas être choisies pour leur taille visuelle, mais pour exprimer une hiérarchie. Un lecteur d’écran peut alors afficher ou parcourir la liste des titres, ce qui accélère nettement la lecture d’un long dossier technique.

Le même raisonnement vaut pour les listes, les tableaux et les boutons. Une série de caractéristiques homogènes appelle une liste ; des valeurs à comparer sur plusieurs lignes et colonnes appellent un tableau ; une action qui modifie la page doit reposer sur un vrai bouton, et non sur un lien mis en forme ou un div cliquable.

Tableaux de spécifications : précis, mais lisibles

Les comparatifs d’équipements 3D reposent souvent sur des tableaux : volume utile, diamètre de buse, précision annoncée, matériaux compatibles, alimentation ou dimensions. Dans un tableau accessible, les en-têtes de colonnes et de lignes sont clairement identifiés. Les cellules de données peuvent ainsi être rattachées au bon intitulé lors d’une lecture assistée.

Caractéristique	Modèle A	Modèle B
Volume d’impression	220 × 220 × 250 mm	300 × 300 × 400 mm
Température de buse	260 °C	300 °C
Caisson fermé	Non	Oui

Dans cet exemple, « Modèle A » et « Modèle B » doivent être de vrais en-têtes, et non de simples textes en gras. Évitez aussi les tableaux employés uniquement pour aligner des éléments côte à côte : sur mobile ou avec un lecteur d’écran, la lecture devient rapidement confuse. Pour les comparatifs très larges, prévoyez une version en cartes ou un défilement horizontal clairement signalé.

Images, schémas et visuels techniques

L’attribut alt fournit un texte de remplacement lorsqu’une image ne peut pas être vue. Sa pertinence dépend du rôle du visuel dans son contexte, pas de sa longueur. Une image décorative peut recevoir un attribut vide (alt="") afin de ne pas interrompre inutilement la lecture. Une image porteuse d’information doit, elle, être décrite.

Pour une vue générale d’une imprimante, « Imprimante FDM fermée avec porte frontale et écran tactile » peut suffire si ces éléments comptent dans le propos. En revanche, un schéma d’assemblage ou une courbe de résistance thermique ne peut pas toujours être remplacé par un simple alt. Il faut alors fournir, dans le texte voisin, dans une légende détaillée ou dans une section équivalente, les valeurs, les tendances et les limites d’interprétation.

Les infographies posent souvent problème : elles concentrent du texte minuscule, des pictogrammes et des codes couleur dans une seule image. Mieux vaut publier les données importantes en HTML et conserver l’infographie comme appui visuel. Cette solution facilite aussi la mise à jour d’une valeur sans devoir refaire tout le visuel.

Couleurs, contraste et informations non visuelles

La couleur peut renforcer une information, jamais la porter seule. Un comparateur qui présente les écarts de prix en vert et en rouge devrait aussi afficher des mots, des icônes accompagnées de texte ou des indications explicites comme « hausse » et « baisse ». Dans un configurateur de matériaux, « compatible » et « non compatible » doivent rester intelligibles en niveaux de gris.

Le contraste entre le texte et son arrière-plan détermine directement le confort de lecture, surtout sur un écran brillant ou avec de petites tailles de police. Pour le texte courant, le niveau généralement visé dans les WCAG est un rapport d’au moins 4,5:1 ; pour du texte de grande taille, 3:1 peut suffire. Les textes gris clair sur fond blanc, fréquents dans les interfaces minimalistes, ne passent souvent pas ce contrôle. Vérifiez aussi les états interactifs : lien survolé, bouton désactivé, message d’erreur et élément recevant le focus.

Ne pas confondre zoom et responsive

Un site accessible doit supporter l’agrandissement du texte et du navigateur sans masquer d’information ni rendre les contrôles inatteignables. À 200 % de zoom, un menu ne devrait pas recouvrir le contenu, un filtre ne devrait pas disparaître derrière une fenêtre modale et une colonne de prix ne devrait pas devenir illisible. Le responsive adapte une mise en page aux petits écrans ; il ne garantit pas, à lui seul, une bonne prise en charge du zoom.

La navigation au clavier comme test de terrain

Sans installer d’outil particulier, il est possible de repérer de nombreux défauts. Placez le curseur hors de la page, puis utilisez la touche Tab. À chaque pression, le focus doit passer sur un élément interactif identifiable. L’ordre doit rester cohérent : logo, navigation, recherche, contenu, puis actions secondaires. Shift+Tab doit permettre de revenir en arrière.

1. Vérifiez que le focus est visible, avec un contour suffisamment contrasté.
2. Ouvrez les menus, filtres, accordéons et fenêtres modales avec Entrée ou Espace.
3. Dans une fenêtre modale, contrôlez que le focus reste à l’intérieur jusqu’à sa fermeture.
4. Fermez les panneaux avec Échap lorsque cette action est attendue.
5. Testez l’envoi d’un formulaire et la correction des erreurs sans utiliser la souris.

Supprimer le contour de focus pour des raisons esthétiques est une erreur fréquente. Il vaut mieux le personnaliser, avec un liseré épais et contrasté, que le faire disparaître. Les composants JavaScript complexes — menus déroulants, sélecteurs de quantité, carrousels ou filtres à facettes — méritent une attention particulière : ils peuvent fonctionner correctement à la souris tout en restant inutilisables au clavier.

Formulaires : libellés, aides et erreurs exploitables

Chaque champ doit avoir un libellé explicite associé au contrôle. Un texte grisé utilisé comme exemple dans un champ, appelé placeholder, ne remplace pas un libellé : il disparaît souvent dès la saisie et son contraste peut être insuffisant. « Adresse e-mail professionnelle » est plus précis que « E-mail » lorsque cette information est réellement nécessaire.

Les contraintes importantes doivent être indiquées avant la validation : format accepté, unités attendues, taille maximale d’un fichier STL ou STEP, caractères autorisés dans un identifiant. Après envoi, un message tel que « Erreur dans le formulaire » ne suffit pas. Il doit désigner le champ concerné et expliquer la correction attendue : « Le numéro de téléphone doit comporter au moins dix chiffres ».

Un champ obligatoire ne devrait pas reposer sur un astérisque isolé. Si ce symbole est utilisé, sa signification doit être expliquée et communiquée aux technologies d’assistance. Les messages d’état qui apparaissent après une action, par exemple « fichier téléversé » ou « trois résultats trouvés », doivent être annoncés sans déplacer le focus de manière inattendue.

Contenus audio, vidéo et documents téléchargeables

Une démonstration de réglage d’extrudeur ou de nettoyage de bac à résine doit rester utile sans la piste audio. Les sous-titres donnent accès au contenu parlé et aux informations sonores importantes ; une transcription facilite la recherche et une consultation rapide. Si des gestes précis sont montrés sans explication orale, une audiodescription ou une procédure écrite détaillée devient nécessaire.

Les PDF demandent le même niveau d’attention que les pages web. Un document scanné sans couche de texte, un manuel sans titres balisés ou un tableau exporté sous forme d’image sera difficile à consulter avec un lecteur d’écran. Lorsqu’un document est indispensable, fournissez une version structurée, avec titres, ordre de lecture, signets et texte sélectionnable. Pour un contenu court, publier directement les instructions en HTML reste souvent la solution la plus fiable.

Automatisation, tests manuels et priorités de correction

Les outils d’analyse automatique aident à repérer les images sans alternative, les contrastes insuffisants, les niveaux de titres incohérents ou les champs sans nom. Ils ne peuvent toutefois pas juger si un texte alternatif restitue réellement l’information utile, si l’ordre de tabulation est logique ou si un libellé est compréhensible. Une évaluation fiable combine contrôle automatisé, navigation au clavier, essais avec lecteur d’écran et, lorsque cela est possible, retours d’utilisateurs concernés.

Pour définir les priorités, corrigez d’abord les obstacles qui empêchent une action essentielle : finaliser une demande, sélectionner un produit, se connecter, lire un prix ou comprendre une consigne de sécurité. Viennent ensuite les défauts qui ralentissent fortement le parcours, comme une hiérarchie de titres incohérente ou des descriptions d’images insuffisantes. Les ajustements esthétiques ne doivent pas retarder ces corrections fonctionnelles.

Une vérification rapide avant publication

• Le titre principal est unique et les niveaux de titres suivent une logique.
• Les liens indiquent leur destination sans dépendre de leur contexte visuel.
• Les boutons ont un nom d’action clair : « Ajouter au comparatif » plutôt que « Plus ».
• Les images informatives disposent d’un texte alternatif adapté ; les décorations sont ignorées.
• Les contrastes et le focus visible restent corrects dans tous les états.
• Les pages principales fonctionnent au clavier, y compris les filtres et les formulaires.
• Les tableaux présentent des en-têtes et les vidéos ont des sous-titres pertinents.

Sur une fiche de test d’imprimante 3D, terminez par un parcours complet au clavier : atteignez le sélecteur de variantes, ouvrez les détails techniques, ajoutez le modèle au comparatif, puis envoyez le formulaire de contact. Si le focus reste visible à chaque étape et que chaque contrôle annonce clairement sa fonction et son état, la page répond déjà à un niveau concret d’utilisabilité.