-
Notifications
You must be signed in to change notification settings - Fork 45
/
accessibiltytest.html
53 lines (45 loc) · 6.48 KB
/
accessibiltytest.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<head>
<meta charset="utf-8">
<title>Clown Car Technique with Single HTTP request!</title>
<body>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml" role="img" title="This is the title of the first object on the page">
<!--[if lte IE 8]>
<img src="jpeg/jpeg/medium.jpg" alt="Fall back for IE">
<![endif]-->
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3Cdesc%3EThis%20is%20the%20contents%20of%20a%20description%20tag%3C/desc%3E%3C/svg%3E" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="jpeg/jpeg/medium.jpg" alt="Fall back for IE">
<![endif]-->
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<img src="jpeg/jpeg/medium.jpg" alt="This is the alt attribute of a fall back image">
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<p>This is a paragraph within the object tag</p>
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" title="this object has a title" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="jpeg/jpeg/medium.jpg" alt="Fall back for IE">
<![endif]-->
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20role='image'%20aria-label='ARIA%20label'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="jpeg/jpeg/medium.jpg" alt="Fall back for IE">
<![endif]-->
</object>
<object tabindex="0"
data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESVG%Title%20in%20the%20head%20of%20the%20 document%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/small.jpg);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/medium.jpg);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/jpeg/jpeg/big.jpg);%7D%7D%3C/style%3E%3C/svg%3E" role="img" aria-label="this is an ARIA label on the object tag" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="jpeg/jpeg/medium.jpg" alt="Fall back for IE">
<![endif]-->
</object>
</body>
</html>