CSS可访问的脚注

钥匙要点

CSS计数器可用于自动化脚注的编号，从而减少对文档进行更改时手动重新编号的需求。页脚中的脚注顺序应与文本中的参考顺序相匹配。
• > 为了使屏幕阅读器访问脚注，可以将标题添加到页脚中以描述脚注参考。 “ ARIA描述”属性可用于将引用链接到此标题。
> css'::'''''pseudo-element可用于显示每个脚注参考的计数器。 “：target”伪级可用于突出显示脚注。
• 可以使脚注完全访问，可以添加返回链接。这涉及在内容中的每个引用中添加唯一的ID属性，可以通过在页脚中的每个列表项目中添加一个链接来链接到。 “ ARIA-LABEL”属性可用于描述这些链接。
>
>我前几天正在与CSS进行演奏，并考虑使用它们来处理脚注。根据窃的说法，该问题出乎意料地进入了此问题，脚注是：
[…]注释在页面底部。他们引用参考文献或评论上面的文本的指定部分。

>

>当作者想添加信息或引用参考时，您经常在论文中看到它们，而无需在内容的中间或使用括号。通常，根据文档中脚注的位置表示脚注，然后在文档的底部存在相同的数字，添加了额外的内容。

脚注在网上的问题是，它们可能很痛苦。如果您碰巧经常在同一文档上工作，更改部分的顺序，并在此过程中添加引用，那么必须重新数字所有现有的脚注可能很乏味。例如，如果您在文档中有3个对脚注的现有引用，并且要添加另一个引用，但是在其他所有内容之前，您必须将它们全部重新数。不好…

>我们可以使用CSS计数器使整个事情变得更加容易。如果我们不必手动维护编号，并且可以自动完成该编号怎么办？我们唯一要注意的是，页脚中实际注释的顺序尊重文本中参考文献的外观。

创建一个示例文档

>让我们创建一个示例文档，以便我们开始启动。

>

我们的示例很轻：我们在元素中有一些内容，其中包含一些指向文档ID的链接（），并映射到文章的中的注释。 >

有几种样式，看起来像这样：

使其可访问

在实际进入计数器之前，我们应该确保屏幕阅读器完全可以访问我们的标记。我们要做的第一件事是将标题添加到我们的页脚中，该标题将用作描述或我们的脚注参考。我们将使用CSS隐藏此标题，以免视觉显示。

>

<span><span><span><article</span>></span>
</span>  <span><span><span><h1</span>></span>CSS-Powered Footnotes<span><span></h1</span>></span>
</span>
  <span><span><span><p</span>></span>Maintaining <span><span><a</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> manually can be a pain. 
</span>  By using <span><span><span><a</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> <span><span><a</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add 
</span>  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span>
</span>
  <span><span><span><footer</span>></span>
</span>    <span><span><span><ol</span>></span>
</span>      <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. They 
</span>      cite references or comment on a designated part of the text above it.<span><span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets<span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained by 
</span>      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.<span><span><span></li</span>></span>
</span>    <span><span><span></ol</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></article</span>></span></span>

然后，我们要使用aria用属性来描述我们的所有参考文献：

现在，屏幕读取器用户将了解何时引用脚注。

<span><span><span><footer</span>></span>
</span>  <span><span><span><h2</span> id<span>="footnote-label"</span>></span>Footnotes<span><span></h2</span>></span>
</span>  <span><span><span><ol</span>></span>
</span>    ...
  <span><span><span></ol</span>></span>
</span><span><span><span></footer</span>></span></span>

添加引用

我知道您在想什么：

他说会有CSS柜台。 CSS计数器在哪里？

>我们将要做的就是为文档中的每个链接中的每个链接递增一个对脚注标签的属性设置的属性的计数器。然后，我们将使用伪元素后使用::的计数器。从那里开始，这一切都与应用CSS样式有关。

现在看起来像这样：

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> 
</span>manually can be a pain. By using <span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> 
</span><span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add the 
</span>numbered references in the text and an ordered list to display the actual footnotes 
in the footer, it becomes extremely easy.<span><span><span></p</span>></span></span>

很好，是吗？作为最后的触摸，当从引用到脚注时，我们希望在页脚中突出显示注释，因此我们实际上看到了所引用的注释，我们可以使用：target pseudo-class：

来进行。

>有点原始，因此可以随意自定义。尽管我必须说我喜欢纯黄色的亮点 - 它看起来很真实：

<span>/**
</span><span> * Initialiazing a `footnotes` counter on the wrapper
</span><span> */
</span><span>article {
</span>  <span>counter-reset: footnotes;
</span><span>}
</span>
<span>/**
</span><span> * Inline footnotes references
</span><span> * 1. Increment the counter at each new reference
</span><span> * 2. Reset link styles to make it appear like regular text
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span></span> {
</span>  <span>counter-increment: footnotes; /* 1 */
</span>  <span>text-decoration: none; /* 2 */
</span>  <span>color: inherit; /* 2 */
</span>  <span>cursor: default; /* 2 */
</span>  <span>outline: none; /* 2 */
</span><span>}
</span>
<span>/**
</span><span> * Actual numbered references
</span><span> * 1. Display the current state of the counter (e.g. `[1]`)
</span><span> * 2. Align text as superscript
</span><span> * 3. Make the number smaller (since it's superscript)
</span><span> * 4. Slightly offset the number from the text
</span><span> * 5. Reset link styles on the number to show it's usable
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>::after</span> {
</span>  <span>content: '[' counter(footnotes) ']'; /* 1 */
</span>  <span>vertical-align: super; /* 2 */
</span>  <span>font-size: 0.5em; /* 3 */
</span>  <span>margin-left: 2px; /* 4 */
</span>  <span>color: blue; /* 5 */
</span>  <span>text-decoration: underline; /* 5 */
</span>  <span>cursor: pointer; /* 5 */
</span><span>}
</span>
<span>/**
</span><span> * Resetting the default focused styles on the number
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>:focus::after</span> {
</span>  <span>outline: thin dotted;
</span>  <span>outline-offset: 2px;
</span><span>}</span>

提供返回链接

我们的演示需要一个最终元素才能完全访问（以及非常酷）：返回链接。考虑一下：您将重点放在参考资料中，转到页脚中的相关音符，然后阅读，然后……什么都没有。您需要一种方法才能回到您离开的地方！

> 提供这些链接并不难：我们只需要在内容中的每个引用中添加一个唯一的ID属性，以便它们可以链接到。我决定简单地使用他们所指的ID，然后简单地将-Ref附加到它：>

然后，页脚中的每个列表项目都有其自己的链接标题，该链接向我们刚刚添加的相关ID。链接的内容是 Backlink

unicode iCon（↩），并且它具有一个ARIA-LABEL属性，其值为“ back to to content”。

为了定位CSS中的这些链接，我们可以依靠ARIA-LABEL属性，就像我们对ARIA描述的方式相同的方式：>

这是最终演示的样子：

<span>footer <span>:target</span> {
</span>  <span>background: yellow;
</span><span>}</span>

>请参阅codepen上的sitepoint（@sitepoint）的CSS访问的脚注。

最终想法

>除了几行CSS和一些ARIA属性，我们设法创建了CSS驱动的脚注，这些脚注可访问并且不需要任何JavaScript。那有多酷？

关于主题，我强烈推荐来自Heydon Pickering的智能选择器的语义CSS。另外，请务必查看GaëlPoupard的A11Y.CSS，以检查您的页面的可访问性。

非常感谢Heydon Pickering在此演示中对可访问性的宝贵帮助。

>常见问题（常见问题解答）有关CSS 中可访问的脚注 >在Web内容中使用脚注的意义是什么？它们提供了其他信息，解释或参考，而不会破坏主要内容的流程。它们在需要详细的解释或来源的学术，研究或技术内容中特别有用。通过使用脚注，读者可以选择酌情决定更深入地研究主题，从而使内容更具用户友好和易于访问。

>如何使用CSS？使用CSS的脚注涉及几个步骤。首先，您需要使用适当的标签在HTML中标记脚注。然后，您可以使用CSS样式和定位脚注。 CSS允许您控制脚注的外观，包括其字体尺寸，颜色和页面上的位置。您还可以使用CSS创建脚注中主文本的链接，从而使读者更容易导航您的内容。

>

我可以使用CSS创建动态脚注吗？ ，CSS可用于创建动态脚注。这意味着可以根据用户互动来制作脚注以出现或消失，例如徘徊在特定的单词或短语上。这可以使用CSS伪级和过渡来实现。但是，重要的是要确保所有用户仍然可以访问此类动态脚注，包括使用辅助技术的用户。

>

>创建可访问的脚注的最佳实践是什么？重要的是要确保它们与主文本明显区分开，易于浏览并提供有用的信息。这可以通过为脚注使用不同的字体尺寸或颜色来实现，从而提供回到主文本的链接，并确保脚注相关和简洁。此外，重要的是要使用各种辅助技术测试您的脚注，以确保它们确实可以访问。

>如何使用CSS？

> CSS提供脚注，提供多种属性，您可以使用这些属性来设计脚注。例如，您可以使用“字体大小”属性来调整脚注文本的大小，“颜色”属性以更改其颜色以及“位置”属性来控制其在页面上的位置。您还可以使用CSS在脚注周围创建边框，添加背景颜色或应用其他风格效果。

>

>我如何确保屏幕阅读器可以访问我的脚注？确保屏幕读取器可以访问您的脚注，您应该使用语义HTML标记清楚地指示每个脚注的开始和结尾。您还可以使用ARIA角色和属性来提供有关辅助技术的脚注的其他信息。此外，重要的是要提供每个脚注的链接，以便屏幕读取器用户可以轻松导航您的内容。

我可以使用CSS创建在不同设备上响应迅速的脚注吗？ >

是的，您可以使用CSS创建在不同设备上响应的脚注。这可以通过使用媒体查询根据屏幕尺寸调整脚注的样式和位置来实现。这样可以确保您的脚注易于阅读和在所有设备上进行读取，从台式计算机到手机。

>

>创建脚注时有什么常见的错误？创建脚注包括使它们太长或太复杂，而不是提供指向主文本的链接，而不是使用辅助技术对其进行测试。避免使用脚注代替清晰而简洁的写作也很重要。脚注应该补充主文本，而不是替换。使用“：悬停”伪级。当用户用鼠标徘徊时，这使您可以更改脚注的样式。例如，您可以更改脚注的背景颜色，也可以使其出现在弹出框中。但是，重要的是要确保键盘用户和辅助技术的用户也可以访问此悬停效果。

>

>我可以使用CSS创建不同语言的脚注吗？ CSS以不同语言创建脚注。这可以通过使用“：lang（）”伪级来实现，以根据语言将不同的样式应用于脚注。这使您可以迎合不同的受众群体，并确保所有用户都可以访问您的内容。

以上是CSS可访问的脚注的详细内容。更多信息请关注PHP中文网其他相关文章！