forked from terrill/AU
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·156 lines (139 loc) · 7.15 KB
/
index.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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accessible University Demo Site</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: black;
background-color: white;
margin: 0 1em;
width: 70em;
max-width: 95%;
}
header img {
border: none;
width: 220px;
height:110px;
}
h1, h2 {
margin-left: 0.5em;
margin-top: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
p, ol, ul {
line-height: 1.5em;
}
p {
margin-left: 1em;
}
ol, ul {}
li {
padding-bottom: 0.75em;
}
footer {
font-size: 0.9em;
width: 100%;
padding: 1em 0.5em;
border-top: 3px solid #514273;
}
div#ccLogo {
float: left;
padding: 0 1em 0.5em;
}
footer p {
clear: left;
}
p.announcement {
clear: left;
background-color: #FFC;
border: 1px solid #39275B;
padding: 1em;
}
div#github-link {
min-height: 100px;
margin: 1em 0;
}
div#github-link p {
float: left;
font-size: 1.1em;
font-weight: bold;
width: 12em;
line-height: 100px;
margin: 0 0 0 1.75em;
}
</style>
</head>
<body>
<header role="banner">
<a href="http://www.washington.edu/accesscomputing">
<img src="http://www.washington.edu/doit/Kb/Images/ACLogo220x110.gif" alt="AccessComputing" />
</a>
</header>
<main>
<h1>Accessible University</h1>
<p>Accessible University (AU) is a fictional university home page designed to demonstrate a variety of common web design problems that result in visitors with disabilities being unable to access content or features. AU was originally developed by <a
href="http://www.washington.edu/accessit">AccessIT</a> and is maintained by
<a href="http://www.washington.edu/accesscomputing">AccessComputing</a>, both projects based out of
the University of Washington. Use the AU site to:</p>
<ol>
<li>Demonstrate common web accessibility principles at trainings, presentations, and workshops on accessible web design.</li>
<li>Learn common web accessibility problems and solutions in an easy-to-understand way.</li>
</ol>
<div id="github-link">
<p>Available on <a href="https://github.com/terrill/AU">GitHub</a></p>
<img src="images/octocat.jpg" alt="" width="100" height="83" role="presentation">
</div>
<h2>Index of Accessible University Pages</h2>
<ol>
<li>View the <a href="before.html">inaccessible home page</a> - This page demonstrates common web accessibility issues using the fictitious AU home page. See how many web accessibility problems you can identify. <strong>NOTE:</strong> Since the purpose of this page is to demonstrate inaccessible web design, certain features are inherently inaccessible to some groups of users.</li>
<li>Review the page's <a href="issues.html">accessibility issues</a> - This page includes a list explaining all issues demonstrated on the AU home page, including their solutions and links to additional resources. Compare this list with the items you identified on your own in step one.</li>
<li>View an <a href="after.html">accessible home page</a> - This is a modified version of the
Accessible University home page, with all the accessibility issues fixed.</li>
</ol>
<h2>Additional Files for Demonstrating Document Accessibility</h2>
<p>Each of the following files contains the same content, a syllabus from a fictional Introduction to Physics course, provided in different formats (HTML, PDF, and Word) with varying levels of accessibility. These files can be used for demonstrating document accessibility issues in presentations and workshops.</p>
<ul>
<li><a href="documents/syllabus.html">HTML version - Accessible</a></li>
<li><a href="documents/syllabus_NOTaccessible.docx">Word version - Not accessible</a></li>
<li><a href="documents/syllabus_accessible.docx">Word version - Accessible</a></li>
<li><a href="documents/syllabus_scanned.pdf">PDF version - Scanned</a></li>
<li><a href="documents/syllabus_untagged.pdf">PDF version - Untagged</a></li>
<li><a href="documents/syllabus_accessible.pdf">PDF version - Accessible</a></li>
</ul>
<p>The issues illustrated by this collection of files include:</p>
<ul>
<li>Alt text for images</li>
<li>Proper use of headings</li>
<li>Proper use of lists</li>
<li>Simple tables: Identifying column headers</li>
<li>Complex tables: Explicitly associating headers with table cells</li>
<li>Identifying foreign language content</li>
<li>Using an accessibility checker</li>
</ul>
<h2>Image Credits</h2>
<p>The following images were used in the carousel feature of the AU home page:</p>
<ol>
<li><strong>Robot:</strong> "Singing_creature_on_DECtalk,_dorkbot-austin,_SXSW_2007" by Ed Schipul from Houston, TX, US (synth) [<a href="http://creativecommons.org/licenses/by-sa/2.0">CC BY-SA 2.0</a>], via Wikimedia Commons. For additional details see the <a href="https://commons.wikimedia.org/wiki/File%3ASinging_creature_on_DECtalk%2C_dorkbot-austin%2C_SXSW_2007.jpg">singing creature photo on Wikimedia Commons</a>.</li>
<li><strong>Campus map:</strong> "Universally designed map" by Mariko GODA - Own work (本人撮影). Licensed under CC BY 2.5 via Wikimedia Commons. For additional details see the <a href="https://commons.wikimedia.org/wiki/File:Universally_designed_map.jpg#/media/File:Universally_designed_map.jpg">universally designed map photo on Wikimedia Commons</a>.</li>
<li><strong>Braille can:</strong> "Asahi-super-dry-beer-top-of-can-with-braille" by Seifried at en.wikipedia - Transferred from en.wikipedia by SreeBot. Licensed under Public Domain via Wikimedia Commons. For additional details see the <a href="https://commons.wikimedia.org/wiki/File:Asahi-super-dry-beer-top-of-can-with-braille.jpg#/media/File:Asahi-super-dry-beer-top-of-can-with-braille.jpg">Braille can photo on Wikimedia Commons</a>.</li>
</ol>
</main>
<footer>
<div id="ccLogo">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a>
</div>
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Accessible University</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://washington.edu/accesscomputing/AU" property="cc:attributionName" rel="cc:attributionURL">University of Washington</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p>
<p>This product was originally developed with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and has been subsequently updated and maintained with support from the National Science Foundation (grant #CNS-054061S). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.</p>
</footer>
</body>
</html>