Skip to content

Commit

Permalink
Hack week 2025: fix "alt text length" warnings in get-started (#53888)
Browse files Browse the repository at this point in the history
  • Loading branch information
felicitymay authored Jan 14, 2025
1 parent 9f3e101 commit bd09666
Show file tree
Hide file tree
Showing 16 changed files with 48 additions and 48 deletions.
Binary file modified assets/images/help/repository/headings-toc.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions content/get-started/start-your-journey/hello-world.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ This diagram shows:

* The `main` branch
* A new branch called `feature`
* The journey that `feature` takes before it's merged into `main`
* The journey that `feature` takes through stages for "Commit changes," "Submit pull request," and "Discuss proposed changes" before it's merged into `main`

![Diagram of the two branches. The "feature" branch diverges from the "main" branch, goes through stages for "Commit changes," "Submit pull request," and "Discuss proposed changes," and is then merged back into main.](/assets/images/help/repository/branching.png)
![Diagram of the two branches. The "feature" branch diverges from the "main" branch and is then merged back into main.](/assets/images/help/repository/branching.png)

### Creating a branch

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ You can choose from [several different URLs](/get-started/getting-started-with-g

{% ifversion global-nav-update %}

![Screenshot of the main page of a repository. A green button, labeled "Code," is outlined in dark orange and expanded to show the HTTPS URL for the repository.](/assets/images/help/repository/remotes-url-global-nav-update.png)
![Screenshot of the main page of a repository. A green "Code" button is outlined in orange and expanded to show the HTTPS URL for the repository.](/assets/images/help/repository/remotes-url-global-nav-update.png)

{% else %}

![Screenshot of the main page of a repository. A green button, labeled "Code," is outlined in dark orange and expanded to show the HTTPS URL for the repository.](/assets/images/help/repository/remotes-url.png)
![Screenshot of the main page of a repository. A green "Code" button is outlined in orange and expanded to show the HTTPS URL for the repository.](/assets/images/help/repository/remotes-url.png)

{% endif %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ If you create a new clone of the repository, you won't lose any of your Git hist

1. At the top of your new repository on {% data variables.product.prodname_dotcom %}'s Quick Setup page, click {% octicon "copy" aria-label="Copy to clipboard" %} to copy the remote repository URL.

![Screenshot of the "Quick Setup" header in a repository. Next to the remote URL, an icon of two overlapping squares is highlighted with an orange outline.](/assets/images/help/repository/copy-remote-repository-url-quick-setup.png)
![Screenshot of the "Quick Setup" header in a repository. Next to the remote URL, an icon of two overlapping squares is outlined in orange.](/assets/images/help/repository/copy-remote-repository-url-quick-setup.png)

> [!TIP]
> For information on the difference between HTTPS and SSH URLs, see [AUTOTITLE](/get-started/getting-started-with-git/about-remote-repositories).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ redirect_from:

When you're reading an article on {% data variables.product.prodname_docs %} and find a link to another article, you can open a hover card to get more information about the article. The hover card provides basic information about the article, so you can determine whether it will be useful to you without leaving the article you're reading.

If you navigate {% data variables.product.prodname_docs %} with a mouse, the hover card is displayed when you hover the cursor over a link.
If you navigate {% data variables.product.prodname_docs %} with a mouse, the hover card is displayed when you hover the cursor over a link. The card shows the article's location, title, and introduction.

![Screenshot of part of an article on {% data variables.product.prodname_docs %}. A cursor hovers over a link to an article called "Create a repo," and a hover card displays the article's location, title, and introduction.](/assets/images/help/docs/hover-card.png)
![Screenshot of part of an article on {% data variables.product.prodname_docs %}. The cursor hovers over a link to an article and a hover card is shown.](/assets/images/help/docs/hover-card.png)

## Using hover cards with a keyboard

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ This community maintainer started a discussion to welcome the community, and to

This example shows a team post for the `octo-team` team.

![Example of team discussion.](/assets/images/help/projects/team-discussions-example.png)
![Screenshot of a team discussion that was created in a GitHub community repository.](/assets/images/help/projects/team-discussions-example.png)

The `octocat` team member posted a team discussion, informing the team of various things:
* A team member called Mona started remote game events.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ To create a heading, add one to six <kbd>#</kbd> symbols before your heading tex
### A third-level heading
```

![Screenshot of rendered GitHub Markdown showing sample h1, h2, and h3 headers, which descend in type size and visual weight to indicate descending hierarchy level.](/assets/images/help/writing/headings-rendered.png)
![Screenshot of rendered GitHub Markdown showing sample h1, h2, and h3 headers, which descend in type size and visual weight to show hierarchy level.](/assets/images/help/writing/headings-rendered.png)

When you use two or more headings, GitHub automatically generates a table of contents that you can access by clicking {% octicon "list-unordered" aria-label="The unordered list icon" %} within the file header. Each heading title is listed in the table of contents and you can click a title to navigate to the selected section.

![Screenshot of the README file in the GitHub Docs open source repository with the drop-down menu for the table of contents exposed. The table of contents icon is outlined in dark orange.](/assets/images/help/repository/headings-toc.png)
![Screenshot of a README file with the drop-down menu for the table of contents exposed. The table of contents icon is outlined in dark orange.](/assets/images/help/repository/headings-toc.png)

## Styling text

Expand All @@ -53,9 +53,9 @@ Text that is not a quote
> Text that is a quote
```

Quoted text is indented, with a different type color.
Quoted text is indented with a vertical line on the left and displayed using gray type.

![Screenshot of rendered GitHub Markdown showing sample quoted text. The quote is indented with a vertical line on the left, and its text is dark gray rather than black.](/assets/images/help/writing/quoted-text-rendered.png)
![Screenshot of rendered GitHub Markdown showing the difference between normal and quoted text.](/assets/images/help/writing/quoted-text-rendered.png)

> [!NOTE]
> When viewing a conversation, you can automatically quote text in a comment by highlighting the text, then typing <kbd>R</kbd>. You can quote an entire comment by clicking {% octicon "kebab-horizontal" aria-label="The horizontal kebab icon" %}, then **Quote reply**. For more information about keyboard shortcuts, see [AUTOTITLE](/get-started/accessibility/keyboard-shortcuts).
Expand All @@ -68,7 +68,7 @@ You can call out code or a command within a sentence with single backticks. The
Use `git status` to list all new or modified files that haven't yet been committed.
```

![Screenshot of rendered GitHub Markdown showing the appearance of characters surrounded by backticks. The words "git status" appear in a fixed-width typeface, highlighted in light gray.](/assets/images/help/writing/inline-code-rendered.png)
![Screenshot of rendered GitHub Markdown showing that characters surrounded by backticks are shown in a fixed-width typeface, highlighted in light gray.](/assets/images/help/writing/inline-code-rendered.png)

To format code or text into its own distinct block, use triple backticks.

Expand All @@ -81,7 +81,7 @@ git commit
```
````

![Screenshot of rendered GitHub Markdown showing a code block. The words "git status," "git add," and "git commit" appear in a fixed-width typeface, highlighted in light gray.](/assets/images/help/writing/code-block-rendered.png)
![Screenshot of rendered GitHub Markdown showing a simple code block without syntax highlighting.](/assets/images/help/writing/code-block-rendered.png)

For more information, see [AUTOTITLE](/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks).

Expand All @@ -95,7 +95,7 @@ In issues, pull requests, and discussions, you can call out colors within a sent
The background color is `#ffffff` for light mode and `#000000` for dark mode.
```

![Screenshot of rendered GitHub Markdown showing how HEX values within backticks create small circles of color. #ffffff shows a white circle, and #000000 shows a black circle.](/assets/images/help/writing/supported-color-models-rendered.png)
![Screenshot of rendered GitHub Markdown showing how HEX values within backticks create small circles of color, here white and then black.](/assets/images/help/writing/supported-color-models-rendered.png)

Here are the currently supported color models.

Expand Down Expand Up @@ -306,9 +306,9 @@ To create a nested list using the web editor on {% data variables.product.produc
> [!NOTE]
> In the web-based editor, you can indent or dedent one or more lines of text by first highlighting the desired lines and then using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> respectively.
![Screenshot of Markdown in {% data variables.product.prodname_vscode %} showing how indented bullets align vertically with the first letter of the text lines above them.](/assets/images/help/writing/nested-list-alignment.png)
![Screenshot of Markdown in {% data variables.product.prodname_vscode %} showing indentation of nested numbered lines and bullets.](/assets/images/help/writing/nested-list-alignment.png)

![Screenshot of rendered GitHub Markdown showing a numbered item followed by a bulleted item nested one level to the right, and another bulleted item nested yet further to the right.](/assets/images/help/writing/nested-list-example-1.png)
![Screenshot of rendered GitHub Markdown showing a numbered item followed by nested bullets at two different levels of nesting.](/assets/images/help/writing/nested-list-example-1.png)

To create a nested list in the comment editor on {% data variables.product.product_name %}, which doesn't use a monospaced font, you can look at the list item immediately above the nested list and count the number of characters that appear before the content of the item. Then type that number of space characters in front of the nested list item.

Expand All @@ -319,7 +319,7 @@ In this example, you could add a nested list item under the list item `100. Firs
- First nested list item
```

![Screenshot of rendered GitHub Markdown showing a list item prefaced by the number 100 followed by a bulleted item nested one level to the right.](/assets/images/help/writing/nested-list-example-3.png)
![Screenshot of rendered GitHub Markdown showing a numbered item prefaced by the number 100 followed by a bulleted item nested one level.](/assets/images/help/writing/nested-list-example-3.png)

You can create multiple levels of nested lists using the same method. For example, because the first nested list item has seven characters (`␣␣␣␣␣-␣`) before the nested list content `First nested list item`, you would need to indent the second nested list item by at least two more characters (nine spaces minimum).

Expand All @@ -329,7 +329,7 @@ You can create multiple levels of nested lists using the same method. For exampl
- Second nested list item
```

![Screenshot of rendered GitHub Markdown showing a list item prefaced by the number 100 followed by a bulleted item nested one level to the right, and another bulleted item nested yet further to the right.](/assets/images/help/writing/nested-list-example-2.png)
![Screenshot of rendered GitHub Markdown showing a numbered item prefaced by the number 100 followed by bullets at two different levels of nesting.](/assets/images/help/writing/nested-list-example-2.png)

For more examples, see the [GitHub Flavored Markdown Spec](https://github.github.com/gfm/#example-265).

Expand Down Expand Up @@ -458,7 +458,7 @@ You can tell {% data variables.product.product_name %} to ignore (or escape) Mar

`Let's rename \*our-new-project\* to \*our-old-project\*.`

![Screenshot of rendered GitHub Markdown showing how backslashes prevent the conversion of asterisks to italics. The text reads, "Let's rename our-new-project to our-old-project."](/assets/images/help/writing/escaped-character-rendered.png)
![Screenshot of rendered GitHub Markdown showing how backslashes prevent the conversion of asterisks to italics.](/assets/images/help/writing/escaped-character-rendered.png)

For more information on backslashes, see Daring Fireball's [Markdown Syntax](https://daringfireball.net/projects/markdown/syntax#backslash).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ If you add a task list to the body of an issue, the list has added functionality
* If a task requires further tracking or discussion, you can convert the task to an issue by hovering over the task and clicking {% octicon "issue-opened" aria-label="The issue opened icon" %} in the upper-right corner of the task. To add more details before creating the issue, you can use keyboard shortcuts to open the new issue form. For more information, see [AUTOTITLE](/get-started/accessibility/keyboard-shortcuts#issues-and-pull-requests).
* Any issues referenced in the task list will specify that they are tracked in the referencing issue.

![Screenshot of a {% data variables.product.prodname_dotcom %} issue showing a task list under the header "Features." Some items are checked as done, others unchecked as undone. Three list items link to other {% data variables.product.prodname_github_issues %}.](/assets/images/help/writing/task-list-rendered.png)
![Screenshot of an issue showing a task list under the header "Features." Three list items link to other issues.](/assets/images/help/writing/task-list-rendered.png)

{% endif %}

Expand All @@ -61,13 +61,13 @@ You can reorder tasks across different lists in the same comment, but you cannot

You can also convert tasks into issues. First, hover over one of the items in your task list and then click {% octicon "issue-opened" aria-label="Convert to issue" %}.

{% ifversion fpt or ghec %} ![Screenshot of a {% data variables.product.prodname_dotcom %} issue showing two tasks. The"Convert to issue" icon is highlighted with an orange outline.](/assets/images/help/writing/convert-task-lists-into-issues.png){% endif %}
{% ifversion fpt or ghec %} ![Screenshot of an issue showing two tasks. The "Convert to issue" icon is highlighted with an orange outline.](/assets/images/help/writing/convert-task-lists-into-issues.png){% endif %}

## Navigating tracked issues

Any issues that are referenced in a task list specify that they are tracked by the issue that contains the task list. To navigate to the tracking issue from the tracked issue, click on the tracking issue number in the **Tracked in** section next to the issue status.
Any issues that are referenced in a task list specify that they are tracked by the issue that contains the task list. To navigate to the tracking issue from the tracked issue, click on the tracking issue number in the **Tracked by** section next to the issue status.

![Screenshot of a {% data variables.product.prodname_dotcom %} issue named "Create relationships between issues" and numbered issue 3. A button below the issue title reading "Tracked by issue #2" is outlined in dark orange.](/assets/images/help/writing/task-list-tracked.png)
![Screenshot of issue 3 showing the issue status of "Open" and the text "Tracked by issue #2", which is outlined in orange.](/assets/images/help/writing/task-list-tracked.png)

{% endif %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ shortTitle: Auto linked references

`Visit https://github.com`

![Screenshot of rendered {% data variables.product.prodname_dotcom %} Markdown showing how a URL beginning with "http" becomes as a blue clickable link. The text reads, "Visit https://github.com."](/assets/images/help/writing/url-autolink-rendered.png)
![Screenshot of rendered {% data variables.product.github %} Markdown showing how a URL is displayed as a blue clickable link, "Visit https://github.com."](/assets/images/help/writing/url-autolink-rendered.png)

For more information on creating links, see [AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#links).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function test() {
```
````

![Screenshot of rendered {% data variables.product.prodname_dotcom %} Markdown showing how triple backticks render code blocks in raw formatting. The block begins with "function test() {."](/assets/images/help/writing/fenced-code-block-rendered.png)
![Screenshot of rendered {% data variables.product.github %} Markdown showing the use of triple backticks to create code blocks. The block begins with "function test() {."](/assets/images/help/writing/fenced-code-block-rendered.png)

> [!TIP]
> To preserve your formatting within a list, make sure to indent non-fenced code blocks by eight spaces.
Expand All @@ -40,7 +40,7 @@ Look! You can see my backticks.
````
`````

![Screenshot of rendered {% data variables.product.prodname_dotcom %} Markdown showing how quadruple backticks cause triple backticks surrounding a code block to remain visible. The block reads, "Look! You can see my backticks."](/assets/images/help/writing/fenced-code-show-backticks-rendered.png)
![Screenshot of rendered Markdown showing that when you write triple backticks between quadruple backticks they are visible in the rendered content.](/assets/images/help/writing/fenced-code-show-backticks-rendered.png)

{% data reusables.user-settings.enabling-fixed-width-fonts %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ For example, you can create a TopoJSON map by specifying coordinates and shapes.
```
````

![Screenshot of a rendered TopoJSON map of parts of Indonesia, Singapore, and Malaysia with a blue point, a purple rectangular overlay, and blue zigzag lines.](/assets/images/help/writing/fenced-topojson-rendered-map.png)
![Screenshot of a rendered TopoJSON map of Indonesia, Singapore, and Malaysia with a blue point, a purple rectangular overlay, and blue zigzag lines.](/assets/images/help/writing/fenced-topojson-rendered-map.png)

For more information on working with `.geojson` and `.topojson` files, see [AUTOTITLE](/repositories/working-with-files/using-files/working-with-non-code-files#mapping-geojson-files-on-github).

Expand Down Expand Up @@ -179,6 +179,6 @@ endsolid
```
````

![Screenshot of a 3D model of a blue pyramid atop a grid of black lines on a white ground. Options to select "Wireframe", "Surface Angle", or "Solid" appear at bottom.](/assets/images/help/writing/fenced-stl-rendered-object.png)
![Screenshot of a 3D model of a blue pyramid on a grid of black lines. Options "Wireframe", "Surface Angle", or "Solid" appear at bottom.](/assets/images/help/writing/fenced-stl-rendered-object.png)

For more information on working with `.stl` files, see [AUTOTITLE](/repositories/working-with-files/using-files/working-with-non-code-files#3d-file-viewer).
Loading

0 comments on commit bd09666

Please sign in to comment.