html - 语义旁注的 HTML 元素是什么？

我喜欢在我的博客文章中添加响应式旁注。响应式:隐藏在小视口(viewport)上，在宽视口(viewport)的边缘可见。

当隐藏在小屏幕上时，需要一个可见元素(“链接”)来表示还有更多内容要阅读。到目前为止，我对此的解决方案是:

<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>

(为了可读性添加了换行符)

使用 CSS，我为带下划线的文本和旁注内容添加星号，以便在大屏幕上直观地将它们连接起来。

此解决方案的问题在于 sidenote__content 的正确显示取决于 CSS。它显示在像 Pocket 这样的阅读器中，包括:

旁注内容出现在句子中间，没有任何视觉提示

下划线文本和旁注内容之间没有空格。

我希望有比简单跨度更语义化的解决方案。 <aside> 和 <section> 不能使用，因为它们是块元素，而 can automatically close 是父元素的 p 元素。

解决方案可能是将旁注内容与链接分开。但是，我更愿意将旁注及其链接保留为一组或一对，以便将它们插入帖子中。拆分它们需要 javascript 逻辑来将链接与其内容相匹配，并且在缺少一半集合时可能会导致维护问题。

最佳答案

问题有5个挑战:

为旁注所指的范围选择正确的 HTML 元素。

为旁注的内容选择正确的 HTML 元素:

旁注内容必须是可样式化的

旁注内容可能包含可以接收键盘焦点的可点击元素

确保所选元素不会导致其父标签 <p> 自动关闭。

确保阅读器模式和 Pocket 等阅读器以排版可接受的方式显示旁注内容。

确保屏幕阅读器以合理的流程阅读旁注内容。

** 挑战 1 的解决方案**
链接的外观主要是展示性的，因为它在宽视口(viewport)上不提供交互。 <label> 似乎是最适合此目的的标签。如果旁注出现在“链接”旁边(并且会出现)，我认为没有必要或目的像脚注一样包含 href 或 id。

挑战2和3的解决方案

对旁注内容使用 <small> 标签( MDN 、 W3C )。

挑战 4 和 5 的解决方案

在旁注内容周围添加带有空格的跨度和括号，以在阅读器模式下实现无样式外观。对于屏幕阅读器，也添加“旁注:”。结果将如下所示:

用 CSS 隐藏那些。

组合解决方案

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>

.sidenote__parenthesis 中的内容用于屏幕阅读器。并非所有的屏幕阅读器都会发音括号，因此文本旁注:在该类的第一个跨度内。

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;
  }
}

关于html - 语义旁注的 HTML 元素是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57272564/