ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use template for accessible.html example

Browse Source
This commit is contained in:
Bart van den Eijnden
2015-04-01 19:43:45 +02:00
committed by Andreas Hocevar
parent 821f31fa18
commit dd3350c948
2 changed files with 31 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples_src/accessible.css
+16
View File
@@ -0,0 +1,16 @@
a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
examples_src/accessible.html
+15 -72
View File
@@ -1,72 +1,15 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "Accessibility example"
<meta charset="utf-8"> shortdesc: "Example of an accessible map."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> tags: "accessibility, tabindex"
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div class="row-fluid">
<title>Accessibility example</title> <div class="span12">
<style> <a class="skiplink" href="#map">Go to map</a>
a.skiplink { <div id="map" class="map" tabindex="0"></div>
position: absolute; </div>
clip: rect(1px, 1px, 1px, 1px); </div>
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png" alt=""> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Accessibility example</h4>
<p id="shortdesc">Example of an accessible map.</p>
<div id="docs">
<p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
<p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
<p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
</div>
<div id="tags">accessibility, tabindex</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=accessible" type="text/javascript"></script>
</body>
</html>