Multi-Link

I’ve been curious about web components for a while. Recently, I’ve been thinking that before someone asks me about web components in SaxonJS, I probably ought to learn something about them. (I have learned something, but I have no concrete thoughts about using them with SaxonJS; it’s still too early to ask.)

The idea I had was to write a web component to support one-to-many links. Partly this was motivated by the fact I have worked out how to do it and partly because it seemed that, while it shouldn’t be too hard, there are interesting accessibility issues, so it’s not as simple as making a green button you can click or something.

We’re all used to writing one-to-one links, because that’s what browsers support. You can link to the DocBook Wikipedia page if you want, or to the DocBook home page, or even to DocBook: The Definitive Guide, but you can’t just have a single link from DocBook [see also DocBook.org and DocBook: TDG] to⊕Well, I mean, except like that as will hopefully become clear in a few more paragraphs. any one of those pages.

Well, of course, you can but you’d have to write JavaScript to do it. And, as I alluded to above, if you’re a good and thoughtful web citizen, you’d want to do that in a way that supported accessibility.

From an accessibility point of view, I want to be able to start with something like this:

You might be interested in reading more about Norm (see also his old home page, his weblog, his photographs and a clock) online.

Or, in HTML, like this:

<p>You might be interested in reading more about 
<a href="https://norm.tovey-walsh.com/">Norm</a> (see also
<a href="https://nwalsh.com/">his old home page</a>,
<a href="https://so.nwalsh.com/">his weblog</a>,
<a href="https://photos.nwalsh.com/">his photographs</a>
and <a href="https://wordclock.nwalsh.com/">a clock</a>) online.
</p>

That’s readable and accessible. But, where practical, I’d like to present it as a single link with multiple targets. For the purpose of this discussion, “practical” means in a modern web browser with JavaScript enabled. Something like:

You might be interested in reading more about Norm [see also his old home page, his weblog, his photographs, and a clock] online.

How easy could you make that?

Pretty easy, it turns out:

<p>You might be interested in reading more about
<multi-link>
<a href="https://norm.tovey-walsh.com/">Norm</a> (see also
<a href="https://nwalsh.com/">his old home page</a>,
<a href="https://so.nwalsh.com/">his weblog</a>,
<a href="https://photos.nwalsh.com/">his photographs</a>
and <a href="https://wordclock.nwalsh.com/">a clock</a>) online
</multi-link>.
</p>

That’s it.⊕The “view source” experience isn’t exactly right here because of the tool chain that gets me from authoring in Org-Mode to a finished web page, but the prose is all true. Just wrap <multi-link> around the links (and insert one script reference on the page).

If you look closely at the pulldown a couple of paragraphs back, it may seem slightly less than ideal that “Norm” is both the link text and the first item. You can gussy it up a bit with some extra attributes:

<p>You might be interested in reading more about
<multi-link link-text="Norm" header="Norm’s web sites">
<a href="https://norm.tovey-walsh.com/">his home page</a> (see also
<a href="https://nwalsh.com/">his old home page</a>,
<a href="https://so.nwalsh.com/">his weblog</a>,
<a href="https://photos.nwalsh.com/">his photographs</a>
and <a href="https://wordclock.nwalsh.com/">a clock</a>) online
</multi-link>.
</p>

Then you get:

You might be interested in reading more about his home page [see also his old home page, his weblog, his photographs, and a clock] online.

That works a little better as a dropdown, but sacrifices something in the accessible version:

You might be interested in reading more about his home page (see also his old home page, his weblog, his photographs and a clock) online.

All-in-all, I’m quite pleased with the results of 100ish lines of JavaScript and an evening of tinkering.

Try it yourself. Get it from https://github.com/ndw/multi-link. There’s an examples page that provides a more obvious view-source experience.

Share and enjoy!