web-accessibility-presentation/sample-4.01.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
62
63
<!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">Removing the focus outline when using the mouse</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 tabindex="0">Visual</li>
					<li tabindex="0">Motor/Mobility</li>
					<li tabindex="0">Auditory</li>
					<li tabindex="0">Seizures</li>
					<li tabindex="0">Cognitive/Intellectual</li>
				</ul>
			</p>

			<p >
				<figure tabindex="0" style="width: 80%">
					<img
						src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Lake_Sabrina_before_Sunrise.jpg"
						width="400px"
						alt="" />
					<figcaption>Bishop Creek CALIFORNIA</figcaption>
				</figure>
			</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()
			{
				// Prevent focus on mousedown (continue to be allowed with keyboard tab navigation)
				// Should not be done for most element like buttons and links but can be handy for images or paragraph in some apps
				$("body").on("mousedown", "*", function(e) {
					if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
						$(this).css("outline", "none").on("blur", function() {
							$(this).off("blur").css("outline", "");
						});
					}
				});
			});
		</script>
	</body>
</html>