Add labels to form elements for accessibility

Replaced <span> tags with <label> tags in multiple sections of the configuration_ref_m.html template. This modification ensures better accessibility compliance by clearly linking labels with their corresponding input fields. Signed-off-by: Jose Borreguero <[email protected]>
neutrons · Oct 30, 2024 · bc10712 · bc10712
1 parent 324f6e4
commit bc10712
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html b/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
@@ -147,9 +147,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max }}
         </td>
     </tr>
@@ -173,9 +173,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min'>Bck<sub>min</sub></label>
             {{ options_form.bck_min }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label'  for='bck_max'>Bck<sub>max</sub></label>
             {{ options_form.bck_max }}
         </td>
     </tr>
@@ -191,7 +191,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width }}
+            <label for='bck_width'>Pixels on each side</label> {{ options_form.bck_width }}
         </td>
     </tr>
 
@@ -211,9 +211,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min_s2'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min_s2 }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max_s2'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max_s2 }}
         </td>
     </tr>
@@ -237,9 +237,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min_s2'>Bck<sub>min</sub></label>
             {{ options_form.bck_min_s2 }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label' for='bck_max_s2'>Bck<sub>max</sub></label>
             {{ options_form.bck_max_s2 }}
         </td>
     </tr>
@@ -255,7 +255,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width_s2 }}
+            <label for='bck_width_s2'>Pixels on each side</label> {{ options_form.bck_width_s2 }}
         </td>
     </tr>
 
@@ -276,9 +276,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min_s3'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min_s3 }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max_s3'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max_s3 }}
         </td>
     </tr>
@@ -302,9 +302,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min_s3'>Bck<sub>min</sub></label>
             {{ options_form.bck_min_s3 }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label' for='bck_max_s3'>Bck<sub>max</sub></label>
             {{ options_form.bck_max_s3 }}
         </td>
     </tr>
@@ -320,7 +320,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width_s3 }}
+            <label for='bck_width_s3'>Pixels on each side</label> {{ options_form.bck_width_s3 }}
         </td>
     </tr>