Hacker News Reader

Comment by Veuxdo | Hacker News Reader

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

View on HN

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

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.

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.

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)

Reply on news.ycombinator.com