Skip to content

Commit f602f6a

Browse files
webstackdevwebstackdev
committed
Use Video component in articles/demo instead of :::video::: so we can pass accessible title, and pass Axe accessibility test
1 parent 7fed801 commit f602f6a

3 files changed

Lines changed: 39 additions & 167 deletions

File tree

‎axe-results-violations.json‎

Lines changed: 1 addition & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1 @@
1-
[
2-
{
3-
"id": "svg-img-alt",
4-
"impact": "serious",
5-
"tags": [
6-
"cat.text-alternatives",
7-
"wcag2a",
8-
"wcag111",
9-
"section508",
10-
"section508.22.a",
11-
"TTv5",
12-
"TT7.a",
13-
"EN-301-549",
14-
"EN-9.1.1.1",
15-
"ACT",
16-
"RGAAv4",
17-
"RGAA-1.1.5"
18-
],
19-
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have accessible text",
20-
"help": "<svg> elements with an img role must have alternative text",
21-
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/svg-img-alt?application=playwright",
22-
"nodes": [
23-
{
24-
"any": [
25-
{
26-
"id": "svg-non-empty-title",
27-
"data": {
28-
"messageKey": "noTitle"
29-
},
30-
"relatedNodes": [],
31-
"impact": "serious",
32-
"message": "Element has no child that is a title"
33-
},
34-
{
35-
"id": "aria-label",
36-
"data": null,
37-
"relatedNodes": [],
38-
"impact": "serious",
39-
"message": "aria-label attribute does not exist or is empty"
40-
},
41-
{
42-
"id": "aria-labelledby",
43-
"data": null,
44-
"relatedNodes": [],
45-
"impact": "serious",
46-
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
47-
},
48-
{
49-
"id": "non-empty-title",
50-
"data": {
51-
"messageKey": "noAttr"
52-
},
53-
"relatedNodes": [],
54-
"impact": "serious",
55-
"message": "Element has no title attribute"
56-
}
57-
],
58-
"all": [],
59-
"none": [],
60-
"impact": "serious",
61-
"html": "<svg style=\"vertical-align:0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1.541ex\" height=\"1.545ex\" role=\"img\" focusable=\"false\" viewBox=\"0 -683 681 683\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">",
62-
"target": [
63-
"svg[width=\"1.541ex\"]"
64-
],
65-
"failureSummary": "Fix any of the following:\n Element has no child that is a title\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
66-
},
67-
{
68-
"any": [
69-
{
70-
"id": "svg-non-empty-title",
71-
"data": {
72-
"messageKey": "noTitle"
73-
},
74-
"relatedNodes": [],
75-
"impact": "serious",
76-
"message": "Element has no child that is a title"
77-
},
78-
{
79-
"id": "aria-label",
80-
"data": null,
81-
"relatedNodes": [],
82-
"impact": "serious",
83-
"message": "aria-label attribute does not exist or is empty"
84-
},
85-
{
86-
"id": "aria-labelledby",
87-
"data": null,
88-
"relatedNodes": [],
89-
"impact": "serious",
90-
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
91-
},
92-
{
93-
"id": "non-empty-title",
94-
"data": {
95-
"messageKey": "noAttr"
96-
},
97-
"relatedNodes": [],
98-
"impact": "serious",
99-
"message": "Element has no title attribute"
100-
}
101-
],
102-
"all": [],
103-
"none": [],
104-
"impact": "serious",
105-
"html": "<svg style=\"vertical-align:-0.339ex\" xmlns=\"http://www.w3.org/2000/svg\" width=\"2.895ex\" height=\"1.934ex\" role=\"img\" focusable=\"false\" viewBox=\"0 -705 1279.5 855\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">",
106-
"target": [
107-
"svg[width=\"2.895ex\"]"
108-
],
109-
"failureSummary": "Fix any of the following:\n Element has no child that is a title\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
110-
},
111-
{
112-
"any": [
113-
{
114-
"id": "svg-non-empty-title",
115-
"data": {
116-
"messageKey": "noTitle"
117-
},
118-
"relatedNodes": [],
119-
"impact": "serious",
120-
"message": "Element has no child that is a title"
121-
},
122-
{
123-
"id": "aria-label",
124-
"data": null,
125-
"relatedNodes": [],
126-
"impact": "serious",
127-
"message": "aria-label attribute does not exist or is empty"
128-
},
129-
{
130-
"id": "aria-labelledby",
131-
"data": null,
132-
"relatedNodes": [],
133-
"impact": "serious",
134-
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
135-
},
136-
{
137-
"id": "non-empty-title",
138-
"data": {
139-
"messageKey": "noAttr"
140-
},
141-
"relatedNodes": [],
142-
"impact": "serious",
143-
"message": "Element has no title attribute"
144-
}
145-
],
146-
"all": [],
147-
"none": [],
148-
"impact": "serious",
149-
"html": "<svg style=\"vertical-align:-1.552ex\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14.293ex\" height=\"4.588ex\" role=\"img\" focusable=\"false\" viewBox=\"0 -1342 6317.6 2028\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">",
150-
"target": [
151-
"svg[width=\"14.293ex\"]"
152-
],
153-
"failureSummary": "Fix any of the following:\n Element has no child that is a title\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
154-
}
155-
]
156-
}
157-
]
1+
[]

‎public/videos/sample-video-1.vtt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
WEBVTT
2+
3+
00:00:00.000 --> 00:00:04.000
4+
Sample video with caption track for accessibility testing.

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

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2447,17 +2447,41 @@ This demonstrates `now` (uses the current time at render): <Time format="datetim
24472447

24482448
## Video
24492449

2450-
Embed videos in HTML5 markup that are in the `/public` folder. Provided by the `remark-video` plugin.
2450+
Embed videos from the `/public` folder with HTML5 markup and a captions track.
24512451

2452-
```markdown
2453-
:::video
2454-
/videos/sample-video-1.mp4
2455-
:::
2456-
```
2457-
2458-
:::video
2459-
/videos/sample-video-1.mp4
2460-
:::
2452+
```html
2453+
<video
2454+
controls
2455+
preload="metadata"
2456+
width="100%"
2457+
class="block mx-auto mb-8 h-auto max-w-full rounded-lg shadow-md"
2458+
>
2459+
<source src="/videos/sample-video-1.mp4" type="video/mp4" />
2460+
<track
2461+
default
2462+
kind="captions"
2463+
src="/videos/sample-video-1.vtt"
2464+
srclang="en"
2465+
label="English"
2466+
/>
2467+
</video>
2468+
```
2469+
2470+
<video
2471+
controls
2472+
preload="metadata"
2473+
width="100%"
2474+
class="block mx-auto mb-8 h-auto max-w-full rounded-lg shadow-md"
2475+
>
2476+
<source src="/videos/sample-video-1.mp4" type="video/mp4" />
2477+
<track
2478+
default
2479+
kind="captions"
2480+
src="/videos/sample-video-1.vtt"
2481+
srclang="en"
2482+
label="English"
2483+
/>
2484+
</video>
24612485

24622486
## Call To Action Components
24632487

0 commit comments

Comments
 (0)