Skip to content

Commit 190aebe

Browse files
scottaoharascottaohara
authored
Create img-allowed-roles.html
1 parent c7f1f55 commit 190aebe

File tree

1 file changed

+168
-0
lines changed

1 file changed

+168
-0
lines changed

‎tests/img-allowed-roles.html

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head>
3+
<meta charset="UTF-8">
4+
<title>ARIA in HTML - Test Cases</title>
5+
<link rel="stylesheet" href="../results/styles.css">
6+
<style>
7+
body{
8+
font-size: 1em;
9+
}
10+
.roleTest {
11+
border: 2px solid black;
12+
width: 1em;
13+
height: 1em;
14+
margin: 5px;
15+
}
16+
.flex {
17+
display: flex;
18+
flex-wrap: wrap;
19+
align-items: stretch;
20+
}
21+
.widgetDemo {
22+
border: 1px solid #EEE;
23+
margin: .5em;
24+
padding: 5px;
25+
flex: 1 0 0;
26+
min-width: calc(300px - 1em);
27+
}
28+
.widgetDemo p {
29+
color: #696969;
30+
font-size: 1.125em;
31+
padding: 0;
32+
margin: .75em 0;
33+
}
34+
.testcase {
35+
margin: 2em 0;
36+
}
37+
h3{
38+
margin: .5em 0;
39+
border: 0;
40+
padding: 0;
41+
}
42+
h2 {font-size:2em}
43+
</style>
44+
</head>
45+
<body>
46+
47+
<header>
48+
<h1>ARIA in HTML - test cases for allowed roles on <code>img</code> elements with and without names</h1>
49+
<p>last updated 14 June 2023</p>
50+
<p>
51+
If an image is provided a name using the <code>alt</code> attribute, or other valid naming mechanisms, then authors may specified the allowed roles on the element (while also meeting other requirements for the use of those roles - which are out of scope for this test).
52+
</p>
53+
<p>
54+
If an image lacks an accessible name, then only the roles of img, none and presentation are allowed, though not recommended as these are unnecessary for authors to specify.
55+
</p>
56+
</header>
57+
<main>
58+
<h2>Tests:</h2>
59+
60+
<div class="flex">
61+
<div class="widgetDemo">
62+
<h3>Test 1</h3>
63+
<p>
64+
The following tests are of image elements with accessible names provided by use of alt, aria-label, aria-labelledby and the title attribute.
65+
</p>
66+
67+
68+
<div class="testcase">
69+
<p>with alt</p>
70+
<p><img src=# alt=image role=img></p>
71+
<p><img src=# alt=button role=button tabindex=0></p>
72+
<p><img src=# alt=checkbox role=checkbox aria-checked=false tabindex=0></p>
73+
<p><img src=# alt=link role=link tabindex=0></p>
74+
<p role=menu><img src=# alt=menuitem role=menuitem tabindex=0></p>
75+
<p role=menu><img src=# alt=menuitemcheckbox role=menuitemcheckbox aria-checked=false tabindex=0></p>
76+
<p role=menu><img src=# alt=menuitemradio role=menuitemradio tabindex=0 aria-checked=false></p>
77+
<p role=listbox aria-label=test><img src=# alt=option role=option tabindex=0 aria-selected=false></p>
78+
<p><img src=# alt=progressbar role=progressbar></p>
79+
<p><img src=# alt=radio role=radio tabindex=0 aria-checked=false></p>
80+
<p><img src=# alt=scrollbar role=scrollbar aria-valuenow=0 tabindex="0"></p>
81+
<p><img src=# alt=separator role=separator aria-valuenow=0 tabindex="0"></p>
82+
<p><img src=# alt=slider role=slider aria-valuenow=0 tabindex="0"></p>
83+
<p><img src=# alt=switch role=switch aria-checked=false tabindex="0"></p>
84+
<p role=tablist><img src=# alt=tab tabindex=0 role=tab aria-selected=true></p>
85+
<p role=tree><img src=# alt=treeitem role=treeitem tabindex=0></p>
86+
87+
<p>with title</p>
88+
<p><img src=# title=image role=img></p>
89+
<p><img src=# title=button role=button tabindex=0></p>
90+
<p><img src=# title=checkbox role=checkbox aria-checked=false tabindex=0></p>
91+
<p><img src=# title=link role=link tabindex=0></p>
92+
<p role=menu><img src=# title=menuitem role=menuitem tabindex=0></p>
93+
<p role=menu><img src=# title=menuitemcheckbox role=menuitemcheckbox aria-checked=false tabindex=0></p>
94+
<p role=menu><img src=# title=menuitemradio role=menuitemradio tabindex=0 aria-checked=false></p>
95+
<p role=listbox title=test><img src=# title=option role=option tabindex=0 aria-selected=false></p>
96+
<p><img src=# title=progressbar role=progressbar></p>
97+
<p><img src=# title=radio role=radio tabindex=0 aria-checked=false></p>
98+
<p><img src=# title=scrollbar role=scrollbar aria-valuenow=0 tabindex="0"></p>
99+
<p><img src=# title=separator role=separator aria-valuenow=0 tabindex="0"></p>
100+
<p><img src=# title=slider role=slider aria-valuenow=0 tabindex="0"></p>
101+
<p><img src=# title=switch role=switch aria-checked=false tabindex="0"></p>
102+
<p role=tablist><img src=# title=tab tabindex=0 role=tab aria-selected=true></p>
103+
<p role=tree><img src=# title=treeitem role=treeitem tabindex=0></p>
104+
105+
<p>with aria-label</p>
106+
<p><img src=# aria-label=image role=img></p>
107+
<p><img src=# aria-label=button role=button tabindex=0></p>
108+
<p><img src=# aria-label=checkbox role=checkbox aria-checked=false tabindex=0></p>
109+
<p><img src=# aria-label=link role=link tabindex=0></p>
110+
<p role=menu><img src=# aria-label=menuitem role=menuitem tabindex=0></p>
111+
<p role=menu><img src=# aria-label=menuitemcheckbox role=menuitemcheckbox aria-checked=false tabindex=0></p>
112+
<p role=menu><img src=# aria-label=menuitemradio role=menuitemradio tabindex=0 aria-checked=false></p>
113+
<p role=listbox aria-label=test><img src=# aria-label=option role=option tabindex=0 aria-selected=false></p>
114+
<p><img src=# aria-label=progressbar role=progressbar></p>
115+
<p><img src=# aria-label=radio role=radio tabindex=0 aria-checked=false></p>
116+
<p><img src=# aria-label=scrollbar role=scrollbar aria-valuenow=0 tabindex="0"></p>
117+
<p><img src=# aria-label=separator role=separator aria-valuenow=0 tabindex="0"></p>
118+
<p><img src=# aria-label=slider role=slider aria-valuenow=0 tabindex="0"></p>
119+
<p><img src=# aria-label=switch role=switch aria-checked=false tabindex="0"></p>
120+
<p role=tablist><img src=# aria-label=tab tabindex=0 role=tab aria-selected=true></p>
121+
<p role=tree><img src=# aria-label=treeitem role=treeitem tabindex=0></p>
122+
123+
<p id=al>with aria-labelledby</p>
124+
<p><img src=# aria-labelledby=al role=img></p>
125+
<p><img src=# aria-labelledby=al role=button tabindex=0></p>
126+
<p><img src=# aria-labelledby=al role=checkbox aria-checked=false tabindex=0></p>
127+
<p><img src=# aria-labelledby=al role=link tabindex=0></p>
128+
<p role=menu><img src=# aria-labelledby=al role=menuitem tabindex=0></p>
129+
<p role=menu><img src=# aria-labelledby=al role=menuitemcheckbox aria-checked=false tabindex=0></p>
130+
<p role=menu><img src=# aria-labelledby=al role=menuitemradio tabindex=0 aria-checked=false></p>
131+
<p role=listbox aria-label=test><img src=# aria-labelledby=al role=option tabindex=0 aria-selected=false></p>
132+
<p><img src=# aria-labelledby=al role=progressbar></p>
133+
<p><img src=# aria-labelledby=al role=radio tabindex=0 aria-checked=false></p>
134+
<p><img src=# aria-labelledby=al role=scrollbar aria-valuenow=0 tabindex="0"></p>
135+
<p><img src=# aria-labelledby=al role=separator aria-valuenow=0 tabindex="0"></p>
136+
<p><img src=# aria-labelledby=al role=slider aria-valuenow=0 tabindex="0"></p>
137+
<p><img src=# aria-labelledby=al role=switch aria-checked=false tabindex="0"></p>
138+
<p role=tablist><img src=# aria-labelledby=al tabindex=0 role=tab aria-selected=true></p>
139+
<p role=tree><img src=# aria-labelledby=al role=treeitem tabindex=0></p>
140+
</div>
141+
142+
<p><strong>Expected result:</strong>
143+
<br>No failures for use of ARIA roles would be flagged for any of the above examples. Use of img on a named image element is NOT RECOMMENDED. Confornamce checkers may indicate this as a warning.</p>
144+
</div>
145+
146+
<div class="widgetDemo">
147+
<h3>Test 2</h3>
148+
<p>
149+
Authors MUST NOT use roles other than none/presentation on an image with an empty alt and no accessible name, and MUST NOT use roles other than none/presentation or img if the element lacks an alt and has no accessible name.
150+
</p>
151+
152+
153+
<div class="testcase">
154+
<img src=# alt role=none>
155+
<img src=# alt role=presentation>
156+
157+
<img src=# role=img>
158+
<img src=# role=none>
159+
<img src=# role=presentation>
160+
</div>
161+
162+
<p><strong>Expected result:</strong>
163+
<br>The above 5 examples should not fail allowed role rules. Conformance checkers may produce warnings for use of redundant roles on each of these examples.</p>
164+
</div>
165+
</div>
166+
</main>
167+
</body>
168+
</html>

0 commit comments

Comments
 (0)