trying to convert a table image to WCAG approved HTML table

Question

I've been trying to convert the supplement table to a WCAG approved HTML table for my website. I'm finding it hard to understand what should go in the table and under which heading it should go. I have attached an example; I have already created one but having trouble with another one. The components of the Probiotic Bacteria (Supplement Table Image) Blend should be included or not? And if yes, how?

Answer 1

In the particular case that you've linked, the Probiotic Bacteria Blend could be done in a couple of different ways. Remember that ultimately the most important thing is that the information is conveyed.

I recommend either keeping it the details of the Blend as part of the same description (in the same cell), so:

	Amount per serving	% DV
Probiotic Bacteria Blend Composed of the following strains: [the rest of the text]	10 Billion Viable Cells (Minimum)✝	Daily value not established

Or make it an additional footnote:

	Amount per serving	% DV
Probiotic Bacteria Blend✝✝	10 Billion Viable Cells (Minimum)✝	Daily value not established

The one thing you don't want to do is have it in its own row since it's a description of the blend and doesn't have its own amount and percentage value.

Side note: For making the footnote accessible (which I haven't included), consider referring to the SO answer on that: https://stackoverflow.com/a/31254917/4131590