web-accessibility-presentation/sample-3.04.html at master · glazou/web-accessibility-presentation · GitHub

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
<!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 make content accessible and 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 ) {
							var isForward = ! e.shiftKey,
								label = isForward ? "forward" : "backward";

							console.log("Pressing tab key on li number", $(this).index(), " direction", label);

							if ( isForward )
								$(this).next().focus();
							else
								$(this).prev().focus();

							return false;
						}
					});
			});
		</script>
	</body>
</html>