-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
181 lines (167 loc) · 8.41 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Do not allow resizing of the page in. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Demonstrating different accessibility issues" content="DAS Demo Site">
<title>Demo Site</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- Add a details summary elements here to provide a description about the page -->
<details tabindex="1">
<summary>About this page</summary>
<p>Spend a little time reviewing the site so we can discuss the accessibility barriers you have found and feel are important. This page has many accessibility errors. This is <strong>not</strong> a test and you <strong> do not </strong> need to test the entire site or find every issue. Simply identify 2 or 3 important issues that we can talk about during the interview. Thank you!</p>
</details>
<header>
<h1>Demo Site</h1>
</header>
<nav>
<a href="index.html" role="menuitem">Home</a>
<a href="about.html" role="menuitem">About</a>
<a href="services.html" role="menuitem">Services</a>
<a href="contact.html" role="menuitem">Contact</a>
</nav>
<div class="banner">
<h2>Digital Accessibility</h2>
<picture>
<source srcset="images/17233892522_fd0454310f_small.jpg" media="(max-width: 600px)">
<img src="images/17233892522_fd0454310f_medium.jpg" style="display: block; margin: 0 auto; width: 12vw;">
</picture>
</div>
<div class="main-content">
<h2>Digital Accessibility</h2>
<p>
Digital accessibility is the practice of ensuring that websites, applications, and digital content are designed and developed to be usable by everyone, including people with disabilities. This encompasses a wide range of conditions including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. By implementing accessible design principles, we create inclusive digital experiences that provide equal access and opportunity to all users.
</p>
<div class="heading3">Key aspects of digital accessibility include:</div>
<div class="tabs">
<ul class="tab-list">
<li class="tab-item" data-tab="tab1" tabindex="1" role="tab">Perceivable</li>
<li class="tab-item" data-tab="tab2" tabindex="2" role="tab">Operable</li>
<li class="tab-item" data-tab="tab3" tabindex="3" role="tab">Understandable</li>
<li class="tab-item" data-tab="tab4" tabindex="4" role="tab">Robust</li>
</ul>
<div class="tab-content" id="tab1">
<p><strong>Perceivable:</strong> Information must be presentable to users in ways they can perceive</p>
</div>
<div class="tab-content" id="tab2">
<p><strong>Operable:</strong> User interface components and navigation must be operable</p>
</div>
<div class="tab-content" id="tab3">
<p><strong>Understandable:</strong> Information and user interface operation must be understandable</p>
</div>
<div class="tab-content" id="tab4">
<p><strong>Robust:</strong> Content must be robust enough to be interpreted by a wide variety of user agents</p>
</div>
</div>
<script src="scripts/script.js"></script>
<div class="heading3">Valuable Resources</div>
<ol>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Web Content Accessibility Guidelines (WCAG)</a>
<ul>
<li>The global standard for web accessibility developed by the W3C</li>
<li>Contains detailed success criteria and techniques</li>
</ul>
</li>
<li><a href="https://webaim.org/" target="_blank">WebAIM (Web Accessibility In Mind)</a>
<ul>
<li>Comprehensive training, articles, and tools</li>
<li>Features the WAVE accessibility evaluation tool</li>
</ul>
</li>
<li><a href="https://www.a11yproject.com/" target="_blank">A11Y Project</a>
<ul>
<li>Community-driven effort to make accessibility easier</li>
<li>Includes checklists, resources, and patterns</li>
</ul>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">MDN Web Accessibility Guide</a>
<ul>
<li>Mozilla's comprehensive documentation</li>
<li>Practical examples and best practices</li>
</ul>
</li>
<li><a href="resources/accessibility.pdf">Accessibility Checklist for Digital Documents (PDF Download)</a>
<ul>
<li>A comprehensive checklist to ensure digital documents are accessible</li>
</ul>
</li>
</ol>
<div class="heading3">Global Disability Statistics</div>
<table border="1">
<tbody>
<tr>
<td>Region</th>
<td>Estimated Population</th>
<td>People with Disabilities</th>
<td>Percentage of Population</th>
</tr>
<tr>
<td>World</td>
<td>7.8 billion</td>
<td>Over 1 billion</td>
<td>About 15%</td>
</tr>
<tr>
<td>Europe</td>
<td class="old">746 million</td>
<td class="old">About 135 million</td>
<td>Approximately 18%</td>
</tr>
<tr>
<td>Americas</td>
<td>1 billion</td>
<td>-</td>
<td>Around 13%</td>
</tr>
<tr>
<td>Africa</td>
<td>1.3 billion</td>
<td>At least 80 million</td>
<td>Roughly 6%</td>
</tr>
<tr>
<td>Asia & Pacific</td>
<td>4.3 billion</td>
<td>-</td>
<td>About 16%</td>
</tr>
</tbody>
</table>
<p>Please note that these figures are estimated and may vary based on the source and the specific criteria used to define and count disabilities.</p>
<p> Please note that figures in <span class="old">red</span> reflect data gathered in 2010.</p>
<!-- Create a form that is for contact information to get more information and ask for name and email. The form should work in the follwoing ways.
1. first name and e-mail are marked with an asterisk to identify required fields.
2. use placeholder text as labels.
3. There is a submit button after the form.
4. When the form is submitted a modal window will pop up and say "Thank you for your inquiry."
-->
<div class="heading3">Contact Us</div>
<form>
<div class="label">Name:</div>
<input type="text" placeholder="first">
<input type="text" placeholder="last">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email address here" required>
<!-- inlcude a field for last name -->
<button type="submit">Submit</button>
</form>
<a class="like-button">Like this page</a>
<svg height="10" width="100%">
<line x1="0" y1="5" x2="100%" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
<h6>Commitment to Accessibility</h6>
<p>
This project is committed to maintaining high accessibility standards. All contributions should adhere to WCAG 2.1 Level AA guidelines at minimum.
</p>
</div>
<footer>
<p>© 2024 Demo Site</p>
<a class="footer" tabindex="2" href="https://accessibility.huit.harvard.edu/">Harvard University - Digital Accessibility Services</a>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>