Links with Marginalia Notes

Links with Marginalia Notes

Go to Source

See the Code
See it Full Page
See Details

An attempt to create an accessible and more fully-responsive version of the link style used in <a href=""><span class="link-main"><cite>The Correspondent</cite>.</span> </a>

The main problem with the original is <code>aria-hidden</code>, but I went beyond that, removing the duplicated markup (for the widescreen vs narrow screen versions), and making the notes visible (as a pop-up that slides into view) on narrow screens.

**[Compare with my "Take 2" version](, in which the notes aren't actually part of the links (and can therefore be safely tapped on mobile).**

This Pen uses: HTML, CSS, JavaScript, and