语义旁注的 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> 不能使用，因为它们是块元素，can automatically close 是父元素的 p 元素。

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

Answer 1

这些问题有 5 个挑战：

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

** 挑战1的解决方案** 链接的外观主要是展示性的，因为它在宽视口上不提供交互。 <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 中的内容适用于屏幕阅读器。并非所有屏幕阅读器都读括号，因此文本 sidenote: 在该类的第一个跨度内。

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

Answer 2

在我看来，您应该使用details 标签。

HTML 详细信息元素 () 在 哪些信息仅在小部件切换到 “开放”状态。可以使用 元素。

从语义的角度来看，该标签旨在完全满足您的需求。

更多信息请访问MDN

问题是目前Edge不支持该标签，但根据Microsoft，它正在“开发中”。

Answer 3

我认为您正在寻找一个缩写标签

<abbr> 元素与title 属性一起使用将全文解释与缩写或首字母缩略词相关联。 网站访问者看不到标题属性中的文本，但浏览器、搜索引擎和辅助技术确实会使用此信息[source]

查看更多：

• View in JSFiddle
• Abbreviations: Understanding Success Criterion 来自 WCAG
• MDN Usage Notes

Answer 4

我不太确定您要显示什么样的旁注，但从语义的角度来看，我认为<dfn> 元素可能是一个不错的选择：

HTML Definition element (<dfn>) 用于表示在定义短语或句子的上下文中定义的术语。

内容类别 流式内容、短语式内容、触手可及的内容。

允许的内容 短语内容，但没有元素必须是后代。

根据您的要求，我猜想在大屏幕上显示 <aside> 中的定义是一个想法

HTML <aside> element 表示文档的一部分，其 content 仅与文档的主要内容间接相关。 旁白经常以侧边栏或标注框的形式呈现。

最后但同样重要的是，在小屏幕上，title attribute 可能是首选解决方案 - 因为它仅在元素处于焦点时打开。这也可以与大屏幕解决方案并行使用。