-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsample-3.03.html
54 lines (48 loc) · 1.88 KB
/
sample-3.03.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
<!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">
<header>
<h1 tabindex="0">Web accessibility demo</h1>
<h2 tabindex="0">Using JavaScript to choose the next element to be focused</h2>
</header>
<main role="main">
<p tabindex="0">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 tabindex="0">
The needs that Web accessibility aims to address include:
<ul>
<li>Visual</li>
<li>Motor/Mobility</li>
<li>Auditory</li>
<li>Seizures</li>
<li>Cognitive/Intellectual</li>
</ul>
</p>
<p style="font-style: italic" tabindex="0">Content from Wikipedia: <a href="http://en.wikipedia.org/wiki/Web_accessibility" target="_blank">Web accessibility</a><p>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("li")
.attr("tabindex", "0")
.on('keydown', function(e){
if( e.keyCode === 9 ) {
console.log("Pressing tab key on li number", $(this).index());
$(this).next().focus();
// $(this).next().next().focus();
return false;
}
});
});
</script>
</body>
</html>