diff --git a/src/components/InteractiveDendrogram.vue b/src/components/InteractiveDendrogram.vue index 2228361cc96e22d0636d774a4878f77c064d032a..3669787eba46ce90f1edbb5fbeb1bae3b5142a32 100644 --- a/src/components/InteractiveDendrogram.vue +++ b/src/components/InteractiveDendrogram.vue @@ -9,7 +9,8 @@ <div id="text2" class="text-container tooltip-width"> <em>Click on the diagram to see the different vulnerability indicators studied in relation to water insecurity. The edges of the diagram are thicker for more well studied topics.</em> </div> - <div id="dendrogram-container"></div> + <div id="dendrogram-container" + aria-label="Dendrogram showing nested hierarchy of vulnerability indicators related to water insecurity. Indicators fall within one of 6 dimensions: demographic characteristics, exposure to stressors, health, land tenure, living conditions, risk perception, and socioeconomic status. Within the dimensions there were 50 determinants that individual indicators, or data variables fit within. The most well studied were demographic characteristics of ethnicity and race and related to age. Similarly, socioeconomic variables related to income, wealth, and education were relatively well studied. Exposure to various physical conditions were also well studied. To access the data, including the number of studies for each indicator and their relationship with vulnerability, go to the csv provided: https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572"></div> <div id="text2" class="text-container"> <p v-html="metaText.paragraph2"></p> </div> @@ -183,7 +184,8 @@ function createDendrogram(result) { .style('height', 'auto') .style('font-size', textSize) .style('font-weight', 600) - .style('user-select', 'none'); + .style('user-select', 'none') + .attr('aria-hidden', 'true'); // Make SVG hidden for screen readers; const gLink = svg.append('g') .attr('fill', 'none')