14

I like to add responsive sidenotes to my blog posts. Responsive as in: hidden on small viewports, visible in the margin on wide viewports.

When hidden on small screens, a visible element ('link') is needed indicating there's more to read. My solution for this so far is:

<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
  underlined text
  <span class="sidenote__content">
    Sidenote content
  </span>
</span>, which is clickable on small viewports.</p>

(with added line breaks for readability)

With CSS I add asterisks to both the underlined text and the sidenote content to visually connect them on large screens.

The problems with this solution are that the sidenote__content correct display depends on CSS. It's shown in readers like Pocket, with:

  • The sidenote content showing up mid sentence without any visual cues
  • No space between the underlined text and the sidenote content.

I'm hoping that there's a more semantic solution than simple spans. <aside> and <section> can't be used as they're block elements and can automatically close the parent's p element.

A solution could be to separate the sidenote content from the link. However I'd prefer to keep the set of sidenote and its link as one set or pair, so they can be inserted as such into posts. Splitting them up would require javascript logic to match links with their content and can cause maintenance issues when one half of the set is missing.

3
  • 2
    Separating the two, and having the link's href point to the sidenote's id is probably the most portable semantic solution. Another approach would be to store the sidenote as a data-* attribute on the span wrapping the underlined text, and then use CSS pseudo elements to conditionally display that content inline. That may not be as portable though.
    – Sean
    Jul 30, 2019 at 16:06
  • Based on this discussion and MDN's documentation, the <small> element seems to be the best candidate for the sidenote content. Using <small> doesn't solve the mid sentence visibility of the content though. I think you're right about having to split up the parts.
    – kslstn
    Jul 31, 2019 at 20:19
  • 1
    My first thought was the <aside> element, which you've already ruled out, followed by the <details> element which is, for the same reason, ruled out. For some reason I inherently dislike the <small>, but I think that's from my days back during the time of table-layouts and then moving to semantics; <small> feels - unjustly - like a step backwards. Nice question! :) Aug 3, 2019 at 12:02

4 Answers 4

5
+500

The problems has 5 challenges:

  1. Pick the correct HTML element for the span that the sidenote refers to.
  2. Pick the correct HTML element for the content of the sidenote:
    • Sidenote content must be stylable
    • Sidenote content may contain clickable elements that can receive keyboard focus
  3. Make sure the chosen elements don't cause auto closing of their parent <p> tag.
  4. Make sure that reader modes and readers like Pocket show sidenote content in typographically acceptable way.
  5. Make sure sidenote content is read by screen readers, in a flow that makes sense.

** Solution to challenge 1** The appearance of the link is mainly presentational, as it provides no interaction on wide viewports. A <label> seems to be the tag best suited for this purpose. If the sidenote appears right next to the 'link' (and it will), I don't see the need or a purpose for including an href or id like with footnotes.

Solution to challenge 2 and 3

Use the <small> tag for the sidenote content (MDN, W3C).

Solution to challenge 4 and 5

Add spans with a space before and parentheses around the sidenote content for the unstyled appearance in reader modes. For screen readers, add 'sidenote: ' too. The result will look like:

(sidenote: here's a sidenote)

Hide those with CSS.

Solutions combined

HTML:

<!-- line breaks added for readability.
Remove them to avoid rendering of superfluous spaces. -->
<p> A paragraph with a
  <span class="sidenote">
    <label
      tabindex="0"
      title="The content of the sidenote."
      aria-describedby="sidenote-1"
      class="sidenote__button onclick="this.classList.toggle('active');"
      onKeypress="if(event.key === 'Enter' || event.key === ' '){event.preventDefault(); this.parentNode.classList.toggle('active');
    >
      clickable element
    </label>
    <small class="sidenote__content" >
      <span class="sidenote__content-parenthesis"> (sidenote: </span>
      The content of the sidenote.
      <span class="sidenote__content-parenthesis">)</span>
    </small>
  </span>
that can be clicked to show more details.
</p>

The content in .sidenote__parenthesis is for screen readers. Not all screen readers pronounce parentheses, hence the text sidenote: inside the first span with that class.

CSS:

.sidenote__content-parenthesis{
  // Hide from view, but not from screen readers.
  text-indent: -99999px;
}

@media (max-width: 1000px){
  .sidenote__content{
    // Hide from view, but not from screen readers.
    // The vertical position doesn't change, which is better for handling keyboard focus than 'text-indent: -99999px;'
    position: absolute;
    left: -99999px;
    top: auto;
  }
  .sidenote.active .sidenote__content{
    position: relative;
    left: auto;
  }
}

@media (min-width: 1000px){
  .sidenote__content{
    display: block;
    position: absolute;
    right: 0;
    margin-right: -300px;
    width: 200px;
  }
}
7
  • Adding display: none; to remove the parenthesis will also hide them from screen readers, creating weird sentences. If you want to visually hide them (but still keep them for screen readers and people copying and pasting), you should use a technique like this: webaim.org/techniques/css/invisiblecontent
    – Sean
    Aug 1, 2019 at 15:47
  • Also, removing chunks of text within paragraphs conditionally based on a user's viewport width doesn't seem great. Would suggest keeping the text consistent on all screen sizes.
    – Sean
    Aug 1, 2019 at 15:48
  • Thanks for pointing out the accessibility problem with the current solution, sean! I have to do some more testing, because part of the proposed solution is using 1px width and height and that causes Safari not to read that part. Regarding the removing chunks of text conditionally: these sidenotes are visible on click when hidden on small screens. It's a solution to meet my need to ramble without boring readers who don't have time for that.
    – kslstn
    Aug 2, 2019 at 19:18
  • I've updated my answer to make it more accessible to screen readers. The suggested 1px height and width doesn't seem to be necessary.
    – kslstn
    Aug 3, 2019 at 11:32
  • 1
    I realized that it would be better to have the link rendered in a <button> element (to make them focusable), but those are hidden in Firefox and Safari's reader modes, leaving gaps in the sentences. Instead I'm using tabindex="0" and let a javascript handle keyboard actions.
    – kslstn
    Aug 3, 2019 at 20:10
1

From my point of view you should use the details tag.

The HTML Details Element () creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the element.

The tag is intended, from a semantic point of view to do exactly what you need.

More info can be found on on MDN

The problem is that right now, Edge does not support the tag, but it is "in development" according to Microsoft.

3
  • 3
    Unfortunately, while I, too, would have preferred to use the <details> element, it does - as mentioned in the bounty-text and my comment to the question - not meet the criteria for the question, in the same way that "...<aside> and <section> can't be used as they're block elements and [will] automatically close the [parent <p>] element." Aug 3, 2019 at 13:46
  • @DavidThomas, but you could change type element to: display: inline-block for instance? In which case, your <p> will not be closed.
    – f-spin
    Aug 9, 2019 at 23:19
  • @f-spin: unfortunately, no; it seems to occur during the original construction of the DOM: demo; the only <details> that remains within a <p> element is the one that's inserted after page-load with JavaScript, and even that has issues in its display once it's expanded. Aug 10, 2019 at 10:14
1

I think an abbreviation tag is what you're looking for

The <abbr> element is used along with a title attribute to associate a full-text explanation with an abbreviation or acronym. Website visitors do not see the text in the title attribute, but browsers, search engines, and assistive technologies do use this information [source]

See more:

1
  • 1
    Interesting, because <abbr> is displayed inline. Problem is that sidenotes are usually not for explaining abbreviations. Another problem is that the title attribute is only visible on mouse hover and can't be styled as a block, can't contain links and other HTML elements that a sidenote may need.
    – kslstn
    Aug 9, 2019 at 20:03
0

I am not quite sure what kind of sidenotes you want to display, but from a semantic point of view I think that <dfn> element could be a good choice:

The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.

Content categories Flow content, phrasing content, palpable content.

Permitted content Phrasing content, but no element must be a descendant.

From your requirement I would guess that on large screen it would be an idea to display the definition within an <aside>

The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

Last but not least on small screens the title attribute could be the solution of choice - because it opens only when the element is in focus. Also this could be used in parallel to the large screen solution without harm.

1
  • The thing is that sidenotes aren't necessarily definitions of terms. They're not asides either, as (in my case) the content is directly related to the main text and are often meaningless without the context.
    – kslstn
    Aug 11, 2019 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.