Étiquettes de texte
Pour un utilisateur qui possède une vision normale, les sorties texte fournissent la majorité de l'information et de retour dans la plupart des applications. Pour un utilisateur à la vue déficiente, qui n'est peut-être pas capable de voir et comprendre toute sortie graphique supplémentaire, une sortie textuelle claire est un point critique. Vous devez par conséquent choisir et placer le texte soigneusement à l'écran et laisser le choix de la police et de sa taille à l'utilisateur pour s'assurer que tous les utilisateurs sont capables d'utiliser l'application efficacement.
- VIII.III.I. Espacement et alignement
- VIII.III.II. Usage des majuscules
VIII.III.I. Espacement et alignement
Utilisez des espacements et alignements de texte uniformes dans toute l'application. Comme règle de base, laissez de l'espace entre les composants de l'interface utilisateur par incréments croissants de 6 pixels lorsque la relation entre les éléments reliés devient plus distante.
Élément | Positionnement | Exemple |
---|---|---|
Grandes icônes (navigateur de fichiers) | Centré horizontalement et 6 pixels au dessous des grandes icônes |
![]() |
Petites icônes (barre d'outils) | Centré verticalement et 6 pixels à droite des petites icônes |
![]() |
Étiquette de contrôle liste | 6 pixels au-dessus et aligné à gauche horizontalement avec le contrôle liste ou 12 pixels sur la gauche et aligné en haut horizontalement avec le contrôle liste |
![]() |
Étiquettes de case à cocher et bouton radio | 6 pixels à droite et centré verticalement avec le bouton radio |
![]() |
Étiquettes de champ texte | 6 pixels à gauche et centré verticalement avec le contrôle de champ de texte |
![]() |
Étiquettes de bouton | 12 pixels de remplissage de chaque côté du texte centré (et de tout graphique accompagnant). S'il apparaît dans un groupe de boutons, l'étiquette du bouton la plus longue définit la taille des boutons, centrez toutes les étiquettes des autres boutons et des graphiques accompagnant dans des boutons de même taille. |
![]() |
Autres étiquettes de composant (par ex. zones de sélection numérique, champs texte) | 12 pixels entre la plus longue étiquette de texte et son composant associé, toutes les autres étiquettes de texte dans le groupement du composant sont alignées à gauche avec l'étiquette la plus longue. Toutes les étiquettes sont centrées verticalement par rapport à leur composant associé |
![]() |
- Si l'étiquette précède le contrôle qu'elle nomme, terminez l'étiquette par deux-points. Par exemple, Courriel : pour nommer un champ de texte dans lequel l'utilisateur doit saisir son adresse électronique. Cela aide à l'identifier comme étant l'étiquette du contrôle au lieu que ce soit un élément indépendant. Certains utilitaires de consultation d'écran pour technologies d'assistance peuvent également utiliser la présence des deux-points pour identifier du texte en tant qu'étiquette de contrôle.
- Assurez-vous qu'une étiquette avec mnémonique est associée aux contrôles qu'elle nomme.
- Alignez à gauche les composants et les étiquettes à moins que toutes les étiquettes dans un groupe aient des longueurs très différentes. Dans ce cas, alignez plutôt à droite les étiquettes pour être sûr qu'aucun contrôle ne finisse par être trop éloigné de l'étiquette correspondante.
- Choisissez les noms des étiquettes avec soin. Donnez aux objets, même pris hors contexte, un nom porteur de sens. Les utilisateurs qui utilisent des lecteurs d'écran ou d'autres technologies d'assistance ne sont pas toujours capables de comprendre immédiatement la relation entre un contrôle et son environnement.
- Soyez cohérent avec l'usage des étiquettes ou leur sémantique. Par exemple, si vous utilisez la même étiquette dans différentes fenêtres, cela aidera si le même sens est utilisé dans les deux cas. De même n'utilisez pas d'étiquettes qui s'épèlent différemment mais se prononcent de la même manière, par ex. « dans » et « dent » ; cela pourrait être source de confusion pour les utilisateurs faisant usage de lecteurs d'écran.
- N'utilisez pas la même étiquette plus d'une fois dans une même fenêtre. Des outils comme les loupes ou les lecteurs d'écran ne permettant pas toujours d'informer l'utilisateur du contexte environnant, vous ne faciliteriez pas la tâche de ceux qui en font usage.
- Ne codez pas de manière permanente les styles et tailles des polices de caractères. L'utilisateur doit être capable d'adapter toutes les tailles et tous les styles.
- N'utilisez pas plus de deux ou trois polices de style et tailles différentes dans l'application ; choisissez-les visuellement différentes plutôt que d'aspect similaire dans une même fenêtre. Une profusion de tailles et de styles de police donne l'impression d'une interface encombrée et non-professionnelle ; elle est plus difficile à lire. En général, utilisez toujours des polices du thème actuel et indiquez des tailles relatives plutôt absolues.
- N'utilisez pas de toiles de fond graphiques ou de « filigranes » derrière du texte, autres que ceux définis par le thème choisi par l'utilisateur. Le fond influence le contraste entre texte et arrière-plan. Il peut en résulter des difficultés pour les utilisateurs qui ont des problèmes de vision et qui, par conséquent, habituellement choisissent toujours des thèmes avec des toiles de fond unies.
VIII.III.II. Usage des majuscules
Two styles of capitalization are used in GNOME user interface elements:
- Header capitalization
-
Capitalize all words in the element, with the following exceptions:
- Articles: a, an, the.
- Conjunctions: and, but, for, not, so, yet ...
- Prepositions of three or fewer letters: at, for, by, in, to ...
- Sentence capitalization
-
Capitalize the first letter of the first word, and any other words normally capitalized in sentences, such as application names.
Le tableau suivant indique le style de mise en majuscule à utiliser pour chaque type d'élément de l'interface utilisateur.
Élément | Style |
---|---|
Étiquettes de case à cocher | Phrase |
Étiquettes de bouton de commande | En-tête |
Étiquettes d'en-tête de colonne | En-tête |
Étiquettes d'objet d'arrière-plan du bureau | En-tête |
Messages de boîte de dialogue | Phrase |
Étiquettes de zone de liste déroulante modifiable | Phrase |
Étiquettes de boîte de liste déroulante | Phrase |
Étiquettes de champ | Phrase |
Noms de fichier | Phrase |
Textes de remplacement de graphique : par exemple, texte « Alt » sur les pages Web | Phrase |
Étiquettes de cadre ou de boîte de groupement | En-tête |
Éléments dans les zones de liste déroulante modifiable, les boîtes de liste déroulante et les boîtes de liste | Phrase |
Étiquettes de boîte de liste | Phrase |
Éléments de menu | En-tête |
Éléments de menu dans les applications | En-tête |
Intitulés de menus des applications | En-tête |
Étiquettes de bouton radio | Phrase |
Étiquettes de glissière | Phrase |
Étiquettes de zone de sélection numérique | Phrase |
Titres de section d'onglet | En-tête |
Étiquettes de boîte de texte | Phrase |
Étiquettes de barre de titre | En-tête |
Étiquettes de bouton de barre d'outils | En-tête |
Infobulles | Phrase |
Titres de page Web et éléments de navigation | En-tête |
Les langues autres que l'anglais peuvent utiliser des règles différentes pour l'usage des majuscules. Par exemple, le suédois n'a pas le concept d'usage de majuscules dans les titres. Contactez le Projet traduction de GNOME si vous avez un doute sur la manière de mettre en majuscules dans une langue donnée.