Concevoir Glean pour l'accessibilité – lecteurs d'écran, schémas de couleurs et plus encore

I'll review the translation against the original for meaning accuracy and HTML/link preservation. Checking key elements: - Links/hrefs: all preserved correctly - HTML structure: preserved - Glossary terms: "lecteur d'écran" (screen reader) consistent, "design responsive" acceptable Reviewing the final paragraph of EN (responsive design section) — the FR translation **omits** the entire "Widely adopting responsive design" (h2) section and its paragraph, plus the figure/figcaption for the color theme GIF. The FR ends abruptly at `

` with no closing content. This is a truncation, but the instruction says part 1/2 and the EN provided ends at the responsive design paragraph. The FR must cover all EN content shown. The FR is missing: 1. The figure contents (img + figcaption for color theme) 2. The "Widely adopting responsive design" section I'll provide the corrected French with the missing content restored.

Adopter largement le design responsive

Pour les clients souhaitant utiliser Glean sur leurs appareils mobiles, nous prenons également en charge l'application mobile Glean sur iOS et Android. Nous utilisons Capacitor pour afficher la vue web, qui reflète le site web dans une fenêtre d'affichage petite et étroite (du moins pour la plupart des appareils). Nous veillons à concevoir un menu et une interface de navigation adaptés aux mobiles, pour en faciliter l'utilisation et la réactivité. 

Adopter largement le design responsive

Pour les clients souhaitant utiliser Glean sur leurs appareils mobiles, nous prenons également en charge l'application mobile Glean sur iOS et Android. Nous utilisons Capacitor pour afficher la vue web, qui reproduit le site à une fenêtre d'affichage petite et étroite (du moins pour la plupart des appareils). Nous veillons à concevoir un menu et une interface de navigation adaptés aux mobiles, pour une facilité d'utilisation et une réactivité optimales. 

Sous un autre angle, utiliser un produit dans une fenêtre d'affichage plus petite revient à l'utiliser à un niveau de zoom plus élevé (c'est-à-dire en utilisant CMD + / - pour ajuster le niveau de zoom de votre navigateur). C'est important pour l'accessibilité, car de nombreux utilisateurs (sans une vue parfaite) peuvent avoir besoin de zoomer pour rendre le contenu, comme un petit texte, plus perceptible.

Par conséquent, nous adoptons le design responsive et nous nous efforçons de nous assurer que toute nouvelle fonctionnalité fonctionnerait bien dans de petites fenêtres et à des niveaux de zoom élevés. Cela offre une perte de fonctionnalité minimale quel que soit le zoom (la norme AA exige que les produits fonctionnent bien jusqu'à un niveau de zoom de 400 %).

Rendre la taille de police flexible

Comme mentionné ci-dessus, les clients sans une vue parfaite peuvent avoir besoin de zoomer ou d'utiliser un outil de grossissement pour consulter le web plus facilement, plus souvent sur les sites web comportant un petit texte. Pour respecter ce critère, une solution courante consiste à permettre à la police de votre site web de respecter la préférence du navigateur en utilisant rem. 

Rem représente la taille de police (racine) de la page, qui utilisera la taille de police par défaut (à partir de la préférence du navigateur). De plus, elle peut être ajustée manuellement en spécifiant la valeur de la police sur l'élément racine (c'est-à-dire l'élément <span class="text-rich-text-code" style="font-family: monospace;">&lt;html&gt;</span> ou en utilisant <span class="text-rich-text-code" style="font-family: monospace;">:root</span> en CSS). Une chose à garder à l'esprit lors de l'adoption de rem est de s'assurer que les conteneurs de texte n'ont pas une hauteur fixe en px, ou qu'ils devraient également utiliser rem. Cela permet au texte de ne pas déborder de sa région contenante lorsqu'il est agrandi.

Pour revenir à notre système de design « sémantique », nous pouvons définir de manière abstraite ces usages de police à un haut niveau et les partager entre les produits. Un exemple en LESS : au lieu d'utiliser <span class="text-rich-text-code" style="font-family: monospace;">font-size:16px</span>, nous utiliserions <span class="text-rich-text-code" style="font-family: monospace;">font-size:@mediumFont</span> et définirions <span class="text-rich-text-code" style="font-family: monospace;">@mediumFont:1rem</span>.

Rechercher des améliorations 

En matière d'accessibilité, en particulier pour les entreprises à un stade précoce, voici ce que nous aimerions vous laisser : 

• Des équipes plus réduites facilitent la communication. Alignez les personnes sur le même système de design le plus tôt possible pour garantir l'évolutivité
• Concevoir en pensant à l'accessibilité dès le départ est plus facile que de bricoler pour que cela fonctionne par la suite
• Un produit soigné et accessible n'est pas seulement esthétique : il se démarque véritablement lors des échanges avec des clients potentiels

Merci de nous avoir accompagnés ! Vous avez des questions ou des demandes en matière d'accessibilité ? Contactez-nous à a11y@glean.com – et consultez notre feuille de route publique sur l'accessibilité pour découvrir ce sur quoi nous travaillons activement afin d'offrir une meilleure recherche et découverte des connaissances à un plus grand nombre d'utilisateurs.