Nota kaki yang boleh diakses dengan CSS

Takeaways Key

Kaunter CSS boleh digunakan untuk mengautomasikan penomboran nota kaki, mengurangkan keperluan untuk renumbering manual apabila perubahan dibuat ke dokumen. Pesanan nota kaki di footer sepadan dengan susunan rujukan dalam teks.
Untuk membuat nota kaki boleh diakses untuk pembaca skrin, tajuk boleh ditambah ke footer untuk menggambarkan rujukan nota kaki. Atribut 'aria-describedby' boleh digunakan untuk menghubungkan rujukan ke tajuk ini.
CSS ':: selepas' pseudo-elemen boleh digunakan untuk memaparkan kaunter untuk setiap rujukan nota kaki. Kelas pseudo ': sasaran' boleh digunakan untuk menyerlahkan nota kaki apabila ia dirujuk.
Untuk membuat nota kaki yang boleh diakses sepenuhnya, pautan back-to-conten boleh ditambah. Ini melibatkan menambah atribut ID yang unik untuk setiap rujukan dalam kandungan, yang boleh dikaitkan dengan menambah pautan dalam setiap item senarai di footer. Atribut 'Aria-label' boleh digunakan untuk menggambarkan pautan ini.

Saya bermain dengan kaunter CSS pada hari yang lain dan berfikir tentang menggunakannya untuk menangani nota kaki. Menurut plagiarisme yang mempunyai kemasukan yang sangat panjang mengenai perkara itu, nota kaki adalah:

[...] Nota diletakkan di bahagian bawah halaman. Mereka memetik rujukan atau komen pada bahagian yang ditetapkan dari teks di atasnya.

anda sering melihatnya dalam kertas apabila penulis ingin menambah sekeping maklumat atau memetik rujukan tanpa melakukannya di tengah -tengah kandungan atau menggunakan kurungan. Biasanya, nota kaki diwakili dengan nombor mengikut kedudukan nota kaki dalam dokumen, maka nombor yang sama ada di bahagian bawah dokumen, menambah kandungan tambahan.

Masalah dengan nota kaki di web adalah bahawa mereka boleh menjadi kesakitan untuk dikekalkan. Sekiranya anda bekerja pada dokumen yang sama sering, mengubah susunan bahagian, sambil menambah rujukan di sepanjang jalan, mungkin membosankan untuk membayar semula semua nota kaki yang ada. Sebagai contoh, jika anda mempunyai 3 rujukan sedia ada untuk nota kaki dalam dokumen, dan anda ingin menambah satu lagi, tetapi pada sekeping kandungan yang berlaku sebelum semua yang lain, anda perlu mengulangi semula mereka semua. Tidak hebat ...

kita boleh menggunakan kaunter CSS untuk menjadikan perkara ini lebih mudah. Bagaimana jika kita tidak perlu mengekalkan penomboran dengan tangan dan ia boleh dilakukan secara automatik? Satu -satunya perkara yang perlu kita perhatikan, adalah bahawa urutan nota sebenar dalam footer menghormati perintah penampilan rujukan dalam teks.

Membuat dokumen sampel

mari kita buat dokumen sampel supaya kita dapat memulakan.

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

Contoh kami adalah ringan: kami mempunyai beberapa kandungan dalam elemen , yang mengandungi beberapa pautan () menunjuk pada ID dalam dokumen, dipetakan ke nota dalam

artikel.

dengan beberapa gaya, ia mungkin kelihatan seperti ini:

menjadikannya boleh diakses

Sebelum benar-benar mendapatkan perkara kaunter, kita harus memastikan markup kami dapat diakses sepenuhnya untuk pembaca skrin. Perkara pertama yang kami mahu lakukan ialah menambah tajuk ke footer kami yang akan berfungsi sebagai perihalan atau rujukan nota kaki kami. Kami akan menyembunyikan gelaran ini dengan CSS jadi ia tidak muncul secara visual.

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

Kemudian, kami ingin menerangkan semua rujukan kami dengan tajuk ini, menggunakan atribut Aria-DepribedBy:

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

sekarang pengguna pembaca skrin akan memahami apabila pautan adalah rujukan kepada nota kaki.

Menambah rujukan

Saya tahu apa yang anda fikirkan:

Dia berkata akan ada kaunter CSS. Di manakah kaunter CSS? Apa yang akan kita lakukan ialah meningkatkan kaunter untuk setiap pautan dalam dokumen yang mempunyai atribut Aria-DepribedBy yang ditetapkan kepada label nota kaki. Kemudian kami akan memaparkan kaunter menggunakan :: Selepas Pseudo-Element. Dari sana, ini semua tentang menggunakan gaya CSS.

sekarang kelihatan seperti ini:

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

cukup bagus, ya? Sebagai sentuhan terakhir, ketika menuju ke nota kaki dari rujukan, kami ingin menyerlahkan nota di footer sehingga kita benar-benar melihat apa nota yang dirujuk, yang dapat kita lakukan menggunakan: sasaran kelas pseudo:

Ia agak mentah, jadi jangan ragu untuk menyesuaikan. Walaupun saya mesti mengatakan saya suka kuning tulen untuk kemuncak - ia kelihatan begitu sahih:

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

Menyediakan pautan belakang

Demo kami memerlukan satu elemen akhir untuk diakses sepenuhnya (serta cukup keren): pautan back-to-content. Fikirkanlah: Anda menumpukan rujukan, pergi ke nota yang relevan di footer, baca dan kemudian ... tiada apa -apa. Anda memerlukan cara untuk kembali ke tempat anda pergi!

Menyediakan pautan tersebut tidak begitu sukar: kita hanya perlu menambah atribut ID yang unik untuk setiap rujukan dalam kandungan supaya mereka dapat dihubungkan. Saya memutuskan untuk pergi mudah dan mengambil id yang mereka rujuk, dan hanya tambah -ref kepadanya:

Kemudian setiap item senarai dari footer mempunyai pautan sendiri yang menuju ke ID yang relevan yang kami tambahkan. Kandungan pautan adalah backlink

icon unicode (↩), dan ia mempunyai atribut label ARIA dengan nilai "kembali ke kandungan".

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

Untuk mensasarkan pautan tersebut dalam CSS, kita boleh bergantung pada atribut ARIA-label dengan cara yang sama seperti yang kita lakukan untuk Aria-Describedby:

inilah yang kelihatan seperti demo akhir:

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span> id<span>="footnotes-ref"</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> id<span>="css-ref"</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> id<span>="css-counters-ref"</span>></span>counters<span><span></a</span>></span> 
</span>to add 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>

Lihat nota kaki yang boleh diakses pen dengan CSS oleh SitePoint (@SitePoint) pada codepen.

Pemikiran Akhir

Dengan apa-apa tetapi beberapa garis CSS dan beberapa atribut ARIA, kami berjaya membuat nota kaki berkuasa CSS yang boleh diakses dan tidak memerlukan mana-mana JavaScript. Betapa sejuknya itu?

Pada topik, saya sangat mengesyorkan CSS semantik dengan pemilih pintar dari Heydon Pickering. Juga, pastikan anda menyemak A11Y.CSS dari Gaël Poupard untuk memeriksa kebolehcapaian halaman anda.

Terima kasih banyak kepada Heydon Pickering atas bantuannya yang berharga mengenai kebolehcapaian dalam demo ini.

Soalan Lazim (Soalan Lazim) Mengenai Nota Kaki yang Boleh Diakses Dalam CSS

Apakah kepentingan menggunakan nota kaki dalam kandungan web? Mereka memberikan maklumat tambahan, penjelasan, atau rujukan tanpa mengganggu aliran kandungan utama. Mereka amat berguna dalam kandungan akademik, penyelidikan, atau teknikal di mana penjelasan atau sumber terperinci diperlukan. Dengan menggunakan nota kaki, pembaca boleh memilih untuk menyelidiki lebih mendalam ke dalam topik mengikut budi bicara mereka, menjadikan kandungan lebih mesra pengguna dan boleh diakses. Nota kaki menggunakan CSS melibatkan beberapa langkah. Pertama, anda perlu menandakan nota kaki anda dalam HTML menggunakan tag yang sesuai. Kemudian, anda boleh menggunakan CSS untuk gaya dan meletakkan nota kaki anda. CSS membolehkan anda mengawal penampilan nota kaki anda, termasuk saiz fon, warna, dan kedudukan mereka pada halaman. Anda juga boleh menggunakan CSS untuk membuat pautan kembali ke teks utama dari nota kaki, menjadikannya lebih mudah bagi pembaca untuk menavigasi kandungan anda. , CSS boleh digunakan untuk membuat nota kaki dinamik. Ini bermakna nota kaki boleh dibuat untuk muncul atau hilang berdasarkan interaksi pengguna, seperti melayang di atas perkataan atau frasa tertentu. Ini boleh dicapai menggunakan kelas pseudo dan peralihan CSS. Walau bagaimanapun, penting untuk memastikan nota kaki dinamik seperti ini masih boleh diakses oleh semua pengguna, termasuk yang menggunakan teknologi bantuan. Adalah penting untuk memastikan bahawa mereka jelas dibezakan dari teks utama, mudah untuk mengemudi, dan memberikan maklumat yang berguna. Ini boleh dicapai dengan menggunakan saiz atau warna fon yang berbeza untuk nota kaki, memberikan pautan kembali ke teks utama, dan memastikan nota kaki adalah relevan dan ringkas. Di samping itu, penting untuk menguji nota kaki anda dengan pelbagai teknologi bantuan untuk memastikan bahawa mereka benar -benar boleh diakses.

Bagaimana saya boleh gaya nota kaki saya menggunakan CSS?

CSS menyediakan pelbagai sifat yang boleh anda gunakan untuk gaya nota kaki anda. Sebagai contoh, anda boleh menggunakan harta 'saiz font' untuk menyesuaikan saiz teks nota kaki, harta 'warna' untuk menukar warna, dan 'kedudukan' harta untuk mengawal kedudukannya pada halaman. Anda juga boleh menggunakan CSS untuk membuat sempadan di sekitar nota kaki anda, menambah warna latar belakang, atau menggunakan kesan gaya lain. Pastikan nota kaki anda boleh diakses untuk pembaca skrin, anda harus menggunakan markup HTML semantik untuk menunjukkan dengan jelas permulaan dan akhir setiap nota kaki. Anda juga boleh menggunakan peranan dan sifat ARIA untuk memberikan maklumat tambahan mengenai nota kaki ke teknologi bantuan. Di samping itu, penting untuk memberikan pautan kembali ke teks utama dari setiap nota kaki, supaya pengguna pembaca skrin dapat dengan mudah menavigasi kandungan anda. > Ya, anda boleh menggunakan CSS untuk membuat nota kaki yang responsif pada peranti yang berbeza. Ini boleh dicapai dengan menggunakan pertanyaan media untuk menyesuaikan gaya dan kedudukan nota kaki berdasarkan saiz skrin. Ini memastikan bahawa nota kaki anda mudah dibaca dan ditavigasi pada semua peranti, dari komputer desktop ke telefon bimbit. Apabila membuat nota kaki termasuk membuat mereka terlalu panjang atau kompleks, tidak memberikan pautan kembali ke teks utama, dan tidak menguji mereka dengan teknologi bantuan. Ia juga penting untuk mengelakkan menggunakan nota kaki sebagai pengganti penulisan yang jelas dan ringkas. Nota kaki harus menambah teks utama, tidak menggantikannya.

Bagaimana saya boleh menggunakan CSS untuk membuat kesan hover untuk nota kaki saya? Menggunakan kelas pseudo ': hover'. Ini membolehkan anda menukar gaya nota kaki apabila pengguna melayang di atasnya dengan tetikus mereka. Sebagai contoh, anda boleh menukar warna latar belakang nota kaki, atau membuatnya muncul dalam kotak pop timbul. Walau bagaimanapun, penting untuk memastikan kesan hover ini juga boleh diakses oleh pengguna papan kekunci dan pengguna teknologi bantuan.

Bolehkah saya menggunakan CSS untuk membuat nota kaki dalam bahasa yang berbeza? CSS untuk membuat nota kaki dalam bahasa yang berbeza. Ini boleh dicapai dengan menggunakan kelas pseudo ': lang ()' untuk memohon gaya yang berbeza untuk nota kaki berdasarkan bahasa. Ini membolehkan anda memenuhi khalayak yang pelbagai dan memastikan kandungan anda dapat diakses oleh semua pengguna, tanpa mengira bahasa mereka.

Atas ialah kandungan terperinci Nota kaki yang boleh diakses dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!