diff --git a/examples/accessible.html b/examples/accessible.html new file mode 100644 index 0000000000..397ddd468f --- /dev/null +++ b/examples/accessible.html @@ -0,0 +1,66 @@ + + + + + + + + + + + Accessibility example + + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+ Go to map +
+ Zoom in + Zoom out +
+
+ +
+ +
+

Accessibility example

+

Example of an accessible map.

+
+

This page's map element has its tabindex attribute set to "0". That makes is focusable. To focus the map element you can either navigate to it using the "tab" key, or use the Access Key "1" (alt+1 or ctrl+alt+1) which provides a direct access. 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.

+

When clicked the "Zoom in" and "Zoom out" links below the map zoom the map in and out, respectively. You can navigate to the links using the "tab" key, and press the "enter" key to trigger the zooming action. The Access Keys "i" and "o" can also be used, as a direct access to the actions of "Zoom in" and "Zoom out" links.

+

See the source of the page to see how this done.

+
+
accessibility, tabindex
+
+ +
+ +
+ + + + + + diff --git a/examples/accessible.js b/examples/accessible.js new file mode 100644 index 0000000000..d11dfd2633 --- /dev/null +++ b/examples/accessible.js @@ -0,0 +1,20 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});