I am rewriting some web pages. Some are simplifying charts by removing their javascript based implementation with just CSS. But then that lead to multiple questions.
#Q1) Figure or div element
My overall container can be either a div element or a figure element.
Figure make it clearer that it is a chart inside also the element figcaption can then be used.
However figure also expect an image rather than a div or table element inside.
html
<div class="chartContainer" >
<div class="chart" aria>
...
</div>
</div>
Versus
```html
<figure class="chartContainer" >
<figcaption>Bar Chart of X</figcaption>
<div class="chart">
...
</div>
</figure>
```
Q2) Table or div with role=table
I am trying to determine whether I am better off using semantic html to indicate the chart data itself or using div and using the role table.
One is better understood by system but the other is easier to manipulate for display.
Another aspect is that outside of time series visually in table data series may be displayed vertically but understood horizontally.
Q3) Use hidden input
One possible way to determine if a chart should be a bar chart, an area chart, a bullet chart would be to have hidden inputs of type radio for the different chart type and select the appropriate.
```html
<div>
<div class="hiddenChartTypeSelector" >
<input type="radio" name=""chartA_chartType" value="BarChart" />
<input type="radio" name=""chartA_chartType" value="StackedBarChart" />
<input type="radio" name=""chartA_chartType" value="AreaChart" />
<input type="radio" name=""chartA_chartType" value="StackedAreaChart" />
</div>
<div class="chart">
...
</div>
</div>
```
But if the div for the chart type if hidden I then need to have a way to indicate to the accessibility reader what type of chart will be displayed.
Q4) figcaption or div for chart Legend
digCaption can be used for legend. So Ibwas wondering whether the figcaption should be used to indicate the legend of the chart.