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中文網其他相關文章！