From 81e8b4200d66961b59cd0e4a26bd9a3eaf4b3b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Tue, 24 Jan 2012 13:59:00 +0100
Subject: [PATCH] improve the accessible.html example

---
 examples/accessible.html | 57 ++++++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/examples/accessible.html b/examples/accessible.html
index d9b8a777b3..fcde73ebdb 100644
--- a/examples/accessible.html
+++ b/examples/accessible.html
@@ -31,6 +31,15 @@
                 font-size:1em;
                 text-decoration:underline;
             }
+            a.accesskey {
+                color: white;
+            }
+            a.accesskey:focus {
+                color: #436976;
+            }
+            a.zoom {
+                padding-right: 20px;
+            }
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
@@ -57,31 +66,37 @@
             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 how to use the KeyboardDefaults option parameter for layer types.
+            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>
-                        <a href="javascript: void map.zoomOut();"
-                           accesskey="o">
-                            zoom <em>o</em>ut
-                        </a>
-                    </td>
+                    <td>&nbsp;</td>
                     <td>
                         <a href="javascript: void map.pan(0, -map.getSize().h / 4);"
                            accesskey="n">
                             pan <em>n</em>orth
                         </a>
                     </td>
-                    <td>
-                        <a href="javascript: void map.zoomIn();"
-                           accesskey="i">
-                            zoom <em>i</em>n
-                        </a>
-                    </td>
                 </tr>
                 <tr>
                     <td>
@@ -90,7 +105,7 @@
                             pan <em>w</em>est
                         </a>
                     </td>
-                    <td id="map" class="smallmap"></td>
+                    <td id="map" class="smallmap" tabindex="0"></td>
                     <td>
                         <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
                            accesskey="e">
@@ -113,9 +128,9 @@
 
         <div id="docs">
             <p>Navigate the map in one of three ways:</p>
-                <ul>
-                    <li>Click on the named links to zoom and pan</li>
-                    <li>Use following keys to pan and zoom:
+                <ol>
+                    <li>Use Access Key "1" (alt + 1) to focus the map element, and
+                        use following keys to pan and zoom:
                         <ul>
                             <li>+ (zoom in)</li>
                             <li>- (zoom out)</li>
@@ -124,8 +139,12 @@
                             <li>left-arrow (pan east)</li>
                             <li>right-arrow (pan west)</li>
                         </ul>
+                        See <a href=http://en.wikipedia.org/wiki/Access_key>wikipedia</a> for
+                        more detail about Access Keys.
                     </li>
-                    <li>If access keys work for links in your browser, use:
+                    <li>Navigate to pan and zoom links using the "tab" key, and
+                        press "enter" to pan and zoom</li>
+                    <li>If Access Keys work for links in your browser, use:
                         <ul>
                             <li>i (zoom in)</li>
                             <li>o (zoom out)</li>
@@ -135,7 +154,7 @@
                             <li>w (pan west)</li>
                         </ul>
                     </li>
-                </ul>
+                </ol>
             <p>
 
             This is an example of using alternate methods to control panning and zooming.  This approach uses map.pan() and map.zoom().  You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.