Skip to content

Commit 72997f6

Browse files
webstackdevwebstackdev
committed
Make images in skills grid decorative, so link text is only accessible label
1 parent e1ac7e6 commit 72997f6

4 files changed

Lines changed: 305 additions & 32 deletions

File tree

‎axe-results-violations.json‎

Lines changed: 300 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,318 @@
11
[
22
{
3-
"id": "heading-order",
4-
"impact": "moderate",
3+
"id": "image-redundant-alt",
4+
"impact": "minor",
55
"tags": [
6-
"cat.semantics",
6+
"cat.text-alternatives",
77
"best-practice"
88
],
9-
"description": "Ensure the order of headings is semantically correct",
10-
"help": "Heading levels should only increase by one",
11-
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright",
9+
"description": "Ensure image alternative is not repeated as text",
10+
"help": "Alternative text of images should not be repeated as text",
11+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/image-redundant-alt?application=playwright",
1212
"nodes": [
1313
{
14-
"any": [
14+
"any": [],
15+
"all": [],
16+
"none": [
17+
{
18+
"id": "duplicate-img-label",
19+
"data": null,
20+
"relatedNodes": [],
21+
"impact": "minor",
22+
"message": "Element contains <img> element with alt text that duplicates existing text"
23+
}
24+
],
25+
"impact": "minor",
26+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Argo CD\" loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"32\" class=\"h-8 w-auto object-co...\">",
27+
"target": [
28+
"img[alt=\"Argo CD\"]"
29+
],
30+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
31+
},
32+
{
33+
"any": [],
34+
"all": [],
35+
"none": [
36+
{
37+
"id": "duplicate-img-label",
38+
"data": null,
39+
"relatedNodes": [],
40+
"impact": "minor",
41+
"message": "Element contains <img> element with alt text that duplicates existing text"
42+
}
43+
],
44+
"impact": "minor",
45+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"AWS\" loading=\"lazy\" decoding=\"async\" width=\"54\" height=\"32\" class=\"h-8 w-auto object-co...\">",
46+
"target": [
47+
"img[alt=\"AWS\"]"
48+
],
49+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
50+
},
51+
{
52+
"any": [],
53+
"all": [],
54+
"none": [
55+
{
56+
"id": "duplicate-img-label",
57+
"data": null,
58+
"relatedNodes": [],
59+
"impact": "minor",
60+
"message": "Element contains <img> element with alt text that duplicates existing text"
61+
}
62+
],
63+
"impact": "minor",
64+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Azure\" loading=\"lazy\" decoding=\"async\" width=\"34\" height=\"32\" class=\"h-8 w-auto object-co...\">",
65+
"target": [
66+
"img[alt=\"Azure\"]"
67+
],
68+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
69+
},
70+
{
71+
"any": [],
72+
"all": [],
73+
"none": [
74+
{
75+
"id": "duplicate-img-label",
76+
"data": null,
77+
"relatedNodes": [],
78+
"impact": "minor",
79+
"message": "Element contains <img> element with alt text that duplicates existing text"
80+
}
81+
],
82+
"impact": "minor",
83+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Crossplane\" loading=\"lazy\" decoding=\"async\" width=\"15\" height=\"32\" class=\"h-8 w-auto object-co...\">",
84+
"target": [
85+
"img[alt=\"Crossplane\"]"
86+
],
87+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
88+
},
89+
{
90+
"any": [],
91+
"all": [],
92+
"none": [
93+
{
94+
"id": "duplicate-img-label",
95+
"data": null,
96+
"relatedNodes": [],
97+
"impact": "minor",
98+
"message": "Element contains <img> element with alt text that duplicates existing text"
99+
}
100+
],
101+
"impact": "minor",
102+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Docker\" loading=\"lazy\" decoding=\"async\" width=\"41\" height=\"32\" class=\"h-8 w-auto object-co...\">",
103+
"target": [
104+
"img[alt=\"Docker\"]"
105+
],
106+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
107+
},
108+
{
109+
"any": [],
110+
"all": [],
111+
"none": [
112+
{
113+
"id": "duplicate-img-label",
114+
"data": null,
115+
"relatedNodes": [],
116+
"impact": "minor",
117+
"message": "Element contains <img> element with alt text that duplicates existing text"
118+
}
119+
],
120+
"impact": "minor",
121+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\".NET / C#\" loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" class=\"h-8 w-auto object-co...\">",
122+
"target": [
123+
"img[alt=\".NET / C#\"]"
124+
],
125+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
126+
},
127+
{
128+
"any": [],
129+
"all": [],
130+
"none": [
15131
{
16-
"id": "heading-order",
132+
"id": "duplicate-img-label",
17133
"data": null,
18134
"relatedNodes": [],
19-
"impact": "moderate",
20-
"message": "Heading order invalid"
135+
"impact": "minor",
136+
"message": "Element contains <img> element with alt text that duplicates existing text"
21137
}
22138
],
139+
"impact": "minor",
140+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Go Language\" loading=\"lazy\" decoding=\"async\" width=\"86\" height=\"32\" class=\"h-8 w-auto object-co...\">",
141+
"target": [
142+
"img[alt=\"Go Language\"]"
143+
],
144+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
145+
},
146+
{
147+
"any": [],
23148
"all": [],
24-
"none": [],
25-
"impact": "moderate",
26-
"html": "<h3 class=\"text-xl font-bold\">Full Workstream</h3>",
149+
"none": [
150+
{
151+
"id": "duplicate-img-label",
152+
"data": null,
153+
"relatedNodes": [],
154+
"impact": "minor",
155+
"message": "Element contains <img> element with alt text that duplicates existing text"
156+
}
157+
],
158+
"impact": "minor",
159+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Grafana\" loading=\"lazy\" decoding=\"async\" width=\"29\" height=\"32\" class=\"h-8 w-auto object-co...\">",
160+
"target": [
161+
"img[alt=\"Grafana\"]"
162+
],
163+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
164+
},
165+
{
166+
"any": [],
167+
"all": [],
168+
"none": [
169+
{
170+
"id": "duplicate-img-label",
171+
"data": null,
172+
"relatedNodes": [],
173+
"impact": "minor",
174+
"message": "Element contains <img> element with alt text that duplicates existing text"
175+
}
176+
],
177+
"impact": "minor",
178+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Helm\" loading=\"lazy\" decoding=\"async\" width=\"28\" height=\"32\" class=\"h-8 w-auto object-co...\">",
179+
"target": [
180+
"img[alt=\"Helm\"]"
181+
],
182+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
183+
},
184+
{
185+
"any": [],
186+
"all": [],
187+
"none": [
188+
{
189+
"id": "duplicate-img-label",
190+
"data": null,
191+
"relatedNodes": [],
192+
"impact": "minor",
193+
"message": "Element contains <img> element with alt text that duplicates existing text"
194+
}
195+
],
196+
"impact": "minor",
197+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Kubernetes\" loading=\"lazy\" decoding=\"async\" width=\"33\" height=\"32\" class=\"h-8 w-auto object-co...\">",
198+
"target": [
199+
"img[alt=\"Kubernetes\"]"
200+
],
201+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
202+
},
203+
{
204+
"any": [],
205+
"all": [],
206+
"none": [
207+
{
208+
"id": "duplicate-img-label",
209+
"data": null,
210+
"relatedNodes": [],
211+
"impact": "minor",
212+
"message": "Element contains <img> element with alt text that duplicates existing text"
213+
}
214+
],
215+
"impact": "minor",
216+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Open Stack\" loading=\"lazy\" decoding=\"async\" width=\"33\" height=\"32\" class=\"h-8 w-auto object-co...\">",
217+
"target": [
218+
"img[alt=\"Open Stack\"]"
219+
],
220+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
221+
},
222+
{
223+
"any": [],
224+
"all": [],
225+
"none": [
226+
{
227+
"id": "duplicate-img-label",
228+
"data": null,
229+
"relatedNodes": [],
230+
"impact": "minor",
231+
"message": "Element contains <img> element with alt text that duplicates existing text"
232+
}
233+
],
234+
"impact": "minor",
235+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Prometheus\" loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" class=\"h-8 w-auto object-co...\">",
236+
"target": [
237+
"img[alt=\"Prometheus\"]"
238+
],
239+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
240+
},
241+
{
242+
"any": [],
243+
"all": [],
244+
"none": [
245+
{
246+
"id": "duplicate-img-label",
247+
"data": null,
248+
"relatedNodes": [],
249+
"impact": "minor",
250+
"message": "Element contains <img> element with alt text that duplicates existing text"
251+
}
252+
],
253+
"impact": "minor",
254+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Python\" loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" class=\"h-8 w-auto object-co...\">",
255+
"target": [
256+
"img[alt=\"Python\"]"
257+
],
258+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
259+
},
260+
{
261+
"any": [],
262+
"all": [],
263+
"none": [
264+
{
265+
"id": "duplicate-img-label",
266+
"data": null,
267+
"relatedNodes": [],
268+
"impact": "minor",
269+
"message": "Element contains <img> element with alt text that duplicates existing text"
270+
}
271+
],
272+
"impact": "minor",
273+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Ruby\" loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" class=\"h-8 w-auto object-co...\">",
274+
"target": [
275+
"img[alt=\"Ruby\"]"
276+
],
277+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
278+
},
279+
{
280+
"any": [],
281+
"all": [],
282+
"none": [
283+
{
284+
"id": "duplicate-img-label",
285+
"data": null,
286+
"relatedNodes": [],
287+
"impact": "minor",
288+
"message": "Element contains <img> element with alt text that duplicates existing text"
289+
}
290+
],
291+
"impact": "minor",
292+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"Terraform\" loading=\"lazy\" decoding=\"async\" width=\"28\" height=\"32\" class=\"h-8 w-auto object-co...\">",
293+
"target": [
294+
"img[alt=\"Terraform\"]"
295+
],
296+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
297+
},
298+
{
299+
"any": [],
300+
"all": [],
301+
"none": [
302+
{
303+
"id": "duplicate-img-label",
304+
"data": null,
305+
"relatedNodes": [],
306+
"impact": "minor",
307+
"message": "Element contains <img> element with alt text that duplicates existing text"
308+
}
309+
],
310+
"impact": "minor",
311+
"html": "<img src=\"/_image?href=%2F%40f...\" data-image-component=\"true\" alt=\"TypeScript\" loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" class=\"h-8 w-auto object-co...\">",
27312
"target": [
28-
".service-card-header--default > h3"
313+
"img[alt=\"TypeScript\"]"
29314
],
30-
"failureSummary": "Fix any of the following:\n Heading order invalid"
315+
"failureSummary": "Fix all of the following:\n Element contains <img> element with alt text that duplicates existing text"
31316
}
32317
]
33318
}

‎src/components/Home/Skills/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
4747
{skill.data.logo && (
4848
<Image
4949
src={skill.data.logo}
50-
alt={skill.data.displayName}
50+
alt=""
5151
width={skill.data.logo.width}
5252
height={32}
5353
loading="lazy"

‎src/content/articles/demo/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2231,6 +2231,7 @@ graph TD
22312231
```markdown
22322232
| a | b | c | d |
22332233
| - | :- | -: | :-: |
2234+
| 1 | 2 | 3 | 4 |
22342235

22352236
| Feature | Supported | Notes |
22362237
| ------- | --------- | ----- |
@@ -2242,6 +2243,7 @@ graph TD
22422243

22432244
| a | b | c | d |
22442245
| - | :- | -: | :-: |
2246+
| 1 | 2 | 3 | 4 |
22452247

22462248
| Feature | Supported | Notes |
22472249
| ------- | --------- | ----- |

‎test/e2e/specs/11-accessibility/axe.spec.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ const axeTags = [
2626
*/
2727

2828
describe('WCAG Compliance', () => {
29-
test.only('run axe accessibility audit with default theme', async ({ page: playwrightPage }) => {
29+
test.only('run axe audit on all main pages', async ({ page: playwrightPage }) => {
3030
test.slow()
3131
test.setTimeout(90_000)
3232

3333
const page = await BasePage.init(playwrightPage)
3434
await runAcrossPages(page, 'check forms', async (url) => {
3535
await page.goto(url)
3636
const results = await new AxeBuilder({ page: page.page })
37-
.withTags(['cat.semantics'])
37+
.withTags(['cat.text-alternatives'])
3838
//.disableRules('color-contrast-enhanced')
3939
.analyze()
4040

@@ -48,18 +48,4 @@ describe('WCAG Compliance', () => {
4848
expect(results.incomplete).toEqual([])
4949
})
5050
})
51-
52-
test('run axe audit on all main pages', async ({ page: playwrightPage }) => {
53-
test.slow()
54-
test.setTimeout(90_000)
55-
56-
const page = await BasePage.init(playwrightPage)
57-
await runAcrossPages(page, 'check forms', async (url) => {
58-
await page.goto(url)
59-
const results = await new AxeBuilder({ page: page.page })
60-
.withTags(['cat.forms'])
61-
.analyze()
62-
expect(results.violations).toEqual([])
63-
}, true)
64-
})
6551
})

0 commit comments

Comments
 (0)