Accessible Map

This example uses OpenLayers v4.0.1. The latest is v.

#### Accessible Map

Go to map

Example of an accessible map.

This page's `map` element has its `tabindex` attribute set to `"0"`, 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 `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.

Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.source.OSM

Copy Edit
Accessible Map Example of an accessible map. var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); document.getElementById('zoom-out').onclick = function() { var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom - 1); }; document.getElementById('zoom-in').onclick = function() { var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 1); }; 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; } #map:focus { outline: #4A74A8 solid 0.15em; } <a class="skiplink" href="#map">Go to map</a> <div id="map" class="map" tabindex="0"></div> <button id="zoom-out">Zoom out</button> <button id="zoom-in">Zoom in</button>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Accessible Map</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <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;
          }
          #map:focus {
            outline: #4A74A8 solid 0.15em;
          }
        </style>
      </head>
      <body>
        <a class="skiplink" href="#map">Go to map</a>
        <div id="map" class="map" tabindex="0"></div>
        <button id="zoom-out">Zoom out</button>
        <button id="zoom-in">Zoom in</button>
        <script>
          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          document.getElementById('zoom-out').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom - 1);
          };

          document.getElementById('zoom-in').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
          };
        </script>
      </body>
    </html>