-
Notifications
You must be signed in to change notification settings - Fork 6
Introduce a no-empty-alt-text rule
#85
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
Changes from 1 commit
0533b65
1a5e09e
0f707f9
8cf33cc
488fbb4
111d3ac
012612f
09d02ff
ec36605
88e1852
e725906
5b17abf
ff25a34
9d75081
00fc5dd
0ba6e3c
8f80d4d
f2d9774
6bf95bb
f11f800
c60b8a7
0927174
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # GH003 No empty string alt | ||
|
|
||
| ## Rule details | ||
|
|
||
| This rule is _off_ by default and is only applicable for GitHub rendered markdown. | ||
|
|
||
| Currently, all images on github.com are automatically wrapped in an anchor tag. | ||
|
|
||
| As a result, images that are intentionally marked as decorative (via `alt=""``) end up as a link without an accessible name. This is confusing for assistive technology users. | ||
|
|
||
| This rule can be enabled to enforce that the alt attribute is always set to descriptive text. | ||
|
|
||
| This rule should be removed once this behavior is updated on GitHub's UI. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Incorrect 👎 | ||
|
|
||
| ```md | ||
|  | ||
| ``` | ||
|
|
||
| ```html | ||
| <img src="cat.png" alt=""> | ||
| ``` | ||
|
|
||
| ### Correct 👍 | ||
|
|
||
| ```md | ||
|  | ||
| ``` | ||
|
|
||
| ```html | ||
| <img src="mona.png" alt="Mona Lisa, the Octocat"> | ||
| ``` | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| const noEmptyStringAltRule = require("../src/rules/no-empty-string-alt"); | ||
| const runTest = require("./utils/run-test").runTest; | ||
|
|
||
| describe("GH003: No Empty String Alt", () => { | ||
| describe("successes", () => { | ||
| test("inline", async () => { | ||
| const strings = [ | ||
| "", | ||
| ]; | ||
|
|
||
| const results = await runTest(strings, noEmptyStringAltRule); | ||
|
|
||
| for (const result of results) { | ||
| expect(result).not.toBeDefined(); | ||
| } | ||
| }); | ||
| test("html image", async () => { | ||
| const strings = [ | ||
| '<img alt="A helpful description" src="https://user-images.githubusercontent.com/abcdef.png">', | ||
| ]; | ||
|
|
||
| const results = await runTest(strings, noEmptyStringAltRule); | ||
|
|
||
| for (const result of results) { | ||
| expect(result).not.toBeDefined(); | ||
| } | ||
| }); | ||
| }); | ||
| describe("failures", () => { | ||
|
||
| test("markdown example", async () => { | ||
| const strings = [ | ||
| "", | ||
| '', | ||
| ]; | ||
|
|
||
| const results = await runTest(strings, noEmptyStringAltRule); | ||
|
|
||
| const failedRules = results | ||
| .map((result) => result.ruleNames) | ||
| .flat() | ||
| .filter((name) => !name.includes("GH")); | ||
|
|
||
| expect(failedRules).toHaveLength(2); | ||
| for (const rule of failedRules) { | ||
| expect(rule).toBe("no-empty-string-alt"); | ||
| } | ||
| }); | ||
|
|
||
| test("HTML example", async () => { | ||
| const strings = [ | ||
| '<img alt="" src="https://user-images.githubusercontent.com/abcdef.png">', | ||
| "<img alt='' src='https://user-images.githubusercontent.com/abcdef.png'>", | ||
| ]; | ||
|
|
||
| const results = await runTest(strings, noEmptyStringAltRule); | ||
|
|
||
| const failedRules = results | ||
| .map((result) => result.ruleNames) | ||
| .flat() | ||
| .filter((name) => !name.includes("GH")); | ||
|
|
||
| expect(failedRules).toHaveLength(2); | ||
| for (const rule of failedRules) { | ||
| expect(rule).toBe("no-empty-string-alt"); | ||
| } | ||
| }); | ||
|
|
||
| test("error message", async () => { | ||
| const strings = [ | ||
| "", | ||
| '<img alt="" src="https://user-images.githubusercontent.com/abcdef.png">', | ||
| ]; | ||
|
|
||
| const results = await runTest(strings, noEmptyStringAltRule); | ||
|
|
||
| expect(results[0].ruleDescription).toMatch( | ||
| "Please provide an alternative text for the image.", | ||
| ); | ||
| expect(results[1].ruleDescription).toMatch( | ||
| "Please provide an alternative text for the image.", | ||
| ); | ||
| }); | ||
| }); | ||
| }); | ||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about this example. The alt text in the Markdown form is never quoted like an HTML property, so this would result in an image tag like
<img alt='""' src="cat.png" />. While an alt text of""is not useful, it's not empty either. The only way to create a truly empty alt tag in Markdown is with the HTML formalt="", so maybe we should only focus on HTML for this rule.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think a
useful-alt-textrule might be an interesting avenue to explore, where we ban things like "screenshot", "image", "example", '""', etc. But I think that's a separate rule from empty text.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah! You're right -- thank you for catching that! I'll stick with HTML for this rule!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The no-default-alt-text currently flags alternative text like,
image,Image,Screen Shot 2022-06-26 at 7 41 30 PMthough it's not comprehensive by any means. We could potentially expand on that?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I think we definitely could expand on that! It might be interesting to see if we can run a query to figure out what the most common alt texts are across GitHub -- I bet the top 20 or so are all things we'd probably want to lint against.