undefined | Better HN

0 pointsVeuxdo1y ago0 comments

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.

0 comments

the_other1y ago

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.

woopsn1y ago

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)

j / k navigate · click thread line to collapse