Skip to content

Commit 861d656

Browse files
jackdomleo7jackdomleo7
authored
Merge pull request #152 from alvaromontoro/feature/longdesc-feature
2 parents b4e10e5 + 358245e commit 861d656

10 files changed

Lines changed: 494 additions & 348 deletions

File tree

‎checka11y-errors.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,26 @@ img:not([alt]) {
302302
padding-bottom: 80px;
303303
}
304304

305+
img[longdesc$=".jpg" i], img[longdesc$=".jpeg" i], img[longdesc$=".png" i], img[longdesc$=".gif" i], img[longdesc$=".svg" i], img[longdesc$=".bmp" i], img[longdesc$=".tif" i], img[longdesc$=".tiff" i], img[longdesc$=".eps" i], img[longdesc$=".avif" i], img[longdesc$=".webp" i] {
306+
border: 0.4rem solid;
307+
border-color: var(--checka11y-border-error);
308+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0015): longdesc attribute cannot</text> <text x="15" y="60">point to an image.</text></g></svg>');
309+
background-position: bottom center;
310+
background-repeat: no-repeat;
311+
min-width: 450px;
312+
padding-bottom: 80px;
313+
}
314+
315+
img[longdesc*=" "], img[longdesc=""] {
316+
border: 0.4rem solid;
317+
border-color: var(--checka11y-border-error);
318+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0016): longdesc attribute should be</text> <text x="15" y="60">a valid URL instead of plain text.</text></g></svg>');
319+
background-position: bottom center;
320+
background-repeat: no-repeat;
321+
min-width: 450px;
322+
padding-bottom: 80px;
323+
}
324+
305325
a audio[controls] {
306326
border: 0.4rem solid;
307327
border-color: var(--checka11y-border-error);

‎checka11y-warnings.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,16 @@ img[alt^="logo for" i], img[alt^="logo of" i], img[alt^="image of" i], img[alt^=
114114
padding-bottom: 80px;
115115
}
116116

117+
img[longdesc] {
118+
border: 0.4rem solid;
119+
border-color: var(--checka11y-border-warning);
120+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">WARNING (W0015): longdesc attribute is</text> <text x="15" y="60">deprecated and should be avoided.</text></g></svg>');
121+
background-position: bottom center;
122+
background-repeat: no-repeat;
123+
min-width: 450px;
124+
padding-bottom: 80px;
125+
}
126+
117127
[style*="!important"]::after {
118128
display: block;
119129
font-size: 1rem;

‎checka11y.css‎

Lines changed: 377 additions & 347 deletions
Large diffs are not rendered by default.

‎codes.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@ A list of every Checka11y.css error & warning code with details on what the issu
8787
- `<iframe>`
8888
- Any HTML element with `contentEditable`
8989

90+
- ### E0015
91+
The `longdesc` attribute has been detected in an `<img>` and it has an invalid value. The `longdesc` attribute must be a URL to a web page, but the detected `longdesc` is a link to an image which is an accessibility problem (because there won't be an image description.)
92+
93+
- ### E0016
94+
The `longdesc` attribute has been detected in an `<img>` and it has an invalid value. The `longdesc` attribute must be a URL to a web page, but the detected `longdesc` is empty or it contains blank spaces so it's not a valid URL.
95+
9096
## Warnings <small>(Wxxx)</small>
9197

9298
- ### W0000
@@ -133,3 +139,6 @@ A list of every Checka11y.css error & warning code with details on what the issu
133139

134140
- ### W0014
135141
The highlighted element `<a>` has been detected to have `href="https://youtube.com|https://youtu.be|https://spotify.com"`. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to sites non-accessible content because captioning is often missing or not well generated.
142+
143+
- ### W0015
144+
The `longdesc` attribute has been detected in an `<img>`. The `longdesc` attribute in images is deprecated and should not be used. It is not fully supported by HTML5, browsers, or screen readers. When present, it is commonly misused (it should point to an URL that is not an image).

‎cypress/integration/images_spec.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,41 @@ describe("<images>", () => {
4848
.should('have.css', 'border-color', WARNING_BORDER_COLOR)
4949
});
5050
});
51+
52+
it('should show an alert (warning or error) if images have a longdesc', () => {
53+
cy.get(`img[longdesc]`)
54+
.each(element => {
55+
cy.get(element)
56+
.should('have.css', 'border-color')
57+
});
58+
});
59+
60+
it('should show error if images have a longdesc linking to an image', () => {
61+
cy.get(`
62+
img[longdesc$=".png"i], img[longdesc$=".jpg"i], img[longdesc$=".jpeg"i],
63+
img[longdesc$=".gif"i], img[longdesc$=".svg"i], img[longdesc$=".bmp"i],
64+
img[longdesc$=".eps"i], img[longdesc$=".tif"i], img[longdesc$=".tiff"i],
65+
img[longdesc$=".webp"i], img[longdesc$=".avif"i]
66+
`)
67+
.each(element => {
68+
cy.get(element)
69+
.should('have.css', 'border-color', ERROR_BORDER_COLOR)
70+
});
71+
});
72+
73+
it('should show error if images have a longdesc with spaces (invalid URL, possible plain text)', () => {
74+
cy.get(`img[longdesc*=" "]`)
75+
.each(element => {
76+
cy.get(element)
77+
.should('have.css', 'border-color', ERROR_BORDER_COLOR)
78+
});
79+
});
80+
81+
it('should show error if images have an empty longdesc', () => {
82+
cy.get(`img[longdesc=""]`)
83+
.each(element => {
84+
cy.get(element)
85+
.should('have.css', 'border-color', ERROR_BORDER_COLOR)
86+
});
87+
});
5188
});

‎features.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
1919
- [E0012](./codes.md#E0012): Checks `<dt>` and `<dd>` are the **only** direct children of `<dl>`.
2020
- [E0013](./codes.md#E0013): Checks if `<nav>` exists more than once on a page, that each nav is correctly labelled.
2121
- [E0014](./codes.md#E0014): Checks for a tab index value of -1 on commonly tabbed to elements.
22+
- [E0015](./codes.md#E0015): Checks for an image with a `longdesc` pointing to an image.
23+
- [E0016](./codes.md#E0016): Checks for an image with an empty `longdesc`.
2224

2325
## Warnings
2426

@@ -37,3 +39,4 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
3739
- [W0012](./codes.md#W0012): Checks for heading element inside `<section>` element.
3840
- [W0013](./codes.md#W0013): Checks for anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document.
3941
- [W0014](./codes.md#W0014): Checks for anchor tags that contain a link to content site.
42+
- [W0015](./codes.md#W0014): Checks for images with the `longdesc` attribute.

‎src/checka11y.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
/*! Checka11y.css v2.0.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
2-
@use "./errors/checka11y-errors.scss";
32
@use "./warnings/checka11y-warnings.scss";
3+
@use "./errors/checka11y-errors.scss";

‎src/errors/features/_images.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,23 @@
44
img:not( [alt] ) {
55
@include vectorMessage(error, "E0008", 350, "All &lt;img&gt; must", "have alternative text.");
66
}
7+
8+
/* E0015: the longdesc attribute contains an invalid value */
9+
img[longdesc $= ".jpg" i],
10+
img[longdesc $= ".jpeg" i],
11+
img[longdesc $= ".png" i],
12+
img[longdesc $= ".gif" i],
13+
img[longdesc $= ".svg" i],
14+
img[longdesc $= ".bmp" i],
15+
img[longdesc $= ".tif" i],
16+
img[longdesc $= ".tiff" i],
17+
img[longdesc $= ".eps" i],
18+
img[longdesc $= ".avif" i],
19+
img[longdesc $= ".webp" i] {
20+
@include vectorMessage(error, "E0015", 450, "longdesc attribute cannot", "point to an image.");
21+
}
22+
23+
img[longdesc *= " "],
24+
img[longdesc = ""] {
25+
@include vectorMessage(error, "E0016", 450, "longdesc attribute should be", "a valid URL instead of plain text.");
26+
}

‎src/warnings/features/_images.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,9 @@ $suspiciousAltStart: "graphic of", "bullet", "image of", "logo of", "logo for";
2525
@extend %imageMeaningfulAlt;
2626
}
2727
}
28+
29+
/* W0015: longdesc attribute is deprecated */
30+
31+
img[longdesc] {
32+
@include vectorMessage(warning, "W0015", 450, "longdesc attribute is", "deprecated and should be avoided.");
33+
}

‎test/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ <h2>Images: All images should have a meaningful and descriptive alt attribute.</
5252
<img alt="image of an image" src="./assets/a11y.png" />
5353
<img alt="bullet 1" src="./assets/a11y.png" />
5454
</section>
55+
<section>
56+
<h2>Images: Should avoid longdesc attribute and it must be an URL.</h2>
57+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.test" />
58+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.jpg" />
59+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.png" />
60+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.gif" />
61+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.avif" />
62+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.svg" />
63+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="This longdesc is invalid because it should be an URL instead of plain text" />
64+
<img alt="accessibility icon" src="./assets/a11y.png" longdesc="" />
65+
</section>
5566
<section>
5667
<h2>iframe: iframe has title attribute</h2>
5768
<iframe src="https://checka11y.jackdomleo.dev" height="500" width="500"></iframe>

0 commit comments

Comments
 (0)