diff --git a/.gitignore b/.gitignore
index a8651ff3d84..c98987c7232 100755
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,4 @@ dist/
 .wrangler/
 .nx/cache
 .dev.vars
+**/tsup.config.bundled*.mjs
diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
index d00ac03367e..56053b52808 100644
--- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
+++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
@@ -643,9 +643,11 @@ export class MarkdownTextWrap extends React.Component<MarkdownTextWrapProps> {
         {
             textProps,
             detailsMarker = "superscript",
+            id,
         }: {
             textProps?: React.SVGProps<SVGTextElement>
             detailsMarker?: DetailsMarker
+            id?: string
         } = {}
     ): JSX.Element | null {
         const { fontSize, lineHeight } = this
@@ -670,7 +672,7 @@ export class MarkdownTextWrap extends React.Component<MarkdownTextWrapProps> {
             yOffset + lineHeight * fontSize * lineIndex
 
         return (
-            <g className="markdown-text-wrap">
+            <g id={id} className="markdown-text-wrap">
                 <text
                     x={x.toFixed(1)}
                     y={yOffset.toFixed(1)}
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
index 257cb74d1a7..89a49313df7 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
@@ -257,7 +257,10 @@ export class TextWrap {
     render(
         x: number,
         y: number,
-        { textProps }: { textProps?: React.SVGProps<SVGTextElement> } = {}
+        {
+            textProps,
+            id,
+        }: { textProps?: React.SVGProps<SVGTextElement>; id?: string } = {}
     ): JSX.Element | null {
         const { props, lines, fontSize, fontWeight, lineHeight } = this
 
@@ -267,6 +270,7 @@ export class TextWrap {
 
         return (
             <text
+                id={id}
                 fontSize={fontSize.toFixed(2)}
                 fontWeight={fontWeight}
                 x={correctedX.toFixed(1)}
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
index edbcdb94722..e1a3e4d8205 100644
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -9,6 +9,7 @@ import {
     VerticalAlign,
     dyFromAlign,
     textAnchorFromAlign,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
 import classNames from "classnames"
@@ -37,7 +38,10 @@ export class VerticalAxisGridLines extends React.Component<{
         axis.range = bounds.yRange()
 
         return (
-            <g className={classNames("AxisGridLines", "horizontalLines")}>
+            <g
+                id={makeIdForHumanConsumption("horizontal-grid-lines")}
+                className={classNames("AxisGridLines", "horizontalLines")}
+            >
                 {axis.getTickValues().map((t, i) => {
                     const color = t.faint
                         ? FAINT_TICK_COLOR
@@ -47,6 +51,10 @@ export class VerticalAxisGridLines extends React.Component<{
 
                     return (
                         <line
+                            id={makeIdForHumanConsumption(
+                                "grid-line",
+                                t.value.toString()
+                            )}
                             key={i}
                             x1={bounds.left.toFixed(2)}
                             y1={axis.place(t.value)}
@@ -86,7 +94,10 @@ export class HorizontalAxisGridLines extends React.Component<{
         axis.range = bounds.xRange()
 
         return (
-            <g className={classNames("AxisGridLines", "verticalLines")}>
+            <g
+                id={makeIdForHumanConsumption("vertical-grid-lines")}
+                className={classNames("AxisGridLines", "verticalLines")}
+            >
                 {axis.getTickValues().map((t, i) => {
                     const color = t.faint
                         ? FAINT_TICK_COLOR
@@ -96,6 +107,10 @@ export class HorizontalAxisGridLines extends React.Component<{
 
                     return (
                         <line
+                            id={makeIdForHumanConsumption(
+                                "grid-line",
+                                t.value.toString()
+                            )}
                             key={i}
                             x1={axis.place(t.value)}
                             y1={bounds.bottom.toFixed(2)}
@@ -131,6 +146,7 @@ export class HorizontalAxisZeroLine extends React.Component<{
 
         return (
             <g
+                id={makeIdForHumanConsumption("vertical-zero-line")}
                 className={classNames(
                     "AxisGridLines",
                     "verticalLines",
@@ -213,7 +229,10 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
         )
 
         return (
-            <g className="DualAxisView">
+            <g
+                id={makeIdForHumanConsumption("dual-axis")}
+                className="DualAxisView"
+            >
                 {horizontalAxisComponent}
                 {verticalAxisComponent}
                 {verticalGridlines}
@@ -243,23 +262,19 @@ export class VerticalAxisComponent extends React.Component<{
         } = this.props
         const { tickLabels, labelTextWrap } = verticalAxis
 
-        const tickMarks = showTickMarks ? (
-            <VerticalAxisTickMarks
-                tickMarkYPositions={tickLabels.map((label) =>
-                    verticalAxis.place(label.value)
-                )}
-                tickMarkLeftPosition={bounds.left + verticalAxis.width}
-                color={SOLID_TICK_COLOR}
-            />
-        ) : undefined
-
         return (
-            <g className="VerticalAxis">
+            <g
+                id={makeIdForHumanConsumption("vertical-axis")}
+                className="VerticalAxis"
+            >
                 {labelTextWrap &&
                     labelTextWrap.renderSVG(
                         -verticalAxis.rangeCenter - labelTextWrap.width / 2,
                         bounds.left,
                         {
+                            id: makeIdForHumanConsumption(
+                                "vertical-axis-label"
+                            ),
                             textProps: {
                                 transform: "rotate(-90)",
                                 fill: labelColor || GRAPHER_DARK_TEXT,
@@ -267,29 +282,50 @@ export class VerticalAxisComponent extends React.Component<{
                             detailsMarker,
                         }
                     )}
-                {tickMarks}
-                {tickLabels.map((label, i) => {
-                    const { y, xAlign, yAlign, formattedValue } = label
-                    return (
-                        <text
-                            key={i}
-                            x={(
-                                bounds.left +
-                                verticalAxis.width -
-                                verticalAxis.labelPadding
-                            ).toFixed(2)}
-                            y={y}
-                            dy={dyFromAlign(yAlign ?? VerticalAlign.middle)}
-                            textAnchor={textAnchorFromAlign(
-                                xAlign ?? HorizontalAlign.right
-                            )}
-                            fill={tickColor || GRAPHER_DARK_TEXT}
-                            fontSize={verticalAxis.tickFontSize}
-                        >
-                            {formattedValue}
-                        </text>
-                    )
-                })}
+                {showTickMarks && (
+                    <g id={makeIdForHumanConsumption("tick-marks")}>
+                        {tickLabels.map((label, i) => (
+                            <VerticalAxisTickMark
+                                key={i}
+                                tickMarkYPosition={verticalAxis.place(
+                                    label.value
+                                )}
+                                tickMarkLeftPosition={
+                                    bounds.left + verticalAxis.width
+                                }
+                                color={SOLID_TICK_COLOR}
+                            />
+                        ))}
+                    </g>
+                )}
+                <g id={makeIdForHumanConsumption("tick-labels")}>
+                    {tickLabels.map((label, i) => {
+                        const { y, xAlign, yAlign, formattedValue } = label
+                        return (
+                            <text
+                                key={i}
+                                id={makeIdForHumanConsumption(
+                                    "tick-label",
+                                    formattedValue
+                                )}
+                                x={(
+                                    bounds.left +
+                                    verticalAxis.width -
+                                    verticalAxis.labelPadding
+                                ).toFixed(2)}
+                                y={y}
+                                dy={dyFromAlign(yAlign ?? VerticalAlign.middle)}
+                                textAnchor={textAnchorFromAlign(
+                                    xAlign ?? HorizontalAlign.right
+                                )}
+                                fill={tickColor || GRAPHER_DARK_TEXT}
+                                fontSize={verticalAxis.tickFontSize}
+                            >
+                                {formattedValue}
+                            </text>
+                        )
+                    })}
+                </g>
             </g>
         )
     }
@@ -329,10 +365,11 @@ export class HorizontalAxisComponent extends React.Component<{
             preferredAxisPosition,
             labelColor,
             tickColor,
-            tickMarkWidth,
+            tickMarkWidth = 1,
             detailsMarker,
         } = this.props
         const { tickLabels, labelTextWrap: label, labelOffset, orient } = axis
+        const tickSize = 5
         const horizontalAxisLabelsOnTop = orient === Position.top
         const labelYPosition = horizontalAxisLabelsOnTop
             ? bounds.top
@@ -342,49 +379,61 @@ export class HorizontalAxisComponent extends React.Component<{
             ? bounds.top + axis.height - 5
             : preferredAxisPosition ?? bounds.bottom
 
-        const tickMarks = showTickMarks ? (
-            <HorizontalAxisTickMarks
-                tickMarkTopPosition={tickMarksYPosition}
-                tickMarkXPositions={tickLabels.map((label): number =>
-                    axis.place(label.value)
-                )}
-                color={SOLID_TICK_COLOR}
-                width={tickMarkWidth}
-            />
-        ) : undefined
-
         const tickLabelYPlacement = horizontalAxisLabelsOnTop
             ? bounds.top + labelOffset + 10
             : bounds.bottom - labelOffset
+
         return (
-            <g className="HorizontalAxis">
+            <g
+                id={makeIdForHumanConsumption("horizontal-axis")}
+                className="HorizontalAxis"
+            >
                 {label &&
                     label.renderSVG(
                         axis.rangeCenter - label.width / 2,
                         labelYPosition,
                         {
+                            id: makeIdForHumanConsumption(
+                                "horizontal-axis-label"
+                            ),
                             textProps: {
                                 fill: labelColor || GRAPHER_DARK_TEXT,
                             },
                             detailsMarker,
                         }
                     )}
-                {tickMarks}
-                {tickLabels.map((label, i) => {
+                {tickLabels.map((label) => {
                     const { x, xAlign, formattedValue } = label
                     return (
-                        <text
-                            key={i}
-                            x={x}
-                            y={tickLabelYPlacement}
-                            fill={tickColor || GRAPHER_DARK_TEXT}
-                            textAnchor={textAnchorFromAlign(
-                                xAlign ?? HorizontalAlign.center
+                        <g
+                            id={makeIdForHumanConsumption(
+                                "tick",
+                                formattedValue
                             )}
-                            fontSize={axis.tickFontSize}
+                            key={formattedValue}
                         >
-                            {formattedValue}
-                        </text>
+                            {showTickMarks && (
+                                <line
+                                    x1={axis.place(label.value)}
+                                    y1={tickMarksYPosition - tickMarkWidth / 2}
+                                    x2={axis.place(label.value)}
+                                    y2={tickMarksYPosition + tickSize}
+                                    stroke={SOLID_TICK_COLOR}
+                                    strokeWidth={tickMarkWidth}
+                                />
+                            )}
+                            <text
+                                x={x}
+                                y={tickLabelYPlacement}
+                                fill={tickColor || GRAPHER_DARK_TEXT}
+                                textAnchor={textAnchorFromAlign(
+                                    xAlign ?? HorizontalAlign.center
+                                )}
+                                fontSize={axis.tickFontSize}
+                            >
+                                {formattedValue}
+                            </text>
+                        </g>
                     )
                 })}
             </g>
@@ -392,56 +441,54 @@ export class HorizontalAxisComponent extends React.Component<{
     }
 }
 
-export class HorizontalAxisTickMarks extends React.Component<{
+export class HorizontalAxisTickMark extends React.Component<{
     tickMarkTopPosition: number
-    tickMarkXPositions: number[]
+    tickMarkXPosition: number
     color: string
     width?: number
+    id?: string
 }> {
-    render(): JSX.Element[] {
-        const { tickMarkTopPosition, tickMarkXPositions, color, width } =
+    render(): JSX.Element {
+        const { tickMarkTopPosition, tickMarkXPosition, color, width, id } =
             this.props
         const tickSize = 5
         const tickBottom = tickMarkTopPosition + tickSize
-        return tickMarkXPositions.map((tickMarkPosition, index) => {
-            return (
-                <line
-                    key={index}
-                    x1={tickMarkPosition}
-                    y1={tickMarkTopPosition}
-                    x2={tickMarkPosition}
-                    y2={tickBottom}
-                    stroke={color}
-                    strokeWidth={width}
-                />
-            )
-        })
+        return (
+            <line
+                id={id}
+                x1={tickMarkXPosition}
+                y1={tickMarkTopPosition}
+                x2={tickMarkXPosition}
+                y2={tickBottom}
+                stroke={color}
+                strokeWidth={width}
+            />
+        )
     }
 }
 
-export class VerticalAxisTickMarks extends React.Component<{
+export class VerticalAxisTickMark extends React.Component<{
     tickMarkLeftPosition: number
-    tickMarkYPositions: number[]
+    tickMarkYPosition: number
     color: string
     width?: number
+    id?: string
 }> {
-    render(): JSX.Element[] {
-        const { tickMarkYPositions, tickMarkLeftPosition, color, width } =
+    render(): JSX.Element {
+        const { tickMarkYPosition, tickMarkLeftPosition, color, width, id } =
             this.props
         const tickSize = 5
         const tickRight = tickMarkLeftPosition + tickSize
-        return tickMarkYPositions.map((tickMarkPosition, index) => {
-            return (
-                <line
-                    key={index}
-                    x1={tickMarkLeftPosition}
-                    y1={tickMarkPosition}
-                    x2={tickRight}
-                    y2={tickMarkPosition}
-                    stroke={color}
-                    strokeWidth={width}
-                />
-            )
-        })
+        return (
+            <line
+                id={id}
+                x1={tickMarkLeftPosition}
+                y1={tickMarkYPosition}
+                x2={tickRight}
+                y2={tickMarkYPosition}
+                stroke={color}
+                strokeWidth={width}
+            />
+        )
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index 9f4127518c3..dfdb0c51232 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -18,6 +18,7 @@ import {
     HorizontalAlign,
     AxisAlign,
     uniqBy,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
@@ -424,7 +425,11 @@ export class DiscreteBarChart
             : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
 
         return (
-            <g ref={this.base} className="DiscreteBarChart">
+            <g
+                ref={this.base}
+                id={makeIdForHumanConsumption("discrete-bar-chart")}
+                className="DiscreteBarChart"
+            >
                 {this.hasProjectedData && (
                     <defs>
                         {/* passed to the legend as pattern for the
@@ -481,6 +486,10 @@ export class DiscreteBarChart
                     const result = (
                         <g
                             key={series.seriesName}
+                            id={makeIdForHumanConsumption(
+                                "bar",
+                                series.seriesName
+                            )}
                             className="bar"
                             transform={`translate(0, ${yOffset})`}
                         >
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index 7a05b4a79be..3c806f0d80c 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -6,6 +6,7 @@ import {
     DEFAULT_BOUNDS,
     exposeInstanceOnWindow,
     isEmpty,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { MarkdownTextWrap } from "@ourworldindata/components"
 import { Header, StaticHeader } from "../header/Header"
@@ -556,6 +557,7 @@ export class StaticCaptionedChart extends CaptionedChart {
         return (
             <>
                 <line
+                    id={makeIdForHumanConsumption("separator-line")}
                     x1={this.framePaddingHorizontal}
                     y1={this.bounds.height}
                     x2={
@@ -566,6 +568,7 @@ export class StaticCaptionedChart extends CaptionedChart {
                     stroke="#e7e7e7"
                 ></line>
                 <g
+                    id={makeIdForHumanConsumption("details")}
                     transform={`translate(15, ${
                         // + padding below the grey line
                         this.bounds.height + this.framePaddingVertical
@@ -628,7 +631,10 @@ export class StaticCaptionedChart extends CaptionedChart {
                     targetX={paddedBounds.x}
                     targetY={paddedBounds.y}
                 />
-                <g style={{ pointerEvents: "none" }}>
+                <g
+                    id={makeIdForHumanConsumption("chart-area")}
+                    style={{ pointerEvents: "none" }}
+                >
                     {/*
                      We cannot render a table to svg, but would rather display nothing at all to avoid issues.
                      See https://github.com/owid/owid-grapher/issues/3283
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx b/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
index 52e8e277152..661226f114a 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
@@ -7,6 +7,7 @@ import {
     SMALL_OWID_LOGO_SVG,
 } from "./LogosSVG"
 import { LogoOption } from "@ourworldindata/types"
+import { makeIdForHumanConsumption } from "@ourworldindata/utils"
 
 interface LogoAttributes {
     svg: string
@@ -92,6 +93,7 @@ export class Logo {
             (this.spec.svg.match(/<svg>(.*)<\/svg>/) || "")[1] || this.spec.svg
         return (
             <g
+                id={makeIdForHumanConsumption("logo")}
                 transform={`translate(${Math.round(
                     targetX
                 )}, ${targetY}) scale(${parseFloat(scale.toFixed(2))})`}
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index ca8cfe223bd..c9a9abfed8b 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -2,7 +2,12 @@ import React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import parseUrl from "url-parse"
-import { Bounds, DEFAULT_BOUNDS, getRelativeMouse } from "@ourworldindata/utils"
+import {
+    Bounds,
+    DEFAULT_BOUNDS,
+    getRelativeMouse,
+    makeIdForHumanConsumption,
+} from "@ourworldindata/utils"
 import {
     DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
     MarkdownTextWrap,
@@ -758,22 +763,29 @@ export class StaticFooter extends Footer<StaticFooterProps> {
 
         return (
             <g
+                id={makeIdForHumanConsumption("footer")}
                 className="SourcesFooter"
                 style={{
                     fill: textColor,
                 }}
             >
-                {sources.renderSVG(targetX, targetY)}
+                {sources.renderSVG(targetX, targetY, {
+                    id: makeIdForHumanConsumption("sources"),
+                })}
                 {this.showNote &&
                     note.renderSVG(
                         targetX,
                         targetY + sources.height + this.verticalPadding,
-                        { detailsMarker: this.manager.detailsMarkerInSvg }
+                        {
+                            id: makeIdForHumanConsumption("note"),
+                            detailsMarker: this.manager.detailsMarkerInSvg,
+                        }
                     )}
                 {showLicenseNextToSources
                     ? licenseAndOriginUrl.render(
                           targetX + maxWidth - licenseAndOriginUrl.width,
-                          targetY
+                          targetY,
+                          { id: makeIdForHumanConsumption("origin-url") }
                       )
                     : licenseAndOriginUrl.render(
                           targetX,
@@ -782,7 +794,8 @@ export class StaticFooter extends Footer<StaticFooterProps> {
                               (this.showNote
                                   ? note.height + this.verticalPadding
                                   : 0) +
-                              this.verticalPadding
+                              this.verticalPadding,
+                          { id: makeIdForHumanConsumption("origin-url") }
                       )}
             </g>
         )
diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
index 7bd664d1af0..61eee2b71ad 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -1,5 +1,10 @@
 import React from "react"
-import { DEFAULT_BOUNDS, range, LogoOption } from "@ourworldindata/utils"
+import {
+    DEFAULT_BOUNDS,
+    range,
+    LogoOption,
+    makeIdForHumanConsumption,
+} from "@ourworldindata/utils"
 import { MarkdownTextWrap, TextWrap } from "@ourworldindata/components"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
@@ -275,12 +280,13 @@ export class StaticHeader extends Header<StaticHeaderProps> {
         const { targetX: x, targetY: y } = this.props
         const { title, logo, subtitle, manager, maxWidth } = this
         return (
-            <g className="HeaderView">
+            <g id={makeIdForHumanConsumption("header")} className="HeaderView">
                 {logo &&
                     logo.height > 0 &&
                     logo.renderSVG(x + maxWidth - logo.width, y)}
                 {this.showTitle && (
                     <a
+                        id={makeIdForHumanConsumption("title")}
                         href={manager.canonicalUrl}
                         style={{
                             fontFamily:
@@ -302,6 +308,7 @@ export class StaticHeader extends Header<StaticHeaderProps> {
                                 ? title.height + this.subtitleMarginTop
                                 : 0),
                         {
+                            id: makeIdForHumanConsumption("subtitle"),
                             textProps: {
                                 fill: manager.secondaryColorInStaticCharts,
                             },
diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index bb2d9a28d36..47f7ef10d70 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -15,6 +15,7 @@ import {
     Color,
     HorizontalAlign,
     VerticalAlign,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import {
@@ -556,7 +557,11 @@ export class HorizontalNumericColorLegend extends HorizontalColorLegend {
         const bottomY = this.numericLegendY + height
 
         return (
-            <g ref={this.base} className="numericColorLegend">
+            <g
+                ref={this.base}
+                id={makeIdForHumanConsumption("numeric-color-legend")}
+                className="numericColorLegend"
+            >
                 {numericLabels.map((label, index) => (
                     <line
                         key={index}
@@ -788,81 +793,82 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
         const { activeColors, focusColors } = manager
 
         return (
-            <g>
-                <g className="categoricalColorLegend">
-                    {marks.map((mark, index) => {
-                        const isActive = activeColors?.includes(mark.bin.color)
-                        const isFocus = focusColors?.includes(mark.bin.color)
-
-                        const fill = mark.bin.patternRef
-                            ? `url(#${mark.bin.patternRef})`
-                            : mark.bin.color
-
-                        return (
-                            <g
-                                key={index}
-                                onMouseOver={(): void =>
-                                    manager.onLegendMouseOver
-                                        ? manager.onLegendMouseOver(mark.bin)
-                                        : undefined
-                                }
-                                onMouseLeave={(): void =>
-                                    manager.onLegendMouseLeave
-                                        ? manager.onLegendMouseLeave()
-                                        : undefined
+            <g
+                id={makeIdForHumanConsumption("categorical-color-legend")}
+                className="categoricalColorLegend"
+            >
+                {marks.map((mark, index) => {
+                    const isActive = activeColors?.includes(mark.bin.color)
+                    const isFocus = focusColors?.includes(mark.bin.color)
+
+                    const fill = mark.bin.patternRef
+                        ? `url(#${mark.bin.patternRef})`
+                        : mark.bin.color
+
+                    return (
+                        <g
+                            id={makeIdForHumanConsumption(
+                                "mark",
+                                mark.label.text
+                            )}
+                            key={index}
+                            onMouseOver={(): void =>
+                                manager.onLegendMouseOver
+                                    ? manager.onLegendMouseOver(mark.bin)
+                                    : undefined
+                            }
+                            onMouseLeave={(): void =>
+                                manager.onLegendMouseLeave
+                                    ? manager.onLegendMouseLeave()
+                                    : undefined
+                            }
+                            onClick={(): void =>
+                                manager.onLegendClick
+                                    ? manager.onLegendClick(mark.bin)
+                                    : undefined
+                            }
+                            style={{ cursor: "default" }}
+                        >
+                            {/* for hover interaction */}
+                            <rect
+                                x={this.legendX + mark.x}
+                                y={this.categoryLegendY + mark.y}
+                                height={mark.rectSize}
+                                width={
+                                    mark.width + SPACE_BETWEEN_CATEGORICAL_BINS
                                 }
-                                onClick={(): void =>
-                                    manager.onLegendClick
-                                        ? manager.onLegendClick(mark.bin)
-                                        : undefined
+                                fill="#fff"
+                                opacity={0}
+                            />
+                            <rect
+                                x={this.legendX + mark.x}
+                                y={this.categoryLegendY + mark.y}
+                                width={mark.rectSize}
+                                height={mark.rectSize}
+                                fill={
+                                    isActive || activeColors === undefined
+                                        ? fill
+                                        : "#ccc"
                                 }
-                                style={{ cursor: "default" }}
+                                stroke={manager.categoricalBinStroke}
+                                strokeWidth={0.4}
+                                opacity={manager.legendOpacity} // defaults to undefined which removes the prop
+                            />
+                            <text
+                                x={this.legendX + mark.label.bounds.x}
+                                y={this.categoryLegendY + mark.label.bounds.y}
+                                // we can't use dominant-baseline to do proper alignment since our svg-to-png library Sharp
+                                // doesn't support that (https://github.com/lovell/sharp/issues/1996), so we'll have to make
+                                // do with some rough positioning.
+                                dy={dyFromAlign(VerticalAlign.middle)}
+                                fontSize={mark.label.fontSize}
+                                fontWeight={isFocus ? "bold" : undefined}
                             >
-                                {/* for hover interaction */}
-                                <rect
-                                    x={this.legendX + mark.x}
-                                    y={this.categoryLegendY + mark.y}
-                                    height={mark.rectSize}
-                                    width={
-                                        mark.width +
-                                        SPACE_BETWEEN_CATEGORICAL_BINS
-                                    }
-                                    fill="#fff"
-                                    opacity={0}
-                                />
-                                <rect
-                                    x={this.legendX + mark.x}
-                                    y={this.categoryLegendY + mark.y}
-                                    width={mark.rectSize}
-                                    height={mark.rectSize}
-                                    fill={
-                                        isActive || activeColors === undefined
-                                            ? fill
-                                            : "#ccc"
-                                    }
-                                    stroke={manager.categoricalBinStroke}
-                                    strokeWidth={0.4}
-                                    opacity={manager.legendOpacity} // defaults to undefined which removes the prop
-                                />
-                                <text
-                                    x={this.legendX + mark.label.bounds.x}
-                                    y={
-                                        this.categoryLegendY +
-                                        mark.label.bounds.y
-                                    }
-                                    // we can't use dominant-baseline to do proper alignment since our svg-to-png library Sharp
-                                    // doesn't support that (https://github.com/lovell/sharp/issues/1996), so we'll have to make
-                                    // do with some rough positioning.
-                                    dy={dyFromAlign(VerticalAlign.middle)}
-                                    fontSize={mark.label.fontSize}
-                                    fontWeight={isFocus ? "bold" : undefined}
-                                >
-                                    {mark.label.text}
-                                </text>
-                            </g>
-                        )
-                    })}
-                </g>
+                                {mark.label.text}
+                            </text>
+                        </g>
+                    )
+                })}
             </g>
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 1f8d2416adb..425861b1eac 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -25,6 +25,7 @@ import {
     Color,
     HorizontalAlign,
     PrimitiveType,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
@@ -170,12 +171,16 @@ class Lines extends React.Component<LinesProps> {
             const strokeDasharray = series.isProjection ? "2,3" : undefined
 
             return (
-                <g key={index}>
+                <g
+                    id={makeIdForHumanConsumption("line", series.seriesName)}
+                    key={index}
+                >
                     {/*
                         Create a white outline around the lines so they're
                         easier to follow when they overlap.
                     */}
                     <path
+                        id={makeIdForHumanConsumption("outline")}
                         fill="none"
                         strokeLinecap="butt"
                         strokeLinejoin="round"
@@ -192,13 +197,14 @@ class Lines extends React.Component<LinesProps> {
                         )}
                     />
                     <MultiColorPolyline
+                        id={makeIdForHumanConsumption("polyline")}
                         points={series.placedPoints}
                         strokeLinejoin="round"
                         strokeWidth={this.strokeWidth}
                         strokeDasharray={strokeDasharray}
                     />
                     {showMarkers && (
-                        <g>
+                        <g id={makeIdForHumanConsumption("markers")}>
                             {series.placedPoints.map((value, index) => (
                                 <circle
                                     key={index}
@@ -217,7 +223,10 @@ class Lines extends React.Component<LinesProps> {
 
     private renderBackgroundGroups(): JSX.Element[] {
         return this.backgroundLines.map((series, index) => (
-            <g key={index}>
+            <g
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                key={index}
+            >
                 <path
                     key={getSeriesKey(series, "line")}
                     strokeLinecap="round"
@@ -240,7 +249,7 @@ class Lines extends React.Component<LinesProps> {
         const { bounds } = this
 
         return (
-            <g className="Lines">
+            <g id={makeIdForHumanConsumption("lines")} className="Lines">
                 <rect
                     x={Math.round(bounds.x)}
                     y={Math.round(bounds.y)}
@@ -761,6 +770,7 @@ export class LineChart
         return (
             <g
                 ref={this.base}
+                id={makeIdForHumanConsumption("line-chart")}
                 className="LineChart"
                 onMouseLeave={this.onCursorLeave}
                 onTouchEnd={this.onCursorLeave}
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index e4f9a9b55a2..0f362c788df 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -9,6 +9,7 @@ import {
     sortBy,
     sumBy,
     flatten,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { computed } from "mobx"
@@ -100,13 +101,17 @@ class Label extends React.Component<{
         const annotationColor = isFocus ? "#333" : "#ddd"
         return (
             <g
+                id={makeIdForHumanConsumption("mark", series.textWrap.text)}
                 className="legendMark"
                 onMouseOver={onMouseOver}
                 onMouseLeave={onMouseLeave}
                 onClick={onClick}
             >
                 {needsLines && (
-                    <g className="indicator">
+                    <g
+                        id={makeIdForHumanConsumption("connector")}
+                        className="indicator"
+                    >
                         <path
                             d={`M${markerX1},${series.origBounds.centerY} H${markerXMid} V${series.bounds.centerY} H${markerX2}`}
                             stroke={lineColor}
@@ -116,6 +121,7 @@ class Label extends React.Component<{
                     </g>
                 )}
                 <rect
+                    id={makeIdForHumanConsumption("background")}
                     x={x}
                     y={series.bounds.y}
                     width={series.bounds.width}
@@ -126,13 +132,17 @@ class Label extends React.Component<{
                 {series.textWrap.render(
                     needsLines ? markerX2 + MARKER_MARGIN : markerX1,
                     series.bounds.y,
-                    { textProps: { fill: textColor } }
+                    {
+                        id: makeIdForHumanConsumption("label"),
+                        textProps: { fill: textColor },
+                    }
                 )}
                 {series.annotationTextWrap &&
                     series.annotationTextWrap.render(
                         needsLines ? markerX2 + MARKER_MARGIN : markerX1,
                         series.bounds.y + series.textWrap.height,
                         {
+                            id: makeIdForHumanConsumption("annotation"),
                             textProps: {
                                 fill: annotationColor,
                                 className: "textAnnotation",
@@ -436,7 +446,10 @@ export class LineLegend extends React.Component<{
 
     render(): JSX.Element {
         return (
-            <g className="LineLabels">
+            <g
+                id={makeIdForHumanConsumption("line-labels")}
+                className="LineLabels"
+            >
                 {this.renderBackground()}
                 {this.renderFocus()}
             </g>
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
index f541a6ac52e..0797990e62f 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -1,5 +1,10 @@
 import { line as d3_line, curveLinear } from "d3-shape"
-import { guid, Bounds, PointVector } from "@ourworldindata/utils"
+import {
+    guid,
+    Bounds,
+    PointVector,
+    makeIdForHumanConsumption,
+} from "@ourworldindata/utils"
 import React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
@@ -78,7 +83,10 @@ export class ComparisonLine extends React.Component<{
         const { linePath, renderUid, placedLabel } = this
 
         return (
-            <g className="comparisonLine">
+            <g
+                id={makeIdForHumanConsumption("comparison-line")}
+                className="comparisonLine"
+            >
                 <defs>
                     <clipPath id={`axisBounds-${renderUid}`}>
                         <rect
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
index 4735689c474..4634abd5cdc 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
@@ -3,6 +3,7 @@ import { computed } from "mobx"
 import { Triangle } from "./Triangle"
 import { TextWrap } from "@ourworldindata/components"
 import { BASE_FONT_SIZE } from "../core/GrapherConstants"
+import { makeIdForHumanConsumption } from "@ourworldindata/utils"
 
 export interface ConnectedScatterLegendManager {
     sidebarWidth: number
@@ -68,7 +69,11 @@ export class ConnectedScatterLegend {
         const lineY = targetY + this.height / 2 - 0.5
 
         return (
-            <g className="ConnectedScatterLegend" {...renderOptions}>
+            <g
+                id={makeIdForHumanConsumption("arrow-legend")}
+                className="ConnectedScatterLegend"
+                {...renderOptions}
+            >
                 <rect
                     x={targetX}
                     y={targetY}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
index ced6419480e..0a1a6ce91be 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
@@ -101,7 +101,7 @@ export class MultiColorPolyline extends React.Component<MultiColorPolylineProps>
         const { markerStart, markerMid, markerEnd, ...polylineProps } =
             this.props
         return (
-            <>
+            <g id={this.props.id}>
                 {this.segments.map((group, index) => (
                     <polyline
                         {...polylineProps}
@@ -119,7 +119,7 @@ export class MultiColorPolyline extends React.Component<MultiColorPolylineProps>
                         }
                     />
                 ))}
-            </>
+            </g>
         )
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
index 997af6bf50a..ae2b00d6187 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
@@ -1,4 +1,9 @@
-import { PointVector, first, last } from "@ourworldindata/utils"
+import {
+    PointVector,
+    first,
+    last,
+    makeIdForHumanConsumption,
+} from "@ourworldindata/utils"
 import { observer } from "mobx-react"
 import React from "react"
 import { MultiColorPolyline } from "./MultiColorPolyline"
@@ -32,6 +37,10 @@ export class ScatterPoint extends React.Component<{
 
         return (
             <g
+                id={makeIdForHumanConsumption(
+                    "scatter-point",
+                    series.displayKey
+                )}
                 key={series.displayKey}
                 className={series.displayKey}
                 onMouseEnter={(): void => {
@@ -95,7 +104,14 @@ export class ScatterLine extends React.Component<{
         const opacity = 0.7
 
         return (
-            <g key={series.displayKey} className={series.displayKey}>
+            <g
+                id={makeIdForHumanConsumption(
+                    "scatter-line",
+                    series.displayKey
+                )}
+                key={series.displayKey}
+                className={series.displayKey}
+            >
                 <circle
                     cx={firstValue.position.x.toFixed(2)}
                     cy={firstValue.position.y.toFixed(2)}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
index 9bf6d85d159..9c0ae873e69 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -14,6 +14,7 @@ import {
     first,
     isEmpty,
     guid,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
@@ -421,6 +422,10 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                             getElementWithHalo(
                                 series.displayKey + "-endLabel",
                                 <text
+                                    id={makeIdForHumanConsumption(
+                                        "scatter-label",
+                                        label.text
+                                    )}
                                     x={label.bounds.x.toFixed(2)}
                                     y={(
                                         label.bounds.y + label.bounds.height
@@ -478,7 +483,14 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
             )
             if (series.offsetVector.x < 0) rotation = -rotation
             return (
-                <g key={series.displayKey} className={series.displayKey}>
+                <g
+                    id={makeIdForHumanConsumption(
+                        "time-scatter",
+                        series.displayKey
+                    )}
+                    key={series.displayKey}
+                    className={series.displayKey}
+                >
                     {!hideConnectedScatterLines && (
                         <MultiColorPolyline
                             points={series.points.map((point) => ({
@@ -543,6 +555,10 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                     getElementWithHalo(
                         `${series.displayKey}-label-${index}`,
                         <text
+                            id={makeIdForHumanConsumption(
+                                "scatter-label",
+                                series.displayKey
+                            )}
                             x={label.bounds.x.toFixed(2)}
                             y={(label.bounds.y + label.bounds.height).toFixed(
                                 2
@@ -606,6 +622,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
         return (
             <g
                 ref={this.base}
+                id={makeIdForHumanConsumption("scatter-points")}
                 className="PointsWithLabels clickable"
                 clipPath={`url(#scatterBounds-${renderUid})`}
                 onMouseMove={this.onMouseMove}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index 269fbed0dbc..ca5d451c249 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { computed } from "mobx"
 import { scaleLinear, ScaleLinear } from "d3-scale"
 import { TextWrap } from "@ourworldindata/components"
-import { first, last } from "@ourworldindata/utils"
+import { first, last, makeIdForHumanConsumption } from "@ourworldindata/utils"
 import {
     BASE_FONT_SIZE,
     GRAPHER_DARK_TEXT,
@@ -218,7 +218,7 @@ export class ScatterSizeLegend {
     ): JSX.Element {
         const centerX = targetX + this.maxWidth / 2
         return (
-            <g {...renderOptions}>
+            <g id={makeIdForHumanConsumption("size-legend")} {...renderOptions}>
                 {this.renderLegend(targetX, targetY)}
                 {this.label.render(
                     centerX,
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 2b7a30ee52c..843c307b7b8 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -18,6 +18,7 @@ import {
     clamp,
     HorizontalAlign,
     difference,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { observable, computed, action } from "mobx"
@@ -427,7 +428,10 @@ export class SlopeChart
         )
 
         return (
-            <g className="slopeChart">
+            <g
+                id={makeIdForHumanConsumption("slope-chart")}
+                className="slopeChart"
+            >
                 <LabelledSlopes
                     manager={manager}
                     bounds={innerBounds}
@@ -650,6 +654,7 @@ class SlopeEntry extends React.Component<SlopeEntryProps> {
             isFocused,
             isHovered,
             isMultiHoverMode,
+            seriesName,
         } = this.props
         const { isInBackground } = this
 
@@ -669,7 +674,10 @@ class SlopeEntry extends React.Component<SlopeEntryProps> {
         }
 
         return (
-            <g className="slope">
+            <g
+                id={makeIdForHumanConsumption("slope", seriesName)}
+                className="slope"
+            >
                 <line
                     ref={(el) => (this.line = el)}
                     x1={x1}
@@ -1275,11 +1283,20 @@ class LabelledSlopes
                     fill="rgba(255,255,255,0)"
                     opacity={0}
                 />
-                <g className="gridlines">
+                <g
+                    id={makeIdForHumanConsumption("grid-lines")}
+                    className="gridlines"
+                >
                     {this.yAxis.tickLabels.map((tick) => {
                         const y = yAxis.place(tick.value)
                         return (
-                            <g key={y.toString()}>
+                            <g
+                                id={makeIdForHumanConsumption(
+                                    "grid-line",
+                                    tick.value.toString()
+                                )}
+                                key={y.toString()}
+                            >
                                 {/* grid lines connecting the chart area to the axis */}
                                 <line
                                     x1={bounds.left + this.yAxis.width + 8}
@@ -1328,7 +1345,7 @@ class LabelledSlopes
                 >
                     {this.yColumn.formatTime(xDomain[1])}
                 </text>
-                <g className="slopes">
+                <g id={makeIdForHumanConsumption("slopes")} className="slopes">
                     {this.renderGroups(this.backgroundGroups)}
                     {this.renderGroups(this.foregroundGroups)}
                 </g>
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
index bdd1a46f770..154fc578f97 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
@@ -21,6 +21,7 @@ import {
     getRelativeMouse,
     ColorSchemeName,
     EntitySelectionMode,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
@@ -226,6 +227,7 @@ function MarimekkoBarsForOneEntity(props: MarimekkoBarsProps): JSX.Element {
     return (
         <g
             key={entityName}
+            id={makeIdForHumanConsumption("bar", entityName)}
             className="bar"
             transform={`translate(${currentX}, ${labelYOffset})`}
             onMouseOver={(ev): void => onEntityMouseOver(entityName, ev)}
@@ -982,6 +984,7 @@ export class MarimekkoChart
         return (
             <g
                 ref={this.base}
+                id={makeIdForHumanConsumption("marimekko-chart")}
                 className="MarimekkoChart"
                 onMouseMove={(ev): void => this.onMouseMove(ev)}
             >
@@ -1550,7 +1553,14 @@ export class MarimekkoChart
                         ? directionUnawareMakerYMid
                         : markerNetHeight - directionUnawareMakerYMid
                 labelLines.push(
-                    <g className="indicator" key={`labelline-${item.labelKey}`}>
+                    <g
+                        id={makeIdForHumanConsumption(
+                            "label-line",
+                            item.labelKey
+                        )}
+                        className="indicator"
+                        key={`labelline-${item.labelKey}`}
+                    >
                         <path
                             d={`M${markerBarEndpointX},${markerBarEndpointY} v${markerYMid} H${markerTextEndpointX} V${markerTextEndpointY}`}
                             stroke={lineColor}
@@ -1572,7 +1582,11 @@ export class MarimekkoChart
                 barEndpointY + MARKER_AREA_HEIGHT - MARKER_MARGIN
 
             labelLines.push(
-                <g className="indicator" key={`labelline-${item.labelKey}`}>
+                <g
+                    id={makeIdForHumanConsumption("label-line", item.labelKey)}
+                    className="indicator"
+                    key={`labelline-${item.labelKey}`}
+                >
                     <path
                         d={`M${markerBarEndpointX},${markerBarEndpointY} V${markerTextEndpointY}`}
                         stroke={lineColor}
@@ -1595,6 +1609,7 @@ export class MarimekkoChart
         const placedLabels = this.labelsWithPlacementInfo.map((item) => (
             <g
                 key={`label-${item.labelKey}`}
+                id={makeIdForHumanConsumption("label", item.labelKey)}
                 className="bar-label"
                 transform={`translate(${item.correctedPlacement}, ${labelOffset})`}
             >
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index 50e94c17a12..fd4bc43d667 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -12,6 +12,7 @@ import {
     isMobile,
     Time,
     lastOfNonEmptyArray,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { computed, action, observable } from "mobx"
 import { SeriesName } from "@ourworldindata/types"
@@ -164,6 +165,7 @@ class Areas extends React.Component<AreasProps> {
 
             return (
                 <path
+                    id={makeIdForHumanConsumption("area", series.seriesName)}
                     className={makeSafeForCSS(series.seriesName) + "-area"}
                     key={series.seriesName + "-area"}
                     strokeLinecap="round"
@@ -196,6 +198,10 @@ class Areas extends React.Component<AreasProps> {
 
             return (
                 <path
+                    id={makeIdForHumanConsumption(
+                        "border",
+                        placedSeries.seriesName
+                    )}
                     className={
                         makeSafeForCSS(placedSeries.seriesName) + "-border"
                     }
@@ -229,7 +235,10 @@ class Areas extends React.Component<AreasProps> {
         const { horizontalAxis, verticalAxis } = dualAxis
 
         return (
-            <g className="Areas">
+            <g
+                className="Areas"
+                id={makeIdForHumanConsumption("stacked-areas")}
+            >
                 <rect
                     x={horizontalAxis.range[0]}
                     y={verticalAxis.range[1]}
@@ -515,6 +524,7 @@ export class StackedAreaChart
         return (
             <g
                 ref={this.base}
+                id={makeIdForHumanConsumption("stacked-area-chart")}
                 className="StackedArea"
                 onMouseLeave={this.onCursorLeave}
                 onTouchEnd={this.onCursorLeave}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
index d29f05af559..d578462e5de 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -10,10 +10,11 @@ import {
     getRelativeMouse,
     colorScaleConfigDefaults,
     dyFromAlign,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import {
     VerticalAxisComponent,
-    HorizontalAxisTickMarks,
+    HorizontalAxisTickMark,
     VerticalAxisGridLines,
 } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
@@ -460,20 +461,31 @@ export class StackedBarChart
                     strokeWidth={axisLineWidth}
                 />
 
-                <HorizontalAxisTickMarks
-                    tickMarkTopPosition={innerBounds.bottom}
-                    tickMarkXPositions={ticks.map(
-                        (tick) => tick.bounds.centerX
-                    )}
-                    color="#666"
-                    width={axisLineWidth}
-                />
+                <g id={makeIdForHumanConsumption("tick-marks")}>
+                    {ticks.map((tick, i) => (
+                        <HorizontalAxisTickMark
+                            key={i}
+                            id={makeIdForHumanConsumption(
+                                "tick-mark",
+                                tick.text
+                            )}
+                            tickMarkTopPosition={innerBounds.bottom}
+                            tickMarkXPosition={tick.bounds.centerX}
+                            color="#666"
+                            width={axisLineWidth}
+                        />
+                    ))}
+                </g>
 
-                <g>
+                <g id={makeIdForHumanConsumption("tick-labels")}>
                     {ticks.map((tick, i) => {
                         return (
                             <text
                                 key={i}
+                                id={makeIdForHumanConsumption(
+                                    "tick__label",
+                                    tick.text
+                                )}
                                 x={tick.bounds.x}
                                 y={tick.bounds.y + 1}
                                 fill={GRAPHER_DARK_TEXT}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 6b6a2b8b6ab..48d4eb6c1c3 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -19,6 +19,7 @@ import {
     HorizontalAlign,
     EntityName,
     getRelativeMouse,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
@@ -564,6 +565,7 @@ export class StackedDiscreteBarChart
             return (
                 <g
                     key={entityName}
+                    id={makeIdForHumanConsumption("bar", entityName)}
                     className="bar"
                     transform={`translate(0, ${state.translateY})`}
                 >
@@ -596,6 +598,10 @@ export class StackedDiscreteBarChart
                         getElementWithHalo(
                             entityName + "-value-label",
                             <text
+                                id={makeIdForHumanConsumption(
+                                    "total",
+                                    entityName
+                                )}
                                 transform={`translate(${
                                     yAxis.place(totalValue) + labelToBarPadding
                                 }, 0)`}
@@ -699,6 +705,7 @@ export class StackedDiscreteBarChart
 
         return (
             <g
+                id={makeIdForHumanConsumption("stacked-bar", bar.seriesName)}
                 onMouseEnter={(): void =>
                     props?.onMouseEnter(entity, bar.seriesName)
                 }
diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
index 7599076e2b8..94939381e3c 100644
--- a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { sum, max } from "@ourworldindata/utils"
+import { sum, max, makeIdForHumanConsumption } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
@@ -145,6 +145,7 @@ export class VerticalColorLegend extends React.Component<{
                 {title &&
                     title.render(x, y, { textProps: { fontWeight: 700 } })}
                 <g
+                    id={makeIdForHumanConsumption("vertical-color-legend")}
                     className="ScatterColorLegend clickable"
                     style={{ cursor: "pointer" }}
                 >
@@ -172,6 +173,10 @@ export class VerticalColorLegend extends React.Component<{
                         const result = (
                             <g
                                 key={index}
+                                id={makeIdForHumanConsumption(
+                                    "mark",
+                                    series.textWrap.text
+                                )}
                                 className="legendMark"
                                 onMouseOver={mouseOver}
                                 onMouseLeave={mouseLeave}
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index 92da3fac845..36f9e072302 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -296,12 +296,29 @@ export const exposeInstanceOnWindow = (
 export const makeSafeForCSS = (name: string): string =>
     name.replace(/[^a-z0-9]/g, (str) => {
         const char = str.charCodeAt(0)
-        if (char === 32) return "-"
+        if (char === 32 || char === 45) return "-"
         if (char === 95) return "_"
         if (char >= 65 && char <= 90) return str
         return "__" + ("000" + char.toString(16)).slice(-4)
     })
 
+/**
+ * Make a human-readable string meant to be be used as the ID of a SVG chart
+ * element. This is useful when a static chart is manually edited in a SVG
+ * editor since SVG manipulation software like Figma often show the element's
+ * id as its title.
+ */
+export function makeIdForHumanConsumption(
+    name: string,
+    unsafeKey?: string
+): string {
+    let id = name
+    if (unsafeKey) {
+        id += "__" + makeSafeForCSS(unsafeKey)
+    }
+    return id
+}
+
 export function formatDay(
     dayAsYear: number,
     options?: { format?: string }
diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
index 4015da99ea6..f1ab2d75e72 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -7,6 +7,7 @@ export {
     getRelativeMouse,
     exposeInstanceOnWindow,
     makeSafeForCSS,
+    makeIdForHumanConsumption,
     formatDay,
     formatYear,
     numberMagnitude,