From dd3350c94864040f2880d79868dbeca36263898f Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Wed, 1 Apr 2015 19:43:45 +0200 Subject: [PATCH] Use template for accessible.html example --- examples_src/accessible.css | 16 +++++++ examples_src/accessible.html | 87 +++++++----------------------------- 2 files changed, 31 insertions(+), 72 deletions(-) create mode 100644 examples_src/accessible.css diff --git a/examples_src/accessible.css b/examples_src/accessible.css new file mode 100644 index 0000000000..0b1c657b51 --- /dev/null +++ b/examples_src/accessible.css @@ -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; +} diff --git a/examples_src/accessible.html b/examples_src/accessible.html index 71e821d804..7e73c824f9 100644 --- a/examples_src/accessible.html +++ b/examples_src/accessible.html @@ -1,72 +1,15 @@ - - - - - - - - - - - Accessibility example - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
- -
-
-
- -
- -
-

Accessibility example

-

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.

-

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.

-

See the accessible.js source to see how this is done.

-
-
accessibility, tabindex
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Accessibility example" +shortdesc: "Example of an accessible map." +docs: > +

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.

+

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.

+tags: "accessibility, tabindex" +--- +
+
+ +
+
+