This is a variation of !1864 (merged) that uses a mixture of SVG and bootstrap's progress component to display several values in a single bar.
Stacking the bars is possible because the values have a fixed order (one is always bigger or equal than the other).
Semantically the bar is just an image. The legend contains all relevant information. I therefore did not even use aria-valuemax
and similar on the bars.
It would not be strictly necessary to use the solution also for the first bar as it only contains a single value. However, mixing .progress
and <meter>
on a single page looked weird.