[Veuxdo]

> When you render the connectors using a mixture of empty divs, pseudo-content and largely arbitrary hacks, all that meaning gets lost from the _content_ (the HTML)

Well, yeah. But you can commit the same sins in SVG and canvas. There's certainly no rule that HTML can't be used to make effective, meaningful diagrams.

[arcbyte]

He just laid out the rule. It's a bad idea for very good reasons.

[Veuxdo]

Re-reading it, he did limit his rule to not using HTML for _connectors_. I can't refute that; that sounds like a bad idea for anything that isn't a toy POC (which this submission certainly is).

I do think a mix of HTML (for boxes) and canvas/svg (for connectors) is viable, however.

[the_other]

If you can mark up where the connectors go in a way that makes them accessible, you have some chance of making this work.

I think it would require extensions to HTML. There are already mechanisms for linking some elements to others, but most of them have pre-defined semantics (labels for controls, headers for sections and widgets). The closest is probably the `form` attribute that links form controls to a non-nesting `<form >` "parent" element... but forms are a worse hack for a flow chart than CSS connectors.

[woopsn]

I tried a few techniques, in terms of accessibility I think "old" ways are the best here.

    <div class=flowchart>... crazy modern shit ...</div>

    <ol class=sr-only>
      <li id=step1> Water on stove.
        <ol>
          <li>Boiling? Proceed to <a href=#step2>Step 2</a></li>
          <li>Otherwise return to <a href=#step1>Step 1</a></li>
        </ol>
      </li>

      <li id=step2> Cook dumplings in water. Wait a minute.
        Floating? Proceed to <a href=#step4>Step 4</a>.</li>
        Otherwise proceed to <a href=#step3>Step 3</a>.</li>
      </li>

      <li id=step3> Stir dumplings. Return to <a href=#step2>Step 2</a>.</li>

      ...
   </ol>

(or start with the anchors/list, and progressively enhance)