Création de captures d’écran

À propos des captures d’écran dans GitHub Docs

Il existe des avantages et des inconvénients à ajouter une capture d’écran. Les captures d’écran améliorent la lisibilité des articles et facilitent la compréhension des instructions, en particulier pour les personnes qui ont des difficultés à lire. Quand elles sont fournies avec du texte de remplacement, les captures d’écran permettent aux utilisateurs aveugles et malvoyants de collaborer avec des collègues voyants.

D’un autre côté, les captures d’écran privilégient les utilisateurs voyants, impactent le temps de chargement des articles, et augmentent le volume de contenu à conserver. Quand elles sont capturées avec des dimensions en pixels et des degrés de zoom différents de ceux utilisés par le lecteur, les images des captures d’écran peuvent prêter à confusion.

Nous ajoutons donc des captures d’écran à GitHub Docs uniquement quand elles répondent à nos critères d’inclusion.

Critères d’inclusion d’une capture d’écran

Utilisez une capture d’écran pour compléter les instructions textuelles quand un élément de l’interface utilisateur (IU) est difficile à trouver :

• L’élément est petit ou visuellement subtil.
• L’élément n’est pas immédiatement visible. Par exemple, l’élément est contenu dans un menu déroulant.
• L’interface propose plusieurs choix possibles qui peuvent prêter à confusion.

N’utilisez pas de captures d’écran pour les étapes de procédure où le texte seul est clair, ou pour afficher des commandes ou des sorties de code.

Exemples de critères d’inclusion

Pour déterminer plus facilement s’il est préférable d’ajouter une capture d’écran spécifique, examinez les exemples suivants de captures d’écran. Certains répondent à nos critères d’inclusion, et d’autres non.

Captures d’écran répondant aux critères

Les captures d’écran suivantes répondent à nos critères d’inclusion.

L’élément d’IU est petit ou visuellement subtil

Le bouton de modification de l’image d’aperçu de réseau social d’un dépôt est petit et visuellement discret. Il est parfois difficile à trouver parmi les autres paramètres du dépôt.

La capture d’écran fournit également une référence visuelle des proportions nécessaires.

L’élément d’IU n’est pas immédiatement visible

Les options de clonage d’un Gist sont contenues dans un menu déroulant intitulé « Incorporer ».

La capture d’écran permet de localiser l’option appropriée dans le menu, qui n’est pas visible tant que la liste déroulante n’est pas ouverte.

L’interface propose plusieurs choix qui peuvent prêter à confusion

Trois éléments peuvent être interprétés comme des « paramètres » dans la page principale d’un dépôt : l’onglet « Paramètres », l’icône d’engrenage dans la section « À propos » de la barre latérale droite et les paramètres de compte accessibles via la photo de profil.

La capture d’écran permet de trouver l’option appropriée.

Captures d’écran qui ne répondent pas aux critères

Les captures d’écran suivantes ne répondent pas à nos critères d’inclusion.

L’élément IU est facile à trouver

Le bouton « Créer un dépôt » est bien visible par sa taille, sa couleur et son emplacement. Il existe peu de choix possibles.

Les instructions textuelles sont suffisantes pour aider l’utilisateur à suivre l’étape.

L’IU propose peu de choix, lesquels sont relativement simples

Les options simples et directes, par exemple l’activation ou la désactivation d’une case à cocher, n’ont pas besoin d’un support visuel.

Les instructions textuelles sont suffisantes pour aider l’utilisateur à suivre l’étape.

L’ajout de la phrase de texte complète sous la case à cocher dans la capture d’écran a également deux implications sur l’accessibilité :

• La phrase est difficile à lire pour les utilisateurs malvoyants, car elle est petite et moins nette que du texte HTML.
• Une personne qui utilise un lecteur d’écran n’a pas accès aux informations, car elles dépassent les limites relatives au nombre de caractères du texte de remplacement. L’ajout de texte dans les instructions permet de résoudre le problème, mais donne un résultat inutilement verbeux.

Conditions relatives aux captures d’écran

En plus des critères d’inclusion, les captures d’écran doivent répondre aux impératifs suivants.

Spécifications techniques

• Format de fichier PNG
• Images statiques uniquement (pas de GIF)
• 144 ppp
• De 750 à 1 000 pixels de large pour les images pleine colonne
• Taille de fichier inférieure ou égale à 250 Ko
• Noms de fichiers descriptifs, par exemple gist-embed-link.png au lieu de right_side_page_03.png

Accessibilité

Pour répondre aux besoins d’un plus grand nombre d’utilisateurs, les captures d’écran doivent :

• Être accompagnées d’instructions complètes au cours de l’étape procédurale, sans qu’aucune information ne soit transmise entièrement sous forme visuelle.
• Offrir un contraste maximal, comme dans l’interface elle-même, sans obscurcissement ou réduction au niveau de l’opacité ou du contraste des couleurs.
• Comporter du texte de remplacement décrivant le contenu de l’image et l’apparence de sa mise en évidence, le cas échéant. Pour plus d’informations, consultez « Guide de style ».
• Être clair et net, avec du texte et des éléments d’IU aussi lisibles que possible.

Style de visuel

• Affichez un élément d’IU avec juste assez de contexte environnant pour aider les utilisateurs à savoir où trouver l’élément à l’écran.
• Réduisez l’espace négatif en redimensionnant la fenêtre de votre navigateur jusqu’à ce que le résultat soit optimal.
• Affichez les interfaces dans un thème clair dans la mesure du possible.
  • Pour GitHub, sélectionnez « Clair par défaut » dans les paramètres d’apparence. Pour plus d’informations, consultez « Gestion de vos paramètres de thème ».
  • Pour VS Code, sélectionnez « GitHub - Clair par défaut » dans l’extension gratuite Thème GitHub.
  • Si le logiciel dont vous devez effectuer une capture d’écran est disponible uniquement en mode sombre, vous pouvez utiliser le mode sombre.
• Si votre nom d’utilisateur et votre avatar s’affichent, remplacez-les par le nom d’utilisateur et l’avatar de @octocat. Utilisez les outils de développement de votre navigateur pour remplacer votre nom d’utilisateur par @octocat, et pour remplacer l’URL de votre avatar par https://avatars.githubusercontent.com/u/583231?v=4.
• N’incluez pas de curseur.

Style visuel des menus déroulants

Si l’objectif principal de l’affichage d’un menu déroulant est d’aider le lecteur à localiser le menu lui-même, affichez le menu fermé.

Si l’objectif principal de l’affichage d’un menu déroulant est d’aider le lecteur à distinguer les options du menu, affichez le menu ouvert. Capturez les menus ouverts sans focus (curseur ou état de survol). L’affichage des éléments de menu avec un arrière-plan blanc permet de garantir un contraste par rapport au contour orange foncé, le cas échéant.

Mise en évidence d’éléments dans les captures d’écran

Pour mettre en évidence un élément d’IU spécifique dans une capture d’écran, utilisez notre thème spécial pour Snagit afin d’appliquer un trait un contour contrasté à l’élément.

La couleur du trait est fg.severe, qui est la couleur utilisée dans le Système de conception Primer (HEX #BC4C00 ou RVB 188, 76, 0). Cet orange foncé présente un bon contraste de couleurs sur le blanc et le noir. Pour vérifier le contraste par rapport à d’autres couleurs d’arrière-plan, utilisez l’Analyseur de contraste des couleurs.

Importation du thème GitHub Docs dans Snagit

1. Pour télécharger le thème Snagit, accédez à snagit-theme-github-docs.snagtheme dans le dépôt github/docs, puis cliquez sur .

   

2. Ouvrez Snagit, puis sélectionnez l’outil Forme.

3. Sous « Styles rapides », sélectionnez Importer.

4. Sélectionnez le thème Snagit dans les fichiers de votre ordinateur. Cela entraîne l’installation des formes prédéfinies.

5. Le cas échéant, vous pouvez inclure le thème à vos favoris en cliquant sur l’étoile pour ajouter le rectangle orange foncé.

Ajout d’une mise en évidence à une capture d’écran

1. Ouvrez une capture d’écran dans Snagit.

2. Pour définir la profondeur (résolution) et la largeur en pixels, sous le canevas de l’image, ouvrez la boîte de dialogue « Redimensionner l’image ».

   • Profondeur en pixels : 144 dpi (équivaut à « x2 » sur Snagit pour Mac)
   • Largeur en pixels : 1 000 pixels au maximum

   Remarque : Sur Windows, vous devrez peut-être sélectionner Avancé pour changer la résolution. Vérifiez que l’option Utiliser le rééchantillonnage est désactivée.

3. Une fois le thème GitHub Docs ouvert dans la barre latérale Formes, sélectionnez le rectangle orange foncé.

4. Effectuez un glisser-déposer sur l’image pour créer un rectangle.

5. Ajustez la hauteur et la largeur du rectangle en faisant glisser les bords. N’ajustez pas l’arrondi d’angle, qui doit rester de 4 px. Ajustez l’espace entre l’élément d’IU et le contour pour qu’il corresponde à peu près à la largeur du contour lui-même.

6. Exportez l’image au format PNG.

Remplacement des captures d’écran

Quand vous remplacez une image existante, la bonne pratique consiste à conserver le nom de fichier de l’image.

Si vous devez changer un nom de fichier image, recherchez dans le dépôt d’autres références à cette image, puis mettez à jour toutes les références au nom de fichier d’origine.

Si l’image est utilisée dans les versions dépréciées de la documentation de GitHub Enterprise Server, ne changez pas le nom de fichier.

Versioning des images dans du contenu Markdown

Certaines images s’appliquent à tous les plans GitHub (GitHub Free, GitHub Pro, GitHub Team, GitHub Enterprise Cloud et GitHub Enterprise Server). Dans ce cas, aucun versioning n’est nécessaire.

Quand une image diffère d’un plan à l’autre, ou quand elle change dans une version plus récente de GitHub Enterprise Server, elle doit être versionnée avec des instructions conditionnelles Liquid. Vous devrez peut-être ajouter ce versioning au moment de la création du contenu, ou quand ce contenu fera l’objet d’une mise à jour des fonctionnalités ou d’une mise à jour vers une version de GitHub Enterprise Server.

Emplacements des images

Les images se trouvent dans le répertoire /assets/images. Ce répertoire comporte des sous-répertoires qui peuvent être utilisés pour organiser le contenu par plan et par numéro de version.

Répertoire	Utilisation
/assets/images	Images non spécifiques aux produits GitHub Enterprise.
/assets/images/enterprise/enterprise-server	Images applicables à toutes les versions de GitHub Enterprise Server (GHES), ou applicables à la version actuelle et aux versions futures.
/assets/images/enterprise/<release number>, par exemple /assets/images/enterprise/3.0/	En cas de changements apportés à une image dans une nouvelle version de GHES, ajoutez la nouvelle image à l’emplacement d’origine, puis déplacez l’ancienne image vers le répertoire correspondant à la dernière version à laquelle l’image s’applique.

Exemple : Une image diffère d’un plan à l’autre

Quand il existe des différences entre les plans, vous pouvez utiliser des instructions conditionnelles Liquid pour versionner les deux images.

{% ifversion fpt or ghec %}
![An image of foo bar for GitHub Free, GitHub Pro, GitHub Team, and GitHub Enterprise Cloud](/assets/images/foo/bar.png)
{% else %}
![An image of foo bar for GHES](/assets/images/enterprise/foo/bar.png)
{% endif %}

Exemple : Une image est mise à jour dans une nouvelle version de GitHub Enterprise Server

Si une image doit changer pour GitHub Enterprise Server 3.10, et si l’image mise à jour est utilisée pour toutes les versions futures de GitHub Enterprise Server, déplacez l’image existante vers /assets/images/enterprise/3.10, puis ajoutez la nouvelle image à l’emplacement d’origine, /assets/images/enterprise/foo/bar.png.

Votre bloc d’instructions conditionnelles Liquid ressemble à ceci :

{% ifversion fpt or ghec %}
![An image of foo bar](/assets/images/foo/bar.png)
{% elsif ghes < 3.10 %}
![An image of foo bar for GHES 3.9 and lower](/assets/images/enterprise/3.5/foo/bar.png)
{% else %}
![An image of foo bar for GHES 3.10+](/assets/images/enterprise/foo/bar.png)
{% endif %}

Quand la version 3.10 sera dépréciée, le répertoire /assets/images/enterprise/3.10 sera supprimé.

Le répertoire de versions numérotées doit contenir des images qui s’appliquent uniquement à ce numéro de version ou à ce numéro de version et aux versions antérieures. Par exemple, les images dans /assets/images/enterprise/2.22 doivent contenir des images qui s’appliquent à la version 2.22 uniquement, ou à la version 2.22 et aux versions antérieures.