CC styling

The cc option lets you provide the "closed caption" element that Chart2Music updates as users explore a chart. Screen readers use this element to announce Chart2Music's generated text, and developers can style it to fit the page.

While developing and debugging, you may want to include this element in a central, visible location. This helps you make sure things like number formatting are working correctly. This is where the "closed caption" sentiment comes from: it can provide a sighted developer a closed caption of what the screen reader is saying.

caution

Do not use display: none on the CC element. If the CC is removed from the accessibility tree, screen reader users may not be able to interrogate specific details further, such as navigating character-by-character to determine the spelling of values in the chart.

Always invisible

Use visually hidden styles when the CC should not appear on screen but should remain available to assistive technology.

.chart2music-cc {
  position: absolute;
  left: -1000px;
}

<canvas id="revenue-chart"></canvas>
<div id="revenue-chart-cc" class="chart2music-cc"></div>

c2mChart({
  type: "bar",
  title: "Revenue",
  element: document.getElementById("revenue-chart"),
  cc: document.getElementById("revenue-chart-cc"),
  data: [10, 20, 15],
});

One CC for multiple charts

You can have one CC element on a page, and point all of your charts to that single element.

<div id="chart2music-cc" class="chart2music-cc"></div>

<canvas id="revenue-chart"></canvas>
<canvas id="expenses-chart"></canvas>

const cc = document.getElementById("chart2music-cc");

c2mChart({
  type: "bar",
  title: "Revenue",
  element: document.getElementById("revenue-chart"),
  cc,
  data: [10, 20, 15],
});

c2mChart({
  type: "line",
  title: "Expenses",
  element: document.getElementById("expenses-chart"),
  cc,
  data: [6, 8, 7],
});

This pattern can be useful when you want one predictable place for screen reader text or visible debugging output.

Visible only when the chart is in focus

Use a shared wrapper and :focus-within when you want the CC to be visible only while users are interacting with the chart.

.chart2music-example .chart2music-cc {
  position: absolute;
  left: -1000px;
}

.chart2music-example:focus-within .chart2music-cc {
  position: relative;
  left: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: beige;
}

<div class="chart2music-example">
  <canvas id="rating-chart"></canvas>
  <div id="rating-chart-cc" class="chart2music-cc"></div>
</div>

c2mChart({
  type: "line",
  title: "Movie ratings",
  element: document.getElementById("rating-chart"),
  cc: document.getElementById("rating-chart-cc"),
  data: [6.8, 5.9, 6, 6.5, 7.3],
});

This keeps the CC available to screen reader users at all times while making it visible for sighted users only during chart interaction.