-
Notifications
You must be signed in to change notification settings - Fork 1
/
aria_image_test2.html
39 lines (32 loc) · 1.46 KB
/
aria_image_test2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ARIA tests</title>
</head>
<body>
<h1>Testing basic ARIA support for images</h1>
<h2>Test 1: Basic image with aria-labelledby</h2>
<p>The image below uses aria-labelledby and should indicate that "Van Gogh's oilpainting of sunflowers" is the value.</p>
<img src="banana.png" aria-labelledby="flower_id">
<p><span id="flower_id">Van Gogh's oil painting of sunflowers</span>
hangs in Amsterdam's Van Gogh museum.</p>
<h2>Test 2: Providing a short description for a complex graphic</h2>
<p>The value should be "4 of 5".</p>
<div role="img" aria-labelledby="star_id" tabindex="-1">
<img height="20px" width="20 px" src="banana.png" alt=""/>
<img height="20px" width="20 px" src="banana.png" alt=""/>
<img height="20px" width="20 px" src="banana.png" alt=""/>
<img height="20px" width="20 px" src="banana.png" alt=""/>
<img height="20px" width="20 px" src="banana2.png" alt=""/>
</div>
<div id="star_id">4 of 5</div>
<h2>Test 3: Basic image with aria-label</h2>
<p>The image below uses aria-label="Sunflowers".</p>
<img src="banana.png" aria-label="Sunflowers">
<h2>Test 4: Image with aria-labelledby derived from multiple sources</h2>
<p>The value should be expressed as "The school of athens by Raphael".</p>
<h3 id="t1">The School of Athens</h3>
<p><img src="banana.png" aria-labelledby="t1 a1">This famous painting <span id="a1">by Raphael</span> is the artist’s most famous work.</p>
</body>
</html>