Skip to content

Introduce rule documentation #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Dec 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ However, others of these rules should **NOT** be disabled because they encourage

The following are custom rules defined in this plugin.

- **GH001** _no-default-alt-text_
- **GH002** _no-generic-link-text_
- [**GH001** _no-default-alt-text_](./docs/rules/GH001-no-default-alt-text.md)
- [**GH002** _no-generic-link-text_](./docs/rules/GH002-no-generic-link-text.md)

See [`markdownlint` rules](https://github.com/DavidAnson/markdownlint#rules--aliases) for documentation on rules pulled in from `markdownlint`.

Expand Down
38 changes: 38 additions & 0 deletions docs/rules/GH001-no-default-alt-text.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# GH001 No default alt text

## Rule details

Images should not use the macOS default screenshot filename as alternate text (alt text) which does not convey any meaningful information.

Alternative text should concisely describe what is conveyed in the image. If the image is decorative, the alternative text should be set to an empty string (`alt=""`).

Learn more at [Primer: Alternative text for images](https://primer.style/design/accessibility/alternative-text-for-images).

## Examples

### Incorrect 👎

```md
![Screen Shot 2022-06-26 at 7 41 30 PM](https://user-images.githubusercontent.com/abcdef.png)
```

```md
<img alt="Screen Shot 2022-06-26 at 7 41 30 PM" src="https://user-images.githubusercontent.com/abcdef.png">
```
Comment on lines +15 to +21
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like how you provided examples of both Markdown and HTML techniques!


### Correct 👍

```md
<!-- Mark decorative images with an empty string -->

![""](https://user-images.githubusercontent.com/abcdef.png)
```

```md
<img alt="A fluffy, orange kitten plays with a ball of yarn" src="https://user-images.githubusercontent.com/defgh.png">
```

```md
<img alt="A GitHub Discussion page with the heading structure visually surfaced with a text overlay" src="https://user-images.githubusercontent.com/xyz.png">
```

54 changes: 54 additions & 0 deletions docs/rules/GH002-no-generic-link-text.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# GH002 No generic link text

## Rule details

Avoid setting generic link text like, "Click here", "Read more", and "Learn more" which do not make sense when read out of context.

Screen reader users often tab through links on a page to quickly find content without needing to listen to the full page. When link text does not clearly describe the actual linked content, it becomes difficult to quickly identify whether it's worth following the link.

Ensure that your link text is descriptive and the purpose of the link is clear even when read without the context provided by surrounding text.

Learn more about how to write descriptive link text at [Access Guide: Write descriptive link text](https://www.accessguide.io/guide/descriptive-link-text).

**Note**: For now, this rule only flags inline markdown implementation of links given the complexities of determining the accessible name of an HTML anchor tag,

## Configuration

You can configure additional link texts to flag by setting the rule configuration like the following:

```.js
{
"no-generic-link-text": {
"additional_banned_texts": ["Something", "Go here"]
}
}
```
## Examples

### Incorrect 👎

```md
Go [here](https://github.com/)
```

```md
[Learn more](https://docs.github.com)
```

```md
[Click here](https://github.com/new) to create a new repository.
```

### Correct 👍

```md
[GitHub](https://github.com/)
```

```md
[GitHub Docs](https://docs.github.com)
```

```md
[Create a new repository](https://github.com/new)
```
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"scripts": {
"publish": "npm publish --access public --@github:registry=https://registry.npmjs.org",
"test": "npm run lint && jest",
"lint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!node_modules\" \"!test/example.md\" && eslint .",
"lint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!node_modules\" \"!docs/rules\" \"!test/example.md\" && eslint .",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am excluding our docs because I don't want it to flag our "incorrect' usecase rules. 😅

"lint:fix": "npm run lint -- --fix"
},
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/rules/no-default-alt-text.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
description:
"Images should not use the MacOS default screenshot filename as alternate text (alt text). If you have not changed this file, try merging main with your branch. For more information see: https://primer.style/design/accessibility/alternative-text-for-images",
information: new URL(
"https://primer.style/design/accessibility/alternative-text-for-images"
"https://github.com/github/markdownlint-github/blob/main/docs/rules/GH001-no-default-alt-text.md"
),
tags: ["accessibility", "images"],
function: function GH001(params, onError) {
Expand Down
2 changes: 1 addition & 1 deletion src/rules/no-generic-link-text.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ module.exports = {
description:
"Avoid using generic link text like `Learn more` or `Click here`",
information: new URL(
"https://primer.style/design/accessibility/links#writing-link-text"
"https://github.com/github/markdownlint-github/blob/main/docs/rules/GH002-no-generic-link-text.md"
),
tags: ["accessibility", "links"],
function: function GH002(params, onError) {
Expand Down