OpenLayers Accessible Example - 2.12 @mgifford

accessible.html Not working.

by Mike Gifford

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
        <h1 id="title">Accessible Example</h1>

        <div id="tags">
            keyboard, pan, panning, zoom, zooming, accesskey
        </div>        

        <a class="accesskey"
           href=""
           accesskey="1"
           onclick="document.getElementById('map').focus(); return false;">
           Go to map
        </a>

        <p id="shortdesc">
            Demonstrate the KeyboardDefaults control and how to use links
            with Access Keys to navigate the map with the keyboard.
        </p>

        <a class="zoom"
           href="javascript: void map.zoomIn();"
           accesskey="i">
            zoom <em>i</em>n</a>
        <a class="zoom"
           href="javascript: void map.zoomOut();"
           accesskey="o">
            zoom <em>o</em>ut</a>

        <table>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <a href="javascript: void map.pan(0, -map.getSize().h / 4);"
                           accesskey="n">
                            pan <em>n</em>orth
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="javascript: void map.pan(-map.getSize().w / 4, 0);"
                           accesskey="w">
                            pan <em>w</em>est
                        </a>
                    </td>
                    <td id="map" class="smallmap" tabindex="0"></td>
                    <td>
                        <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
                          ...

CSS

table {
                border: 1 px solid white;
                padding: 0;
            }
            td {
                text-align: center;
            }
            a {
                text-decoration: none;
                font-size: 1.2em;
            }
            a em {
                font-style: normal;
                font-weight: normal;
                text-decoration: underline;
            }
            a:hover {
                text-decoration: underline;
            }
            a.api {
                font-size:1em;
                text-decoration:underline;
            }
            a.accesskey {
                color: white;
            }
            a.accesskey:focus {
                color: #436976;
            }
            a.zoom {
                padding-right: 20px;
            }

JavaScript

(function($) {

    var map = null;

    function init() {
        var options = {
            controls: [
                new OpenLayers.Control.KeyboardDefaults({
                observeElement: 'map'
            })
                ]
        };
        map = new OpenLayers.Map('map', options);
        var wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0?', {
            layers: 'basic'
        });
        map.addLayer(wms);
        map.zoomToMaxExtent();
    }

    init();
})(jQuery);