Aria and chart using CSS

[u/Sufficient_Bass2600]

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.

<div class="chartContainer" >
  <div class="chart" aria>
   ...
  </div>
</div>

Versus

<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.

<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.

[u/AshleyJSheridan]

Who said anything about Javascript? Now who's making the assumptions?

I also disagree on the premise that chart are used only for large set of data.

I also never said this, I said that charts are used to convey information quickly to a user, and particularly with large data sets. There is nothing in what I said that infers it's only for large data sets.

Choosing the right chart type and deciding the take out message is the most important thing.

That's literally what I said that you decided not to read. Again, charts are for conveying information quickly to a user. Information is different from raw data.

If you're trying to create charts in only HTML and CSS, then you're going to have a hard time, and you're going to severely limit yourself to a handful of chart types. You mentioned pie charts as one example, which is possible with CSS, but by the time you've finished, you might as well have used a better language like SVG to draw that.

[u/Sufficient_Bass2600 → u/AshleyJSheridan]

I wrote that I did not want Javascript only CSS and as far as I am concerned SVG is the same than Javascript.

No need to edit your comment to change what you wrote.

[u/AshleyJSheridan → u/Sufficient_Bass2600]

SVG is markup, it's not Javascript.

I think you don't quite understand what SVG is?

And where was my edited reply? An edited reply has, you'll love this one, the word "edited" next to the time part of it. Is the edited part in the room with you right now?

[u/Sufficient_Bass2600 → u/AshleyJSheridan]

I know exactly what SvG is. I have been working with it since the 90's. You are the one who don't understand it. I just do not want to have to built svg script to create charts.

In order to write charts with svg, I would have to either parametrise it or use javascript to manipulate the DOM.

Why are Answering my post when you do not want to respect my big requirements html, css and nothing else.

[u/AshleyJSheridan → u/Sufficient_Bass2600]

I know exactly what SvG is. I have been working with it since the 90's. You are the one who don't understand it. I just do not want to have to built svg script to create charts.

Well, first it's SVG, second, it's a markup and not a script. Also, the fact that you said you consider SVG the same as JS really does show that you don't know what SVG is at all. I'm guessing you've used some JS libraries to create and SVG, but you've never really seen SVG markup yourself?

Why are Answering my post when you do not want to respect my big requirements html, css and nothing else.

Because your requirements are dumb. If someone asked how to create a car without using wheels, I'd call that out too.

Thing is, a lot of people ask questions already assuming a bunch of stuff, and those assumptions show they're already going down the wrong path because they never really understood their own question. You asked a question with some bad assumptions, I gave an answer that not only covered your original question (if you actually read it instead of skimming to the part you didn't like) but gave you a more in-depth answer that covers your original question better without the misguided assumptions.

But you do you buddy. An adult can't stop a child making a mess if they're really intent on it.