Merge pull request #146 from empowerplan/improve/accessibility

Improve/accessibility

CHANGELOG.md

@@ -15,6 +15,9 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - 404 errors for missing MVTs
 - truncated tooltips
 
+### Changed
+- improve accessibility
+
 ## [1.0.0] - 2024-05-07
 ### Added
 - light and dark basemaps for data visualization

digiplan/map/charts/capacity.json

@@ -4,6 +4,12 @@
     "right": "30%",
     "bottom": "5%"
   },
+  "aria": {
+    "enabled": true,
+    "label": {
+      "description": "Diese Grafik zeigt {title.text}, bestehend aus {legend.data}."
+    }
+  },
   "legend": {
     "data": [
       "Wind",

digiplan/map/charts/detailed_overview.json

@@ -12,6 +12,9 @@
     }
   },
   "tooltip": {},
+  "aria": {
+    "enabled": true
+  },
   "grid": {
     "top": "10%",
     "left": "3%",

digiplan/map/charts/electricity_autarky.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "25%"
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "value",
     "show": true,

digiplan/map/charts/electricity_demand.json

@@ -4,6 +4,12 @@
       "right": "30%",
       "bottom": "25%"
     },
+    "aria": {
+      "enabled": true,
+      "label": {
+        "description": "Diese Grafik zeigt {title.text}, bestehend aus {legend.data}."
+      }
+    },
     "legend": {
       "data": [
         "Haushalte",

digiplan/map/charts/electricity_ghg.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "25%"
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "value",
     "show": true,

digiplan/map/charts/electricity_overview.json

@@ -6,6 +6,9 @@
     "bottom": "30%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "yAxis": {
     "data": ["Ziel Brandenburg 2040", "Ziel Brandenburg 2030", "Dein Szenario", "2023"],
     "axisLine": { "onZero": true },

digiplan/map/charts/general_options.json

@@ -12,6 +12,9 @@
     "bottom": "18%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "textStyle": {
     "fontFamily": "Roboto",
     "fontSize": 14,

digiplan/map/charts/heat_centralized.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "28%"
   },
+  "aria": {
+    "enabled": true
+  },
   "legend": {
     "bottom": "0",
     "itemGap": 15

digiplan/map/charts/heat_decentralized.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "28%"
   },
+  "aria": {
+    "enabled": true
+  },
   "legend": {
     "bottom": "0",
     "itemGap": 15

digiplan/map/charts/heat_demand.json

@@ -4,6 +4,12 @@
       "right": "30%",
       "bottom": "28%"
     },
+    "aria": {
+      "enabled": true,
+      "label": {
+        "description": "Diese Grafik zeigt {title.text}, bestehend aus {legend.data}."
+      }
+    },
     "legend": {
       "data": [
         "Haushalte",

digiplan/map/charts/mobility_ghg.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "18%"
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "value",
     "show": true,

digiplan/map/charts/mobility_overview.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "18%"
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "value",
     "show": true,

digiplan/map/charts/onboarding_pv_ground.json

@@ -3,6 +3,9 @@
     "data": ["Installierte Leistung", "Anlagenanzahl"],
     "itemGap": 15
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": [
     {
       "type": "category",

digiplan/map/charts/onboarding_pv_roof.json

@@ -3,6 +3,9 @@
     "data": ["Installierte Leistung", "Anlagenanzahl"],
     "itemGap": 15
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": [
     {
       "type": "category",

digiplan/map/charts/onboarding_wind.json

@@ -3,6 +3,9 @@
     "data": ["Installierte Leistung", "Anlagenanzahl"],
     "itemGap": 15
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": [
     {
       "type": "category",

digiplan/map/charts/overview_heat.json

@@ -2,6 +2,9 @@
   "grid": {
     "bottom": "18%"
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "value",
     "show": true,

digiplan/map/charts/population.json

@@ -3,6 +3,12 @@
   "grid": {
     "top": "24%"
   },
+  "aria": {
+    "enabled": true,
+    "label": {
+      "description": "Diese Grafik zeigt {title.text}."
+    }
+  },
   "xAxis": {
     "type": "time",
     "xAxisLabel":{

digiplan/map/charts/pv_ground_areas.json

@@ -16,6 +16,9 @@
     "bottom": "14%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "category",
     "data": ["Klassische PV", "Agri-PV\n(vertikal)", "Agri-PV\n(Dauerkulturen)"]

digiplan/map/charts/pv_ground_capacity.json

@@ -16,6 +16,9 @@
     "bottom": "14%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "category",
     "data": ["2010", "2015", "2020", "2023**", "Dein\nSzenario***"],

digiplan/map/charts/pv_roof_areas.json

@@ -16,6 +16,9 @@
     "bottom": "14%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "category",
     "data": ["Dein Szenario"]

digiplan/map/charts/pv_roof_capacity.json

@@ -16,6 +16,9 @@
     "bottom": "14%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "category",
     "data": ["2010", "2015", "2020", "2023", "Dein\nSzenario**"],

digiplan/map/charts/renewable_electricity_production.json

@@ -4,6 +4,12 @@
     "right": "30%",
     "bottom": "25%"
   },
+  "aria": {
+    "enabled": true,
+    "label": {
+      "description": "Diese Grafik zeigt {title.text}, bestehend aus {legend.data}."
+    }
+  },
   "legend": {
     "data": [
       "Wind",

digiplan/map/charts/wind_areas.json

@@ -5,6 +5,9 @@
       "type": "shadow"
     }
   },
+  "aria": {
+    "enabled": true
+  },
   "legend": {
     "data": ["Fläche (ha)", "% der Regionsfläche"],
     "itemGap": 15

digiplan/map/charts/wind_capacity.json

@@ -16,6 +16,9 @@
     "bottom": "14%",
     "containLabel": true
   },
+  "aria": {
+    "enabled": true
+  },
   "xAxis": {
     "type": "category",
     "data": ["2010", "2015", "2020", "2023", "Dein\nSzenario*"],

digiplan/map/charts/wind_turbines.json

@@ -3,6 +3,12 @@
   "grid": {
     "top": "24%"
   },
+  "aria": {
+    "enabled": true,
+    "label": {
+      "description": "Diese Grafik zeigt {title.text}."
+    }
+  },
   "xAxis": {
     "type": "category",
     "boundaryGap": true,

digiplan/static/js/elements.js

@@ -106,3 +106,10 @@ document.addEventListener('DOMContentLoaded', function() {
     console.error('The required elements were not found in the DOM.');
   }
 });
+
+// Update aria-checked attribute for switches
+document.querySelectorAll('.layer__switch').forEach(checkbox => {
+  checkbox.addEventListener('change', event => {
+    event.target.setAttribute('aria-checked', event.target.checked.toString());
+  });
+});

digiplan/static/js/scenarios.js

@@ -15,9 +15,13 @@ let currentScenario = null;
 const scenarioPanels = ["panelCard1", "panelCard2", "panelCard3"];
 
 for (const scenarioPanel of scenarioPanels) {
-  document
-    .getElementById(scenarioPanel)
-    .addEventListener("click", scenarioCardClicked);
+  const panelElement = document.getElementById(scenarioPanel);
+  panelElement.addEventListener("click", scenarioCardClicked);
+  panelElement.addEventListener("keydown", function (event) {
+    if (event.key === "Enter" || event.key === " ") {
+      scenarioCardClicked(event);
+    }
+  });
 }
 
 Array.from(document.getElementsByClassName("scenarios__btn")).forEach(
@@ -76,6 +80,7 @@ function selectScenario(msg) {
 }
 
 function scenarioCardClicked(event) {
+  event.preventDefault(); // Prevent default action for keyboard events
   const scenarioCardNumber = parseInt(event.currentTarget.id.slice(-1));
   selectScenarioCard(scenarioCardNumber);
 }

digiplan/static/scss/components/_scenarios.scss

@@ -28,6 +28,7 @@
   &__name {
     @extend .d-inline-block;
     @extend .fw-bold;
+    @extend .fs-7;
     @extend .pe-2;
   }
 
@@ -150,7 +151,7 @@
     @extend .justify-content-end;
     @extend .fs-8;
     @extend .fw-bold;
-    color: $gray-500;
+    color: $gray-600;
 
     span {
       @extend .d-inline-block;