Link labels to input elements

examples/cluster.html

@@ -8,6 +8,6 @@ tags: "cluster, vector"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>cluster distance</label>
+  <label for="distance">cluster distance</label>
   <input id="distance" type="range" min="0" max="100" step="1" value="40"/>
 </form>

examples/color-manipulation.html

@@ -9,17 +9,17 @@ tags: "color, hue, lightness, chroma"
 <div id="map" class="map"></div>
 <table class="controls">
   <tr>
-    <td>hue</td>
+    <td><label for="hue">hue</label></td>
     <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
     <td><span id="hueOut"></span> °&nbsp;</td>
   </tr>
   <tr>
-    <td>chroma</td>
+    <td><label for="chroma">chroma</label></td>
     <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
     <td><span id="chromaOut"></span> %</td>
   </tr>
   <tr>
-    <td>lightness</td>
+    <td><label for="lightness">lightness</label></td>
     <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
     <td><span id="lightnessOut"></span> %</td>
   </tr>

examples/draw-and-modify-features.html

@@ -8,7 +8,7 @@ tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
     <option value="LineString">LineString</option>

examples/draw-features.html

@@ -11,7 +11,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
     <option value="LineString">LineString</option>

examples/draw-freehand.html

@@ -12,7 +12,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="LineString">LineString</option>
     <option value="Polygon">Polygon</option>

examples/draw-shapes.html

@@ -15,7 +15,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Shape type &nbsp;</label>
+  <label for="type">Shape type &nbsp;</label>
   <select id="type">
     <option value="Circle">Circle</option>
     <option value="Square">Square</option>

examples/export-pdf.html

@@ -14,7 +14,7 @@ resources:
   </div>
 </div>
 <form class="form">
-  <label>Page size </label>
+  <label for="format">Page size </label>
   <select id="format">
     <option value="a0">A0 (slow)</option>
     <option value="a1">A1</option>
@@ -23,7 +23,7 @@ resources:
     <option value="a4" selected>A4</option>
     <option value="a5">A5 (fast)</option>
   </select>
-  <label>Resolution </label>
+  <label for="resolution">Resolution </label>
   <select id="resolution">
     <option value="72">72 dpi (fast)</option>
     <option value="150">150 dpi</option>

examples/filter-points-webgl.html

@@ -19,8 +19,8 @@ experimental: true
 <form>
   <div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>
 
-  <label>Minimum year:</label>
+  <label for="min-year">Minimum year:</label>
   <input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
-  <label>Maximum year:</label>
+  <label for="max-year">Maximum year:</label>
   <input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
 </form>

examples/heatmap-earthquakes.html

@@ -8,8 +8,8 @@ tags: "heatmap, kml, vector, style, webgl"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>radius size</label>
+  <label for="radius">radius size</label>
   <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
-  <label>blur size</label>
+  <label for="blur">blur size</label>
   <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
 </form>

examples/icon-sprite-webgl.html

@@ -21,6 +21,6 @@ cloak:
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>
 <div>
-  Filter by UFO shape:
+  <label for="shape-filter">Filter by UFO shape:</label>
   <select id="shape-filter"></select>
 </div>

examples/iiif.html

@@ -10,7 +10,7 @@ tags: "IIIF, IIIF Image API, tile source"
 <div id="map" class="map"></div>
 <div class="controls">
   <div id="iiif-notification">&nbsp;</div>
-  Enter <code>info.json</code> URL:
+  <label for="imageInfoUrl">Enter <code>info.json</code> URL:</label>
   <input type="text" id="imageInfoUrl" value="https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json">
   <button id="display">Display image</button>
 </div>

examples/measure.html

@@ -16,7 +16,7 @@ tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Measurement type &nbsp;</label>
+  <label for="type">Measurement type &nbsp;</label>
   <select id="type">
     <option value="length">Length (LineString)</option>
     <option value="area">Area (Polygon)</option>

examples/mouse-position.html

@@ -9,11 +9,11 @@ tags: "mouse-position, openstreetmap"
 <div id="map" class="map"></div>
 <div id="mouse-position"></div>
 <form>
-  <label>Projection </label>
+  <label for="projection">Projection </label>
   <select id="projection">
     <option value="EPSG:4326">EPSG:4326</option>
     <option value="EPSG:3857">EPSG:3857</option>
   </select>
-  <label>Precision </label>
+  <label for="precision">Precision</label>
   <input id="precision" type="number" min="0" max="12" value="4"/>
 </form>

examples/moveend.html

@@ -11,7 +11,7 @@ docs: >
 tags: "moveend, map, event"
 ---
 <div id="map" class="map"></div>
-<label>left:</label> <input readonly="readonly" type="text" id="left">
-<label>right:</label> <input readonly="readonly" type="text" id="right">
-<label>bottom:</label> <input readonly="readonly" type="text" id="bottom">
-<label>top:</label> <input readonly="readonly" type="text" id="top">
+<label>left: <input readonly="readonly" type="text" id="left"></label>
+<label>right: <input readonly="readonly" type="text" id="right"></label>
+<label>bottom: <input readonly="readonly" type="text" id="bottom"></label>
+<label>top: <input readonly="readonly" type="text" id="top"></label>

examples/overviewmap-custom.html

@@ -11,4 +11,4 @@ cloak:
 
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="rotateWithView">Rotate with view</div>
+<div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>

examples/print-to-scale.html

@@ -18,7 +18,7 @@ resources:
   <div id="map" class="map"></div>
 </div>
 <form class="form">
-  <label>Page size </label>
+  <label for="format">Page size </label>
   <select id="format">
     <option value="a0">A0 (slow)</option>
     <option value="a1">A1</option>
@@ -27,14 +27,14 @@ resources:
     <option value="a4" selected>A4</option>
     <option value="a5">A5 (fast)</option>
   </select>
-  <label>Resolution </label>
+  <label for="resolution">Resolution </label>
   <select id="resolution">
     <option value="72">72 dpi (fast)</option>
     <option value="150">150 dpi</option>
     <option value="200" selected>200 dpi</option>
     <option value="300">300 dpi (slow)</option>
   </select>
-  <label>Scale </label>
+  <label for="scale">Scale </label>
   <select id="scale">
     <option value="500">1:500000</option>
     <option value="250" selected>1:250000</option>

examples/reprojection-image.html

@@ -7,4 +7,7 @@ docs: >
 tags: "reprojection, projection, proj4js, image, imagestatic"
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="imageSmoothing" checked />Image smoothing</div>
+<div>
+  <input type="checkbox" id="imageSmoothing" checked />
+  <label for="imageSmoothing">Image smoothing</label>
+</div>

examples/reprojection.html

@@ -9,14 +9,14 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
 <div id="map" class="map"></div>
 <form class="form-inline">
   <div class="col-md-3">
-    <label>Base map:</label>
+    <label for="base-layer">Base map:</label>
     <select id="base-layer">
       <option value="osm">OSM (EPSG:3857)</option>
       <option value="wms4326">WMS (EPSG:4326)</option>
     </select>
   </div>
   <div class="col-md-4">
-    <label>Overlay map:</label>
+    <label for="overlay-layer">Overlay map:</label>
     <select id="overlay-layer">
       <option value="bng">British National Grid (EPSG:27700)</option>
       <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
@@ -25,7 +25,7 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
     </select>
   </div>
   <div class="col-md-5">
-    <label>View projection:</label>
+    <label for="view-projection">View projection:</label>
     <select id="view-projection">
       <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
       <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>

examples/scale-line.html

@@ -28,5 +28,5 @@ tags: "scale-line, openstreetmap"
 </select>
 
 <div id="showScaleTextDiv" style="display:none">
-  <input type="checkbox" id="showScaleText" checked>Show scale text
+  <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
 </div>

examples/select-features.html

@@ -10,7 +10,7 @@ tags: "select, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Action type &nbsp;</label>
+  <label for="type">Action type &nbsp;</label>
   <select id="type" class="form-control">
     <option value="click" selected>Click</option>
     <option value="singleclick">Single-click</option>

examples/shaded-relief.html

@@ -28,17 +28,17 @@ tags: "raster, shaded relief"
 <div id="map" class="map"></div>
 <table class="controls">
   <tr>
-    <td>vertical exaggeration:</td>
+    <td><label for="vert">vertical exaggeration:</label></td>
     <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
     <td><span id="vertOut"></span> x</td>
   </tr>
   <tr>
-    <td>sun elevation:</td>
+    <td><label for="sunEl">sun elevation:</label></td>
     <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
     <td><span id="sunElOut"></span> °</td>
   </tr>
   <tr>
-    <td>sun azimuth:</td>
+    <td><label for="sunAz">sun azimuth:</label></td>
     <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
     <td><span id="sunAzOut"></span> °</td>
   </tr>

examples/snap.html

@@ -24,7 +24,7 @@ tags: "draw, edit, modify, vector, snap"
     </label>
   </div>
   <div class="form-group">
-    <label>Draw type &nbsp;</label>
+    <label for="draw-type">Draw type &nbsp;</label>
     <select name="draw-type" id="draw-type">
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>

examples/tracing.html

@@ -13,7 +13,7 @@ tags: "draw, trace, snap, vector, topology"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Polygon">Polygon</option>
     <option value="LineString">LineString</option>

examples/vector-esri-edit.html

@@ -10,7 +10,7 @@ resources:
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Draw or modify &nbsp;</label>
+  <label for="type">Draw or modify &nbsp;</label>
   <select id="type">
     <option value="DRAW">Draw</option>
     <option value="MODIFY">Modify</option>

examples/vector-labels.html

@@ -16,7 +16,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-points" type="button" value="Refresh" />
   <h2>Points</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="points-text">Text: </label>
     <select id="points-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
@@ -24,7 +24,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="points-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="points-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -41,7 +41,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="points-align">Align: </label>
     <select id="points-align">
       <option value="center" selected="selected">Center</option>
       <option value="end">End</option>
@@ -50,7 +50,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="points-baseline">Baseline: </label>
     <select id="points-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -60,14 +60,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="points-rotation">Rotation: </label>
     <select id="points-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="points-font">Font: </label>
     <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
       <option value="'Courier New'">Courier New</option>
@@ -75,50 +75,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="points-weight">Weight: </label>
     <select id="points-weight">
       <option value="bold">Bold</option>
       <option value="normal" selected="selected">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="points-placement">Placement: </label>
     <select disabled id="points-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="points-maxangle">Max Angle: </label>
     <select disabled id="points-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="points-overflow">Exceed Len: </label>
     <select disabled id="points-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="points-size">Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
-    <label>Line height: </label>
+    <label for="points-height">Line height: </label>
     <input type="text" value="1" id="points-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="points-offset-x">Offset X: </label>
     <input type="text" value="0" id="points-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="points-offset-y">Offset Y: </label>
     <input type="text" value="0" id="points-offset-y" />
     <br />
-    <label>Color:</label>
+    <label for="points-color">Color: </label>
     <input type="text" value="#aa3300" id="points-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="points-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="points-outline" />
     <br />
-    <label title="Outline Width">O. Width:</label>
+    <label for="points-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="points-outline-width" />
   </div>
 </div>
@@ -127,7 +127,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-lines" type="button" value="Refresh" />
   <h2>Lines</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="lines-text">Text: </label>
     <select id="lines-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
@@ -135,7 +135,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap" selected="selected">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="lines-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="lines-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -152,7 +152,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="lines-align">Align: </label>
     <select id="lines-align">
       <option value="" selected="selected"></option>
       <option value="center">Center</option>
@@ -162,7 +162,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="lines-baseline">Baseline: </label>
     <select id="lines-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -172,14 +172,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="lines-rotation">Rotation: </label>
     <select id="lines-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="lines-font">Font: </label>
     <select id="lines-font">
       <option value="Arial">Arial</option>
       <option value="'Courier New'" selected="selected">Courier New</option>
@@ -187,50 +187,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="lines-weight">Weight: </label>
     <select id="lines-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="lines-placement">Placement: </label>
     <select id="lines-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="lines-maxangle">Max Angle: </label>
     <select id="lines-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="lines-overflow">Exceed Len: </label>
     <select id="lines-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="lines-size">Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
-    <label>Line height: </label>
+    <label for="lines-height">Line height: </label>
     <input type="text" value="1.2" id="lines-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="lines-offset-x">Offset X: </label>
     <input type="text" value="0" id="lines-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="lines-offset-y">Offset Y: </label>
     <input type="text" value="0" id="lines-offset-y" />
     <br />
-    <label>Color:</label>
+    <label for="lines-color">Color: </label>
     <input type="text" value="green" id="lines-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="lines-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="lines-outline" />
     <br />
-    <label title="Outline Width">O. Width:</label>
+    <label for="lines-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="lines-outline-width" />
   </div>
 </div>
@@ -239,7 +239,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-polygons" type="button" value="Refresh" />
   <h2>Polygons</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="polygons-text">Text: </label>
     <select id="polygons-text">
       <option value="hide">Hide</option>
       <option value="normal" selected="selected">Normal</option>
@@ -247,7 +247,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="polygons-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="polygons-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -264,7 +264,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="polygons-align">Align: </label>
     <select id="polygons-align">
       <option value="" selected="selected"></option>
       <option value="center">Center</option>
@@ -274,7 +274,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="polygons-baseline">Baseline: </label>
     <select id="polygons-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -284,14 +284,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="polygons-rotation">Rotation: </label>
     <select id="polygons-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="polygons-font">Font: </label>
     <select id="polygons-font">
       <option value="Arial">Arial</option>
       <option value="'Courier New'">Courier New</option>
@@ -299,50 +299,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana" selected="selected">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="polygons-weight">Weight: </label>
     <select id="polygons-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="polygons-placement">Placement: </label>
     <select id="polygons-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="polygons-maxangle">Max Angle: </label>
     <select id="polygons-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="polygons-overflow">Exceed Len: </label>
     <select id="polygons-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="polygons-size">Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />
-    <label>Line height: </label>
+    <label for="polygons-height">Line height: </label>
     <input type="text" value="1" id="polygons-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="polygons-offset-x">Offset X: </label>
     <input type="text" value="0" id="polygons-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="polygons-offset-y">Offset Y: </label>
     <input type="text" value="0" id="polygons-offset-y" />
     <br />
-    <label>Color:</label>
+    <label for="polygons-color">Color: </label>
     <input type="text" value="blue" id="polygons-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="polygons-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="polygons-outline" />
     <br />
-    <label title="Outline Width">O. Width:</label>
+    <label for="polygons-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="polygons-outline-width" />
   </div>
 </div>

examples/vector-tile-selection.html

@@ -15,7 +15,7 @@ tags: "vector tiles, selection"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Action type &nbsp;</label>
+  <label for="type">Action type &nbsp;</label>
   <select id="type" class="form-control">
     <option value="singleselect" selected>Single Select</option>
     <option value="multiselect">Multi Select</option>

examples/webgl-points-layer.html

@@ -70,7 +70,7 @@ experimental: true
 ---
 
 <div id="map" class="map"></div>
-<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
+Choose a predefined style from the list below or edit it as JSON manually.
 <select id="style-select">
   <option value="icons">Icons</option>
   <option value="triangles">Triangles, color related to population</option>