a6d26c53e1
Changes to improve the accessibility example: - remove the `accesskey` attributes. Use of the `accesskey` is generally not recommended as it tends to cause conflicts with AT software and user settings. - Change the scripted "Go to map" accesskey to a regular skiplink. - Use script to inject the buttons below the map, if the map were to fail for lack of javascript support the buttons should not be there either. These should be buttons (and not hyperlinks) because they provide an action not a navigation. - Update the docs. - Add an empty `alt` attribute to the logo since it is strictly decorative (this should probably be done sitewide - which IMO is out of scope for this PR)
73 lines
2.7 KiB
HTML
73 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
<title>Accessibility example</title>
|
|
<style>
|
|
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;
|
|
}
|
|
</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="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>
|