著者が情報を追加したり、コンテンツの中央でそれを行ったり、括弧を使用したりせずに参照を引用したいときに、論文でそれらをよく見ることがよくあります。通常、脚注は、ドキュメント内の脚注の位置に従って数字で表され、その後、ドキュメントの下部に同じ数字が存在し、追加のコンテンツを追加します。
ウェブ上の脚注の問題は、維持するのが苦痛になる可能性があることです。同じドキュメントで頻繁に作業し、セクションの順序を変更し、途中で参照を追加する場合、既存のすべての脚注を再番号を変更する必要があるのは退屈かもしれません。たとえば、ドキュメント内の脚注への既存の参照が3つあり、別の脚注を追加する場合は、他のすべての前に発生するコンテンツに追加する場合は、それらすべてを変更する必要があります。素晴らしいことではありません…CSSカウンターを使用して、この全体をはるかに簡単にすることができます。番号を手で維持する必要がなく、自動的に実行できる場合はどうなりますか？私たちが注意を払わなければならない唯一のことは、フッター内の実際のメモの順序は、テキストの参照の外観の順序を尊重するということです。
サンプルドキュメントの作成
開始できるようにサンプルドキュメントを作成しましょう。
私たちの例は軽量です。
いくつかのスタイルがある場合、次のように見えるかもしれません：
実際にカウンターの問題に到達する前に、スクリーンリーダーがマークアップに完全にアクセスできるようにする必要があります。最初にやりたいことは、説明または脚注の参照として機能するフッターにタイトルを追加することです。このタイトルを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>今、スクリーンリーダーユーザーは、リンクが脚注への参照であることを理解します。
<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>
参照を追加
心配しないでください、私の友人、彼らは来ています。 私たちがやろうとしていることは、脚注ラベルに設定されたARIAと説明された属性を備えたドキュメント内のすべてのリンクのカウンターをインクリメントすることです。次に、Pseudo-Elementの後の::を使用してカウンターを表示します。そこから、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>
かなりいいね最後のタッチとして、参照から脚注に向かうとき、フッターのメモを強調表示したいので、実際に参照されているメモが何であるかを確認します。
<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>バックリンクを提供する
私たちのデモには、完全にアクセスできるように最終的な要素が1つ必要です。考えてみてください：参照に焦点を合わせ、フッターの関連するメモに向かい、それを読んでから…何もしません。あなたが去った場所に戻る方法が必要です！
フッターの各リストアイテムには、追加した関連のIDに向かう独自のリンクがあります。リンクのコンテンツは、
バックリンクunicodeアイコン（↩）であり、「コンテンツに戻る」の値を持つaria-label属性を備えています。
<span>footer <span>:target</span> {
</span> <span>background: yellow;
</span><span>}</span>ここに最終的なデモがどのように見えるかがあります：
CodepenのSitePoint（@SitePoint）によるCSSを使用したペンアクセス可能な脚注を参照してください。トピックについては、Heydon Pickeringのインテリジェントセレクターを使用したセマンティックCSSを強くお勧めします。また、ページのアクセシビリティを確認するには、GaëlPoupardのa11y.cssを必ずチェックしてください。 このデモでのアクセシビリティに関する彼の貴重な助けをしてくれたHeydon Pickeringに感謝します。
CSSのアクセス可能な脚注に関するよくある質問（FAQ）Webコンテンツで脚注を使用することの重要性は何ですか？
CSSは、脚注のスタイルに使用できる幅広いプロパティを提供します。たとえば、「フォントサイズ」プロパティを使用して、脚注テキストのサイズ、「色」プロパティを変更して色を変更すること、およびページ上の位置を制御する「位置」プロパティを調整できます。また、CSSを使用して脚注の周りに境界線を作成したり、背景色を追加したり、他のスタイルの効果を適用したりすることもできます。脚注がスクリーンリーダーにアクセスできることを確認してください。セマンティックHTMLマークアップを使用して、各脚注の開始と終了を明確に示す必要があります。 Ariaの役割とプロパティを使用して、脚注に関する追加情報を提供して、技術を支援することもできます。さらに、画面リーダーユーザーがコンテンツを簡単にナビゲートできるように、各脚注からメインテキストにリンクを提供することが重要です。 >CSSを使用して脚注をスタイリングするにはどうすればよいですか？
以上がCSSを使用したアクセス可能な脚注の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
