A quick pass at alt tags

I would love feedback on these, most of these could be a lot more descriptive.

content/components/detail.mdx

@@ -5,4 +5,4 @@ import Detail from '../../images/gh-issue-view.png'
 
 Single item views show more detail than list views. The body of the item is rendered indented. The item’s URL is shown at the bottom.
 
-<img src={Detail} alt="" />
+<img src={Detail} alt="An example of gh issue view" />

content/components/empty.mdx

@@ -6,4 +6,4 @@ import Empty from '../../images/Empty-states.png'
 
 Make sure to include empty messages in command outputs when appropriate.
 
-<img src={Empty} alt="" />
+<img src={Empty} alt="A collection of empty states from various command outputs" />

content/components/headers.mdx

@@ -6,4 +6,4 @@ import Header from '../../images/Headers.png'
 
 When viewing output that could be unclear, headers can quickly set context for what you’re seeing and where you are.
 
-<img src={Header} alt="" />
+<img src={Header} alt="A collection of header examples from various command outputs" />

content/components/help.mdx

@@ -22,4 +22,4 @@ Each help page has sections:
 - Feedback
 
 ### Example
-<img src={Help} alt="" />
+<img src={Help} alt="The output of gh help" />

content/components/progress.mdx

@@ -5,4 +5,4 @@ import Spinner from '../../images/Spinner.png'
 
 For processes that might take a while, include a progress indicator with context on what’s happening.
 
-<img src={Spinner} alt="" />
+<img src={Spinner} alt="An example of a loading spinner when forking a repository" />

content/components/prompts.mdx

@@ -18,25 +18,25 @@ Generally speaking, prompts are the CLI’s version of forms.
 ## Yes/No
 Use for yes/no questions, usually a confirmation. The default (what will happen if you enter nothing and hit enter) is in caps.
 
-<img src={PromptYesNo} alt="" />
+<img src={PromptYesNo} alt="An example of a yes/no prompt." />
 
 
 ## Short text
 Use to enter short strings of text. Enter will accept the auto fill if available
 
-<img src={PromptShortText} alt="" />
+<img src={PromptShortText} alt="An example of a short text prompt." />
 
 ## Long text
 Use to enter large bodies of text. E key will open the user’s preferred editor, and Enter will skip.
 
-<img src={PromptLongText} alt="" />
+<img src={PromptLongText} alt="An example of a long text prompt." />
 
 ## Radio select
 Use to select one option
 
-<img src={PromptRadio} alt="" />
+<img src={PromptRadio} alt="An example of a radio select prompt" />
 
 ## Multi select
 Use to select multiple options
 
-<img src={PromptMulti} alt="" />
+<img src={PromptMulti} alt="An example of a multi select prompt" />

content/components/state.mdx

@@ -5,4 +5,4 @@ import State from '../../images/States.png'
 
 The CLI reflects how GitHub.com displays state through color and iconography.
 
-<img src={State} alt="" />
+<img src={State} alt="A collection of examples of state from various command outputs" />

content/components/syntax.mdx

@@ -10,17 +10,17 @@ import SyntaxRepo from '../../images/Syntax-Repo.png'
 ## Branches
 Display branch names in brackets and/or cyan
 
-<img src={SyntaxBranch} alt="" />
+<img src={SyntaxBranch} alt="A branch name in brackets and cyan" />
 
 ## Labels
 Display labels in parenthesis and/or gray
 
-<img src={SyntaxLabel} alt="" />
+<img src={SyntaxLabel} alt="A label name in parenthesis and gray" />
 
 ## Repository
 Display repository names in bold where appropriate
 
-<img src={SyntaxRepo} alt="" />
+<img src={SyntaxRepo} alt="A repository name in bold" />
 
 
 ## Help

content/foundations/color.mdx

@@ -6,7 +6,7 @@ import Colors from '../../images/Colors.png'
 
 Terminals reliably recognize the 8 basic ANSI colors. There are also bright versions of each of these colors, which we can also use, but less reliably.
 
-<img src={Colors} alt="" />
+<img src={Colors} alt="A table describing the usage of the 8 basic colors." />
 
 
 

content/foundations/scriptability.mdx

@@ -14,13 +14,13 @@ Make choices that ensure that creating automations or scripts with GitHub comman
 
 ### In terminal
 
-<img src={GhPrList} alt="" />
+<img src={GhPrList} alt="An example of gh pr list" />
 
 ### Through pipe
 
-<img src={GhPrListMachine} alt="" />
+<img src={GhPrListMachine} alt="An example of gh pr list piped through the cat command" />
 
-### Differences to note in machine output:
+### Differences to note in machine output
 - No color or styling
 - State is explicitly written, not implied from color
 - Tabs between columns instead of table layout, since `cut` uses tabs as a delimiter

content/foundations/typography.mdx

@@ -6,7 +6,7 @@ import Typography from '../../images/Typography.png'
 
 Everything is a command line interface is text, so type hierarchy is important. All type is the same size and font, but you can still create type hierarchy using font weight and space.
 
-<img src={Typography} alt="" />
+<img src={Typography} alt="An example of normal weight, and bold weight. Italics is striked through since it's not used." />
 
 People customize their fonts, but you can assume it will be a monospace
 Monospace fonts inherently create visual order

content/getting-started/principles.mdx

@@ -61,11 +61,11 @@ Reducing cognitive load is necessary for  [making an accessible product](https:/
 ## Bias towards terminal, but make it easy to get to the browser
 We want to help people stay in the terminal wherever they might want to maintain focus and reduce context switching, but when it’s necessary to jump to GitHub.com make it obvious, fast, and easy. Certain actions are probably better to do in a visual interface.
 
-<img src={Principle401} alt="" />
+<img src={Principle401} alt="A prompt asking 'What's next?' with the choice 'Preview in browser' selected." />
 <Caption>A preview in browser step helps users create issues and pull requests more smoothly.</Caption>
 
-<img src={Principle402} alt="" />
+<img src={Principle402} alt="The gh pr create command with title and body flags outputting a pull request URL." />
 <Caption>Many commands output the relevant URL at the end.</Caption>
 
-<img src={Principle403} alt="" />
+<img src={Principle403} alt="The gh issue view command with the --web flag. The output is opening a URL in the browser." />
 <Caption>Web flags help users jump to the browser quickly</Caption>