| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| 6 | <meta name="apple-mobile-web-app-capable" content="yes"> |
|---|
| 7 | <title>Custom and accessible panel</title> |
|---|
| 8 | <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> |
|---|
| 9 | <link rel="stylesheet" href="style.css" type="text/css"> |
|---|
| 10 | <style type="text/css"> |
|---|
| 11 | |
|---|
| 12 | .olControlPanel button { |
|---|
| 13 | position: relative; |
|---|
| 14 | display: block; |
|---|
| 15 | margin: 2px; |
|---|
| 16 | border: 1px solid; |
|---|
| 17 | padding: 0 5px; |
|---|
| 18 | border-radius: 4px; |
|---|
| 19 | height: 35px; |
|---|
| 20 | background-color: white; |
|---|
| 21 | float: left; |
|---|
| 22 | overflow: visible; /* needed to remove padding from buttons in IE */ |
|---|
| 23 | } |
|---|
| 24 | .olControlPanel button span { |
|---|
| 25 | padding-left: 25px; |
|---|
| 26 | } |
|---|
| 27 | .olControlPanel button span:first-child { |
|---|
| 28 | padding-left: 0; |
|---|
| 29 | display: block; |
|---|
| 30 | position: absolute; |
|---|
| 31 | left: 2px; |
|---|
| 32 | } |
|---|
| 33 | .olControlPanel .olControlDrawFeatureItemActive span:first-child { |
|---|
| 34 | background-image: url("../theme/default/img/draw_line_on.png"); |
|---|
| 35 | height: 22px; |
|---|
| 36 | width: 24px; |
|---|
| 37 | top: 5px; |
|---|
| 38 | } |
|---|
| 39 | .olControlPanel .olControlDrawFeatureItemInactive span:first-child { |
|---|
| 40 | background-image: url("../theme/default/img/draw_line_off.png"); |
|---|
| 41 | height: 22px; |
|---|
| 42 | width: 24px; |
|---|
| 43 | top: 5px; |
|---|
| 44 | } |
|---|
| 45 | .olControlPanel .olControlZoomBoxItemInactive span:first-child { |
|---|
| 46 | background-image: url("../img/drag-rectangle-off.png"); |
|---|
| 47 | height: 29px; |
|---|
| 48 | width: 29px; |
|---|
| 49 | top: 2px; |
|---|
| 50 | } |
|---|
| 51 | .olControlPanel .olControlZoomBoxItemActive span:first-child { |
|---|
| 52 | background-image: url("../img/drag-rectangle-on.png"); |
|---|
| 53 | height: 29px; |
|---|
| 54 | width: 29px; |
|---|
| 55 | top: 2px; |
|---|
| 56 | } |
|---|
| 57 | .olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child { |
|---|
| 58 | background-image: url("../img/zoom-world-mini.png"); |
|---|
| 59 | height: 18px; |
|---|
| 60 | width: 18px; |
|---|
| 61 | top: 8px; |
|---|
| 62 | } |
|---|
| 63 | .olControlPanel .navHistory span:first-child { |
|---|
| 64 | background-image: url("../theme/default/img/navigation_history.png"); |
|---|
| 65 | height: 24px; |
|---|
| 66 | width: 24px; |
|---|
| 67 | top: 4px; |
|---|
| 68 | } |
|---|
| 69 | .olControlPanel .navHistoryPreviousItemActive span:first-child { |
|---|
| 70 | background-position: 0 0; |
|---|
| 71 | } |
|---|
| 72 | .olControlPanel .navHistoryPreviousItemInactive span:first-child { |
|---|
| 73 | background-position: 0 -24px; |
|---|
| 74 | } |
|---|
| 75 | .olControlPanel .navHistoryNextItemActive span:first-child { |
|---|
| 76 | background-position: -24px 0; |
|---|
| 77 | } |
|---|
| 78 | .olControlPanel .navHistoryNextItemInactive span:first-child { |
|---|
| 79 | background-position: -24px -24px; |
|---|
| 80 | } |
|---|
| 81 | |
|---|
| 82 | </style> |
|---|
| 83 | <script src="../lib/OpenLayers.js"></script> |
|---|
| 84 | <script src="accessible-panel.js"></script> |
|---|
| 85 | </head> |
|---|
| 86 | <body onload="init()"> |
|---|
| 87 | <h1 id="title">Custom and accessible panel</h1> |
|---|
| 88 | <div id="tags"> |
|---|
| 89 | panels, CSS, style, accessibility, button |
|---|
| 90 | </div> |
|---|
| 91 | <p id="shortdesc"> |
|---|
| 92 | Create a custom and accessible panel, styled entirely with |
|---|
| 93 | CSS. |
|---|
| 94 | </p> |
|---|
| 95 | <div id="panel"></div> |
|---|
| 96 | <div id="map" class="smallmap"></div> |
|---|
| 97 | |
|---|
| 98 | <div id="docs"> |
|---|
| 99 | |
|---|
| 100 | <p>An accessible panel: |
|---|
| 101 | |
|---|
| 102 | <ul> |
|---|
| 103 | <li>The buttons are actual HTML buttons. You can therefore |
|---|
| 104 | use the TAB key to give the focus to the panel's buttons, and the "ENTER" |
|---|
| 105 | key to activate or trigger the corresponding control.</li> |
|---|
| 106 | <li>The buttons include text and titles (displayed when a button |
|---|
| 107 | is hovered).</li> |
|---|
| 108 | <li>If you remove colors from the page (for example using FireFox's <a |
|---|
| 109 | href="https://addons.mozilla.org/en-US/firefox/addon/no-color/">No |
|---|
| 110 | Color extension</a>) the buttons are still visible, and |
|---|
| 111 | accessible using the keyboard.</li> |
|---|
| 112 | </ul> |
|---|
| 113 | </p> |
|---|
| 114 | |
|---|
| 115 | <p>By default a panel creates buttons as divs. In this example the |
|---|
| 116 | <code>createControlMarkup</code> panel function is overridden to create |
|---|
| 117 | a more accessible markup for the buttons. See the <a |
|---|
| 118 | href="accessible-panel.js" target="_blank"> accessible-panel.js |
|---|
| 119 | source</a> to see how this is done.</p> |
|---|
| 120 | |
|---|
| 121 | <p>Note: in IE 8, when a button is pressed its content shifts by 1 pixel. |
|---|
| 122 | This is a <a |
|---|
| 123 | href="http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/">known |
|---|
| 124 | IE8 bug</a>, with known workarounds. No workaround is applied in this |
|---|
| 125 | example though.</p> |
|---|
| 126 | |
|---|
| 127 | </div> |
|---|
| 128 | |
|---|
| 129 | </body> |
|---|
| 130 | </html> |
|---|
