CSSを使用したアクセス可能な脚注

キーテイクアウト

• CSSカウンターを使用して、脚注の番号付けを自動化することができ、ドキュメントの変更が行われたときに手動の変更の必要性を減らすことができます。フッター内の脚注の順序は、テキストの参照の順序と一致する必要があります。
脚注をスクリーンリーダーにアクセスできるようにするために、フッターにタイトルを追加して、脚注の参照を説明できます。 「Aria-DescribedBy」属性を使用して、このタイトルへの参照をリンクできます。
• css ':: after' pseudo-elementを使用して、各脚注リファレンスのカウンターを表示できます。 「：ターゲット」の擬似クラスは、参照されたときに脚注を強調するために使用できます。
脚注を完全にアクセスしやすくするには、コンテンツに戻るリンクを追加できます。これには、コンテンツ内の各リファレンスに一意の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-DescribedBy属性を使用して、このタイトルですべての参照を説明したいと思います。

今、スクリーンリーダーユーザーは、リンクが脚注への参照であることを理解します。

<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カウンターはどこにありますか？

心配しないでください、私の友人、彼らは来ています。 私たちがやろうとしていることは、脚注ラベルに設定された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属性を追加して、リンクできるようにするだけです。私はシンプルに行って、彼らが参照するIDを取ることにしました、そして単にそれにrefを追加することにしました：

フッターの各リストアイテムには、追加した関連のIDに向かう独自のリンクがあります。リンクのコンテンツは、

バックリンク

unicodeアイコン（↩）であり、「コンテンツに戻る」の値を持つaria-label属性を備えています。

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

CSSのリンクをターゲットにするために、Aria-Label属性に頼ることができます。

ここに最終的なデモがどのように見えるかがあります：

CodepenのSitePoint（@SitePoint）によるCSSを使用したペンアクセス可能な脚注を参照してください。

最終的な考え

CSSの数行といくつかのARIA属性以外は何もありませんでしたが、アクセス可能でJavaScriptを必要としないCSSを搭載した脚注を作成することができました。それはどれほどクールですか？

トピックについては、Heydon Pickeringのインテリジェントセレクターを使用したセマンティックCSSを強くお勧めします。また、ページのアクセシビリティを確認するには、GaëlPoupardのa11y.cssを必ずチェックしてください。 このデモでのアクセシビリティに関する彼の貴重な助けをしてくれたHeydon Pickeringに感謝します。

CSSのアクセス可能な脚注に関するよくある質問（FAQ）

Webコンテンツで脚注を使用することの重要性は何ですか？

​​脚注は、Webコンテンツの読みやすさと信頼性を高める上で重要な役割を果たします。メインコンテンツのフローを混乱させることなく、追加情報、説明、または参照を提供します。これらは、詳細な説明や情報源が必要な学術、研究、または技術コンテンツで特に役立ちます。脚注を使用することで、読者は裁量でトピックをより深く掘り下げて、コンテンツをよりユーザーフレンドリーでアクセス可能にすることを選択できます。 CSSを使用した脚注には、いくつかのステップが含まれます。まず、適切なタグを使用してHTMLの脚注をマークアップする必要があります。次に、CSSを使用して、脚注をスタイリングおよび配置できます。 CSSを使用すると、ページ上のフォントサイズ、色、位置など、脚注の外観を制御できます。 CSSを使用して脚注からメインテキストへのリンクを作成して、読者がコンテンツをナビゲートしやすくすることもできます。 、CSSを使用して動的な脚注を作成できます。これは、特定の単語やフレーズの上にホバリングするなど、ユーザーの相互作用に基づいて、脚注を表示または消滅させることができることを意味します。これは、CSS擬似クラスと遷移を使用して実現できます。ただし、そのような動的な脚注が、支援技術を使用しているユーザーを含むすべてのユーザーがまだアクセスできるようにすることが重要です。それらがメインテキストと明確に区​​別できることを確認することが重要であり、ナビゲートしやすく、有用な情報を提供することが重要です。これは、脚注に異なるフォントサイズまたは色を使用し、メインテキストにリンクを提供し、脚注が関連性があり簡潔であることを確認することで実現できます。さらに、脚注をさまざまな支援技術でテストして、本当にアクセスできるようにすることが重要です。

CSSを使用して脚注をスタイリングするにはどうすればよいですか？

CSSは、脚注のスタイルに使用できる幅広いプロパティを提供します。たとえば、「フォントサイズ」プロパティを使用して、脚注テキストのサイズ、「色」プロパティを変更して色を変更すること、およびページ上の位置を制御する「位置」プロパティを調整できます。また、CSSを使用して脚注の周りに境界線を作成したり、背景色を追加したり、他のスタイルの効果を適用したりすることもできます。脚注がスクリーンリーダーにアクセスできることを確認してください。セマンティックHTMLマークアップを使用して、各脚注の開始と終了を明確に示す必要があります。 Ariaの役割とプロパティを使用して、脚注に関する追加情報を提供して、技術を支援することもできます。さらに、画面リーダーユーザーがコンテンツを簡単にナビゲートできるように、各脚注からメインテキストにリンクを提供することが重要です。 >

はい、CSSを使用して、異なるデバイスで応答する脚注を作成できます。これは、メディアクエリを使用して、画面サイズに基づいて脚注のスタイルと位置を調整することで実現できます。これにより、脚注がデスクトップコンピューターから携帯電話まで、すべてのデバイスで読みやすくナビゲートできるようになります。脚注を作成する場合、それらを長すぎるか複雑にすること、メインテキストへのリンクを提供するのではなく、支援技術でテストすることはありません。また、脚注を明確で簡潔な執筆の代替として使用することを避けることも重要です。脚注はメインテキストを補う必要があり、それに置き換えないでください。

CSSを使用して脚注のホバー効果を作成するにはどうすればよいですか？ '：Hover' pseudoクラスを使用します。これにより、ユーザーがマウスでhoversしたときに脚注のスタイルを変更できます。たとえば、脚注の背景色を変更したり、ポップアップボックスに表示したりできます。ただし、このホバー効果にキーボードユーザーとアシスタントテクノロジーのユーザーがアクセスできるようにすることが重要です。

CSSを使用して、異なる言語で脚注を作成できますか？さまざまな言語で脚注を作成するCSS。これは、「lang（）」pseudoクラスを使用して、言語に基づいて脚注にさまざまなスタイルを適用することで実現できます。これにより、多様な視聴者に応じて、言語に関係なく、すべてのユーザーがコンテンツにアクセスできるようになります。

以上がCSSを使用したアクセス可能な脚注の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。