-
Notifications
You must be signed in to change notification settings - Fork 0
/
Alice Blue Accessible SVG
86 lines (78 loc) · 2.42 KB
/
Alice Blue Accessible SVG
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accessible SVG</title>
<meta name="description" content="Address SVG image accessibility issues.">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="author" content="Lynn Stanikmas">
<style>
* {
border:none;
outline:none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background:#aab2b1;
}
#wrapper{
width:100%;
font-family: Helvetica, Arial, sans-serif;
}
ol, ul {
list-style: none;
}
p {
margin:0 auto;
position:relative;
width:500px;
height:500px;
}
rect {
fill:aliceblue;
}
</style>
</head>
<body>
<div id="wrapper">
<p>
<svg width="500" height="500" role="img" id="alice" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<title>Alice Blue Accessible SVG</title>
<desc>The color Alice Blue is named for Alice Roosevelt Longworth, American writer and prominent socialite. She was the eldest child of U.S. President Theodore Roosevelt and the only child of Roosevelt and his first wife, Alice Hathaway Lee.</desc>
<use href="#alice" tabindex="0" role="link" /> <!--accessibility feature for user to tab to the link with the exception of NVDA in IE-->
<g>
<title>SVG Shapes</title>
<desc>These are an assortment of SVG shapes in a group.</desc>
<rect x="0" y="0" width="500" height="250" />
<circle cx="10" cy="40" r="100" fill="#ED6E46" />
<ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
<line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8" />
<polyline points="0,40,40,40,40,80,80,80,80,120,120,120,120,160" fill="none" stroke="#BBC42A" stroke-width="6" />
</g>
</svg>
</p>
</div><!--END wrapper-->
</body>
</html>