语义注释的HTML元素是什么？

Question

我喜欢在我的博客文章中添加响应式旁注。响应方式如下：隐藏在小视口中，在宽视口的边缘可见。

当隐藏在小屏幕上时，需要可见元素（“链接”），以指示还有更多内容可供阅读。到目前为止，我的解决方案是：

<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>，因为它们是块元素和不能使用可以自动关闭父p元素。

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

Answer 1

该问题有 5 个挑战：

1. 为旁注引用的范围选择正确的 HTML 元素。
2. 为旁注内容选择正确的 HTML 元素：
   • 旁注内容必须可设计样式
   • 旁注内容可能包含可以接收键盘焦点的可点击元素
3. 确保所选元素不会导致其父<p>标记自动关闭。
4. 确保阅读器模式和 Pocket 等阅读器以印刷可接受的方式显示旁注内容。
5. 确保屏幕阅读器能够以有意义的流程阅读旁注内容。

** 挑战 1 的解决方案** 链接的外观主要是演示性的，因为它在宽视口上不提供交互。A<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;
  }
}