-
Notifications
You must be signed in to change notification settings - Fork 3
/
sample-3.01.html
45 lines (39 loc) · 1.61 KB
/
sample-3.01.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
<!DOCTYPE html>
<html>
<head>
<title>Web accessibility demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="image/ico" rel="shortcut icon" href="//resources.esri.com/favicon.ico">
<link type="image/ico" rel="icon" href="//resources.esri.com/favicon.ico">
</head>
<body class="claro">
<style>
.user-content {
margin: 10px;
padding: 10px;
border: 1px dashed lightgrey;
}
</style>
<header>
<h1 tabindex="0">Web accessibility demo</h1>
<h2 tabindex="0">Using JavaScript to make content accessible</h2>
</header>
<main role="main">
<div class="user-content">
<p>Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.</p>
<p>The needs that Web accessibility aims to address include:</p>
<p style="font-style: italic">Content from Wikipedia: <a href="http://en.wikipedia.org/wiki/Web_accessibility" target="_blank">Web accessibility</a><p>
</div>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".user-content").find("h1, p").attr("tabindex", "0");
});
</script>
</body>
</html>