<main>
<h1>Links with Marginalia Notes</h1>
<p>
  <strong>Correction (2 January 2016):</strong>
  There is no <code>role="aside"</code>.  
  There is either the HTML <code>&lt;aside&gt;</code> element, or there is the ARIA <code>complementary</code> role.  Since the HTML parser doesn't allow <code>&lt;aside&gt;</code> inside a paragraph, <code>complementary</code> it is!
</p>
<p>An attempt to create an accessible and more fully-responsive version of the link style used in <a href="https://thecorrespondent.com/5575/our-fate-was-sealed-long-before-november-8-and-not-because-the-elections-rigged/1576889402275-7591b019"><span class="link-main"><cite>The Correspondent</cite>.</span> <span role="complementary" class="link-note article">The Sarah Kendzior article I was reading is also recommended, separate from the web design.</span></a> Each link in the main text has an associated marginalia note, describing the linked resource. Hover styles highlight the note when you mouse over the text and vice versa.
</p>
<p>
  In <cite>The Correspondent</cite>, there are actually two versions of the link in the markup: a regular link, displayed on narrower screens, or the linked marginalia note plus a plain text span for wider screens.  The switch was done with media queries, however, and the <a href="https://w3c.github.io/aria/aria/aria.html#aria-hidden"><span class="link-main"><code>aria-hidden</code> attribute</span> <span role="complementary" class="link-note book">The official definition of <code>aria-hidden</code> warns against overuse.</span></a> that hides the duplication is never removed when the plain link is hidden with <code>display: none</code>.  In addition to ensuring that a basic link is always accessible, I wanted to make the text of the note accessible, for screen reader users and also for mobile users.
</p>
<p>My markup therefore includes both the link text and the note inside a single, always displayed link, and uses transforms to slide it into view on narrow screens. The note has a role of <code>complementary</code>.  I'd be interested in other suggestions for how best to indicate that this is a parenthetical note, interrupting the main text, while still being part of the link. I'd also be interested in feedback from regular touchscreen users on the narrow-screen design.  <strong>Update:</strong> I created an <a href="https://codepen.io/AmeliaBR/pen/jyNjRP/" target="_blank">alternative version</a> of the pen that I hope is more mobile-friendly.
</p>
<p>Printer's latin follows with two more sample links (that don't actually link anywhere):</p>
<p>Magni optio, ab tempore id cum excepturi ea possimus distinctio dolore eos <a href="#a"><span class="link-main">nulla consequatur</span> <span role="complementary" class="link-note article">No consequences? That was disputed in this article.</span></a> autem ex ducimus aperiam a repudiandae iusto perspiciatis odit obcaecati culpa, in voluptas. Voluptate, provident fuga.</p>
<p>Ea accusamus, <a href="#b"><span class="link-main">blanditiis rerum</span> <span role="complementary" class="link-note book">An entire chapter on the blandest rerum of all.</span></a> voluptatum itaque quam suscipit nam, at ullam alias! Ea, eum quia beatae sequi quidem iure voluptas, qui totam, ullam, assumenda mollitia perferendis temporibus a! Quasi, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, suscipit ea quod reiciendis eaque tenetur quis, numquam eum laborum ipsum ipsam similique obcaecati nulla dicta laboriosam omnis provident dolorem voluptates!</p>
</main>

body {
  font-family: Georgia, sans-serif;
  background-color: lightGray;
  color: #004;
  margin: 0.5rem;
  padding-right: 10.5rem;
  hyphens: auto;
}
main {
  background-color: #fec;
  padding: 0.5rem;
  padding-right: 1rem;
  max-width: 50em;
  margin: auto;
}
p {
  line-height: 1.4;
}
a {
  color: inherit;
  text-decoration: none;
  background: gray;
  background: linear-gradient(currentColor, currentColor) 0 1em / calc(100% - 0.2ch) 1px no-repeat;
}
a .link-note {
  display: block;
  float: right;
  clear: right;
  position: relative;
  width: 11rem;
  box-sizing: border-box;
  margin-right: -12rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: lightgray;
  font-size: 90%;
  line-height: 1.1;
}
a .link-note::before {
  content: " ";
  display: block;
  margin: 0 0.2rem 0.2rem 0.6rem;
}
a .link-note.book::before {
  content: "📖";
} 
a .link-note.article::before {
  content: "📰";
} 
a .link-note.picture::before {
  content: "🖼️";
} 
a .link-note::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1.2rem; height: 1.2rem;
  top: 0.25rem;
  left: -0.5rem;
  background-color: #fec;
  border: solid 0.4rem lightgray;
  border-radius: 50%;
  position: absolute;
}
a:hover, a:focus {
  color: #c21;
  outline: none;
}
a:hover .link-main:hover, a:hover .link-note:hover {
  color: #004;
}
a:hover .link-note:not(:hover)::after, a:focus .link-note::after {
  background-color: currentColor;
}
@media (max-width: 40em) {
  body {
    padding-right: 0.5em;
    margin: 0;
  }
  a .link-note {
    margin-top: 1.4rem;
    clear: none;
    transition: transform 0.2s ease-out;
  }
  a .link-note::after {
    top: 0;
    left: -1rem;
    width: 2.1em;
    height: 2.1em;
    border-width: 0.7em;
  }
  a:hover .link-note, a:focus .link-note {
    transition-timing-function: ease-in;
    transform: translateX(-10rem);
    color: #004;
  }
  a:hover .link-note::after, a:focus .link-note::after {
    background-color: currentColor;
  }
}