svg chart aria labels

the-pudding · Jul 16, 2024 · 870bc03 · 870bc03
1 parent 07d543e
commit 870bc03
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/src/components/article/ForceBubbles.svelte b/src/components/article/ForceBubbles.svelte
@@ -233,6 +233,8 @@
         "instagram":"Instagram profiles",
         "article":"Articles"
     }
+    $: chartTitle = `Sleep training opinions across ${legendText[renderedData[0].type]}`;
+    $: chartDesc = `This bubble chart visualizes the division of opinions on sleep training in ${legendText[renderedData[0].type]}. Each bubble represents a data point, with its size indicating the influence of the opinion. The bubbles are grouped into three clusters based on the position of the data point, whether Advocating, Opposed to or without a position on sleep training.`;
 
 </script>
 <div class="bubbles">
@@ -249,12 +251,10 @@
         aria-labelledby="chartTitle chartDesc"
     >
         <title id="chartTitle" style="opacity: 0;">
-                {legendText[renderedData[0].type]} Bubble Chart
+            {chartTitle}
         </title>
         <desc id="chartDesc" style="opacity: 0;">
-                This bubble chart visualizes {legendText[renderedData[0].type]}. 
-                Each bubble represents a data point, with its size indicating the value.
-                The bubbles are grouped into clusters based on their type.
+            {chartDesc}
         </desc>
         <g style="transform: translate(0,0);">
             {#if nodes}

diff --git a/src/components/article/Map.svelte b/src/components/article/Map.svelte
@@ -87,7 +87,14 @@
   <svg 
     width={$viewport.width}
     height={$viewport.height}
+    aria-labelledby="chartTitle chartDesc"
   >
+    <title id="chartTitle" style="opacity: 0;">
+      Sleep training studies mapped by their country of publication
+    </title>
+    <desc id="chartDesc" style="opacity: 0;">
+      This chart visualizes the locations of sleep training studies on a map, 85% were published in Western countries.
+    </desc>
     <g>
       {#if pathGenerator}
         <path class="earth" d={pathGenerator({ type: 'Sphere' })} />

diff --git a/src/components/article/Scroll.svelte b/src/components/article/Scroll.svelte
@@ -41,7 +41,7 @@
 
 	@media only screen and (max-width: 600px) {
 		.step-content p {
-			font-size: 14px !important;
+			font-size: 16px !important;
 		}
 	}
 </style>
diff --git a/src/components/article/Timeline.svelte b/src/components/article/Timeline.svelte
@@ -62,7 +62,13 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="timeline-container" style="width: {$viewport.width}px; height: {$viewport.height}px;">
-  <svg height={$viewport.height} width={$viewport.width} >
+  <svg height={$viewport.height} width={$viewport.width} aria-labelledby="chartTitle chartDesc" >
+    <title id="chartTitle" style="opacity: 0;">
+      Sleep training studies plotted by their year of publication
+    </title>
+    <desc id="chartDesc" style="opacity: 0;">
+      This chart visualizes the publication date of sleep training studies on a timeline, all were published between 1980 and 2022.
+    </desc>
     <g >
       <line x1={$viewport.width / 2} y1={75} x2={$viewport.width / 2} y2={$viewport.height -50} stroke="white" />
       {#if nodes.length > 0}