HTML：可訪問性的良好基礎

HTML 和可訪問性

隨著您對 HTML 瞭解得更多——閱讀更多資源，檢視更多示例等等——您會不斷看到一個共同的主題：使用語義化 HTML 的重要性（有時稱為 POSH，即 Plain Old Semantic HTML）。這意味著儘可能將正確的 HTML 元素用於其預期目的。

您可能想知道為什麼這如此重要。畢竟，您可以使用 CSS 和 JavaScript 的組合來使幾乎任何 HTML 元素以您想要的任何方式執行。例如，您網站上播放影片的控制按鈕可以這樣標記：

<div>Play video</div>

但是，正如您稍後將更詳細地看到的那樣，為工作使用正確的元素是有意義的。

<button>Play video</button>

HTML <button> 不僅預設應用了一些合適的樣式（您可能需要覆蓋），它們還內建了鍵盤可訪問性——使用者可以使用 Tab 鍵在按鈕之間導航，並使用 Space、Return 或 Enter 啟用他們的選擇。

如果您從專案一開始就始終如一地編寫語義化 HTML，那麼它不會比非語義化（糟糕的）標記花費更多的時間。更棒的是，語義化標記除了可訪問性之外還有其他好處：

1. 更易於開發——如上所述，您可以免費獲得一些功能，而且它更容易理解。
2. 在移動裝置上更好——語義化 HTML 在檔案大小上可能比非語義化義大利麵條程式碼更輕，並且更容易實現響應式。
3. 有利於 SEO——搜尋引擎對標題、連結等內部的關鍵字比對非語義化 <div> 等內部的關鍵字更重視，因此您的文件將更容易被客戶找到。

讓我們繼續更詳細地瞭解可訪問的 HTML。

良好的語義

我們已經討論了正確語義的重要性，以及為什麼我們應該為工作使用正確的 HTML 元素。這不能忽視，因為如果處理不當，它是可訪問性嚴重受損的主要地方之一。

在網路上，事實是人們對 HTML 標記做了很多奇怪的事情。通常，濫用 HTML 是由於尚未消失的遺留實踐，但有時是因為作者不知道更好的方法。無論如何，您都應該在靜態 HTML 頁面以及來自伺服器端程式碼或 客戶端 JavaScript 框架（例如 React）的動態生成的 HTML 中，儘可能用良好的語義標記替換糟糕的程式碼。

有時您無法擺脫糟糕的標記——您的頁面可能依賴於您無法控制的伺服器端程式碼或 Web/框架元件，或者您的頁面上可能有第三方內容（例如廣告橫幅）。

目標不是“全有或全無”；您所做的每一次改進都將有助於可訪問性事業。

使用結構良好的文字內容

螢幕閱讀器使用者可以擁有的最佳可訪問性輔助工具之一是具有標題、段落、列表等的出色文字結構。一個好的語義示例可能如下所示：

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>
  This is the first subsection of my document. I'd love people to be able to
  find this content!
</p>

<h2>My 2nd subheading</h2>

<p>
  This is the second subsection of my content, which I think is more interesting
  than the last one.
</p>

我們為您準備了一個帶有較長文字的版本，供您使用螢幕閱讀器試用（請參閱 good-semantics.html）。如果您嘗試瀏覽此內容，您會發現它非常易於導航：

1. 當您瀏覽內容時，螢幕閱讀器會讀出每個標題，通知您什麼是標題，什麼是段落等。
2. 它在每個元素之後停止，讓您以自己舒適的速度進行操作。
3. 在許多螢幕閱讀器中，您可以跳轉到下一個/上一個標題。
4. 您還可以在許多螢幕閱讀器中調出所有標題的列表，從而將其用作方便的目錄來查詢特定內容。

人們有時會使用換行符和純粹用於樣式目的的 HTML 元素來編寫標題、段落等，例如：

<span style="font-size: 3em">My heading</span> <br /><br />
This is the first section of my document.
<br /><br />
I'll add another paragraph here too.
<br /><br />
1. Here is
<br /><br />
2. a list for
<br /><br />
3. you to read
<br /><br />
<span style="font-size: 2.5em">My subheading</span>
<br /><br />
This is the first subsection of my document. I'd love people to be able to find
this content!
<br /><br />
<span style="font-size: 2.5em">My 2nd subheading</span>
<br /><br />
This is the second subsection of my content. I think is more interesting than
the last one.

如果您使用螢幕閱讀器試用我們的較長版本（請參閱 bad-semantics.html），您將不會有很好的體驗——螢幕閱讀器沒有任何東西可以用作路標，因此您無法檢索有用的目錄，並且整個頁面被視為一個巨大的塊，因此它只是被一次性讀出。

除了可訪問性之外，還有其他問題——例如，使用 CSS 樣式內容或使用 JavaScript 操作內容更困難，因為沒有元素可以用作選擇器。

使用清晰的語言

您使用的語言也會影響可訪問性。一般來說，您應該使用清晰的語言，不要過於複雜，不要使用不必要的行話或俚語。這不僅有利於認知或其他殘疾人士；它也有利於那些母語不是文字語言的讀者、年輕人……實際上是每個人！除此之外，您還應該儘量避免使用螢幕閱讀器無法清晰朗讀的語言和字元。例如：

• 如果可以避免，請不要使用破折號。不要寫 5-7，而是寫 5 到 7。
• 展開縮寫——不要寫 Jan，而是寫 January。
• 展開首字母縮略詞，至少一兩次，然後使用 <abbr> 標籤來描述它們。

邏輯地組織頁面部分

您應該使用適當的分割槽元素來組織您的網頁，例如導航 (<nav>)、頁尾 (<footer>) 和重複內容單元 (<article>)。這些為螢幕閱讀器（和其他工具）提供了額外的語義，以為使用者提供有關他們正在導航的內容的額外線索。

例如，現代內容結構可能如下所示：

<header>
  <h1>Header</h1>
</header>

<nav>
  <!-- main navigation in here -->
</nav>

<!-- Here is our page's main content -->
<main>
  <!-- It contains an article -->
  <article>
    <h2>Article heading</h2>

    <!-- article content in here -->
  </article>

  <aside>
    <h2>Related</h2>

    <!-- aside content in here -->
  </aside>
</main>

<!-- And here is our main footer that is used across all the pages of our website -->

<footer>
  <!-- footer content in here -->
</footer>

您可以在此處找到完整示例。

除了擁有良好的語義和吸引人的佈局之外，您的內容還應該在源順序上具有邏輯意義——您總是可以在以後使用 CSS 將其放置在您想要的位置，但您應該首先正確設定源順序，這樣螢幕閱讀器使用者所讀到的內容才有意義。

儘可能使用語義化的 UI 控制元件

UI 控制元件指的是使用者與之互動的 Web 文件的主要部分——最常見的是按鈕、連結和表單控制元件。在本節中，我們將介紹建立此類控制元件時需要注意的基本可訪問性問題。關於 WAI-ARIA 和多媒體的後續文章將探討 UI 可訪問性的其他方面。

UI 控制元件可訪問性的一個關鍵方面是，預設情況下，瀏覽器允許它們透過鍵盤進行操作。您可以使用我們的 native-keyboard-accessibility.html 示例進行嘗試（請參閱原始碼）。在新標籤頁中開啟它，然後嘗試按 Tab 鍵；按下幾次後，您應該會看到 Tab 焦點開始在不同的可聚焦元素之間移動。在每個瀏覽器中，聚焦的元素都有一個突出顯示的預設樣式（不同瀏覽器之間略有不同），這樣您就可以判斷哪個元素被聚焦。

然後您可以按 Enter/Return 鍵以跟隨聚焦的連結或按下按鈕（我們包含了一些 JavaScript 來使按鈕彈出訊息），或者開始鍵入以在文字輸入中輸入文字。其他表單元素具有不同的控制元件；例如，<select> 元素可以使用向上和向下箭頭鍵顯示和迴圈其選項。

您基本上免費獲得了這種行為，只需使用適當的元素，例如：

<h1>Links</h1>

<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>
  Another link, to the
  <a href="https://mdn.club.tw">Mozilla Developer Network</a>.
</p>

<h2>Buttons</h2>

<p>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</p>

<h2>Form</h2>

<form>
  <div>
    <label for="name">Fill in your name:</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Enter your age:</label>
    <input type="text" id="age" name="age" />
  </div>
  <div>
    <label for="mood">Choose your mood:</label>
    <select id="mood" name="mood">
      <option>Happy</option>
      <option>Sad</option>
      <option>Angry</option>
      <option>Worried</option>
    </select>
  </div>
</form>

這意味著正確使用連結、按鈕、表單元素和標籤（包括表單控制元件的 <label> 元素）。

然而，這又是人們有時對 HTML 做奇怪事情的另一個案例。例如，您有時會看到使用 <div> 標記的按鈕，例如：

<div data-message="This is from the first button">Click me!</div>
<div data-message="This is from the second button">Click me too!</div>
<div data-message="This is from the third button">And me!</div>

但不建議使用此類程式碼——您會立即失去本應透過使用 <button> 元素獲得的原生鍵盤可訪問性，而且您也無法獲得按鈕的任何預設 CSS 樣式。在極少數甚至不存在的情況下，如果您需要將非按鈕元素用作按鈕，請使用 button 角色並實現所有預設按鈕行為，包括鍵盤和滑鼠按鈕支援。

重新構建鍵盤可訪問性

重新新增這些優勢需要一些工作（您可以在我們的 fake-div-buttons.html 示例中看到一個示例——另請參閱原始碼）。在這裡，我們透過給每個假 <div> 按鈕屬性 tabindex="0"，使它們能夠被聚焦（包括透過 tab 鍵）。我們還包含了 role="button"，以便螢幕閱讀器使用者知道他們可以聚焦並與該元素互動：

<div data-message="This is from the first button" tabindex="0" role="button">
  Click me!
</div>
<div data-message="This is from the second button" tabindex="0" role="button">
  Click me too!
</div>
<div data-message="This is from the third button" tabindex="0" role="button">
  And me!
</div>

基本上，tabindex 屬性主要用於允許可選項元素具有自定義的 Tab 順序（以正數值順序指定），而不是僅僅按照其預設源順序進行 Tab 切換。這幾乎總是一個壞主意，因為它可能導致嚴重的混亂。僅在您確實需要時使用它，例如，如果佈局以與原始碼非常不同的視覺順序顯示事物，並且您希望使事物工作得更合乎邏輯。tabindex 還有另外兩個選項：

• tabindex="0" ——如上所示，此值允許通常不可選的元素變得可選項。這是 tabindex 最有用的值。
• tabindex="-1" ——這允許通常不可選的元素以程式設計方式接收焦點，例如，透過 JavaScript，或作為連結的目標。

雖然上述新增允許我們 Tab 到按鈕，但它不允許我們透過 Enter/Return 鍵啟用它們。為此，我們必須新增以下 JavaScript 程式碼：

document.onkeydown = (e) => {
  // The Enter/Return key
  if (e.key === "Enter") {
    document.activeElement.click();
  }
};

在這裡，我們向 `document` 物件添加了一個監聽器，以檢測何時在鍵盤上按下了按鈕。我們透過事件物件的 key 屬性檢查按下了哪個按鈕；如果按下的鍵是 Enter/Return，我們使用 `document.activeElement.click()` 執行儲存在按鈕 `onclick` 處理程式中的函式。activeElement 為我們提供了當前頁面上聚焦的元素。

重新構建功能會帶來很多額外的麻煩。而且肯定還會有其他問題。最好一開始就為正確的工作使用正確的元素。

使用有意義的文字標籤

UI 控制元件文字標籤對所有使用者都非常有用，但正確使用它們對殘障使用者尤其重要。

您應該確保您的按鈕和連結文字標籤易於理解且具有區分性。不要僅僅將“點選此處”用作您的標籤，因為螢幕閱讀器使用者有時會列出按鈕和表單控制元件。以下截圖顯示了 Mac 上的 VoiceOver 列出了我們的控制元件。

確保您的標籤在脫離上下文、單獨閱讀以及在它們所在的段落上下文中都有意義。例如，以下顯示了一個好的連結文字示例：

<p>
  Whales are really awesome creatures.
  <a href="whales.html">Find out more about whales</a>.
</p>

但這並不是好的連結文字：

<p>
  Whales are really awesome creatures. To find out more about whales,
  <a href="whales.html">click here</a>.
</p>

表單標籤也很重要，可以提示您需要在每個表單輸入中輸入什麼。以下似乎是一個足夠合理的示例：

Fill in your name: <input type="text" id="name" name="name" />

然而，這對殘障使用者來說並不那麼有用。上面的示例中沒有任何內容可以明確地將標籤與表單輸入關聯起來，並使其清晰地說明如果您看不到它如何填寫。如果您使用某些螢幕閱讀器訪問此內容，您可能只會得到類似“編輯文字”的描述。

以下是一個更好的例子：

<div>
  <label for="name">Fill in your name:</label>
  <input type="text" id="name" name="name" />
</div>

有了這樣的程式碼，標籤將與輸入清晰關聯；描述將更像“填寫您的姓名：編輯文字”。

另外一個好處是，在大多數瀏覽器中，將標籤與表單輸入關聯意味著您可以單擊標籤來選擇或啟用表單元素。這為輸入提供了一個更大的點選區域，使其更容易選擇。

您可以在以下影片中找到關於正確文字標籤重要性以及如何使用 Firefox 可訪問性檢查器調查文字標籤問題的精彩解釋：

可訪問的資料表

基本資料表可以使用非常簡單的標記編寫，例如：

<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Pronouns</td>
  </tr>
  <tr>
    <td>Gabriel</td>
    <td>13</td>
    <td>he/him</td>
  </tr>
  <tr>
    <td>Elva</td>
    <td>8</td>
    <td>she/her</td>
  </tr>
  <tr>
    <td>Freida</td>
    <td>5</td>
    <td>she/her</td>
  </tr>
</table>

但這存在問題——螢幕閱讀器使用者無法將行或列關聯起來作為資料分組。要做到這一點，您需要知道標題行是什麼，以及它們是行、列等的標題。對於上面的表格，這隻能透過視覺方式完成（請參閱 bad-table.html 並親自嘗試示例）。

現在看看我們的朋克樂隊表格示例——您會看到一些可訪問性輔助工具在這裡發揮作用：

• 表頭是使用 <th> 元素定義的——您還可以使用 scope 屬性指定它們是行或列的標題。這為您提供了完整的資料組，螢幕閱讀器可以將其作為單個單元進行消費。
• <caption> 元素和 <table> 元素的 summary 屬性都做著類似的工作——它們充當表格的 alt 文字，為螢幕閱讀器使用者提供表格內容的有用快速摘要。通常首選 <caption> 元素，因為它也使其內容可供有視力的使用者訪問，他們也可能覺得它有用。您實際上不需要兩者都用。

替代文字

雖然文字內容本身具有可訪問性，但多媒體內容卻不一定如此——視障人士無法看到影像和影片內容，聽障人士無法聽到音訊內容。我們將在可訪問多媒體中詳細介紹影片和音訊內容，但本文我們將重點介紹不起眼的 <img> 元素的可訪問性。

我們編寫了一個簡單的示例，accessible-image.html，其中包含四張相同的圖片：

<img src="dinosaur.png" />

<img
  src="dinosaur.png"
  alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />

<img
  src="dinosaur.png"
  alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
  title="The Mozilla red dinosaur" />

<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">
  The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like
  a human, with small arms, and a large head with lots of sharp teeth.
</p>

第一個影像，當被螢幕閱讀器檢視時，並沒有真正為使用者提供太多幫助——例如，VoiceOver 會讀出“/dinosaur.png，影像”。它會讀出檔名以嘗試提供一些幫助。在這個例子中，使用者至少會知道這是一種恐龍，但通常檔案可能會以機器生成的檔名（例如，來自數碼相機）上傳，這些檔名很可能無法提供影像內容的上下文。

當螢幕閱讀器遇到第二張影像時，它會讀出完整的 alt 屬性——“一隻紅色的霸王龍：一種兩足恐龍，像人類一樣直立站立，手臂很小，頭部很大，有很多鋒利的牙齒。”。

這強調了不僅在使用所謂的alt 文字不可用時使用有意義的檔名，而且還強調了在任何可能的地方在 alt 屬性中提供 alt 文字的重要性。

請注意，alt 屬性的內容應始終直接表示影像及其視覺傳達的內容。alt 應簡短、簡潔，幷包含影像中傳達的所有資訊，且這些資訊未在周圍文字中重複。

單個影像的 alt 屬性內容因上下文而異。例如，如果 Fluffy 的照片是 Yuckymeat 狗糧評論旁邊的頭像，則 alt="Fluffy" 是合適的。如果照片是 Fluffy 在動物救助協會的領養頁面的一部分，則應包含影像中傳達的與潛在狗父母相關且未在周圍文字中重複的資訊。更長的描述，例如 alt="Fluffy，一隻毛很短的三色梗，嘴裡叼著一個網球。" 是合適的。由於周圍文字可能包含 Fluffy 的大小和品種，因此未包含在 alt 中。然而，由於狗的傳記可能不包括毛髮長度、顏色或玩具偏好，而潛在父母需要知道這些資訊，因此將其包含在內。影像是在戶外，還是 Fluffy 有一個紅色的項圈和藍色的牽引繩？這對於領養寵物來說並不重要，因此未包含在內。影像傳達的所有資訊，只要有視力的使用者可以訪問並且與上下文相關，都需要傳達；僅此而已。保持簡短、精確和有用。

不應在此處包含任何個人知識或額外描述，因為它對以前未見過影像的人沒有用。如果球是 Fluffy 最喜歡的玩具，或者有視力的使用者無法從影像中得知這一點，則不要包含它。

需要考慮的一點是，您的圖片在您的內容中是否有意義，或者它們是否純粹用於視覺裝飾，因此沒有意義。如果它們是裝飾性的，最好將 alt 屬性的值寫為空文字（請參閱 空 alt 屬性），或者只是將它們作為 CSS 背景圖片包含在頁面中。

如果您確實想提供額外的上下文資訊，您應該將其放在影像周圍的文字中，或者放在 title 屬性中，如上所示。在這種情況下，大多數螢幕閱讀器將讀出 alt 文字、title 屬性和檔名。此外，當滑鼠懸停時，瀏覽器會將 title 文字顯示為工具提示。

讓我們再快速看看第四種方法：

<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">The Mozilla red Tyrannosaurus…</p>

在這種情況下，我們根本沒有使用 alt 屬性——相反，我們將影像的描述作為常規文字段落呈現，給它一個 id，然後使用 aria-labelledby 屬性引用該 id，這使得螢幕閱讀器將該段落用作該影像的 alt 文字/標籤。如果您想將相同的文字用作多個影像的標籤——而 alt 無法做到這一點——這尤其有用。

圖和圖示題

HTML 包含兩個元素——<figure> 和 <figcaption>——它們將某種圖形（可以是任何東西，不一定是影像）與圖示題關聯起來：

<figure>
  <img
    src="dinosaur.png"
    alt="The Mozilla Tyrannosaurus"
    aria-describedby="dinodescr" />
  <figcaption id="dinodescr">
    A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
    human, with small arms, and a large head with lots of sharp teeth.
  </figcaption>
</figure>

雖然螢幕閱讀器對將圖示題與其圖形關聯的支援存在差異，但如果不存在關聯，則包含 aria-labelledby 或 aria-describedby 會建立該關聯。話雖如此，元素結構對於 CSS 樣式很有用，此外它還提供了一種在原始碼中將影像描述放在其旁邊的方法。

空的 alt 屬性

<h3>
  <img src="article-icon.png" alt="" />
  Tyrannosaurus Rex: the king of the dinosaurs
</h3>

有時影像會包含在頁面設計中，但其主要目的是視覺裝飾。您會在上面的程式碼示例中注意到影像的 alt 屬性為空——這是為了讓螢幕閱讀器識別影像，但不嘗試描述影像（而是它們會說“影像”或類似的話）。

使用空 alt 而不是不包含它的原因是，如果沒有提供 alt，許多螢幕閱讀器會宣佈整個影像 URL。在上面的示例中，影像充當與其關聯的標題的視覺裝飾。在這種情況下，以及影像僅是裝飾且沒有內容價值的情況下，您應該在 img 元素中包含一個空的 alt。另一種替代方法是使用 aria role 屬性 role="presentation"，因為這也可以阻止螢幕閱讀器讀出替代文字。

關於連結的更多資訊

連結（帶有 href 屬性的 <a> 元素），取決於它們的使用方式，可能會幫助或損害可訪問性。預設情況下，連結在外觀上是可訪問的。它們可以透過幫助使用者快速導航到文件的不同部分來提高可訪問性。如果它們的無障礙樣式被刪除，或者 JavaScript 導致它們以意想不到的方式行為，它們也可能會損害可訪問性。

連結樣式

預設情況下，連結在顏色和文字裝飾方面與其他文字在視覺上有所不同，連結預設為藍色並帶下劃線，訪問後為紫色並帶下劃線，並在獲得鍵盤焦點時帶有焦點環。

顏色不應作為區分連結和非連結內容的唯一方法。連結文字顏色，與所有文字一樣，必須與背景顏色有顯著差異（4.5:1 的對比度）。此外，連結應在視覺上與非連結文字有顯著差異，連結文字與周圍文字之間以及預設、已訪問和焦點/活動狀態之間至少有 3:1 的對比度要求，並且所有這些狀態顏色與背景顏色之間至少有 4.5:1 的對比度。

onclick 事件

錨標籤經常被濫用與 onclick 事件結合使用，透過將 href 設定為 "#" 或 "javascript:void(0)" 來建立偽按鈕，以防止頁面重新整理。

這些值在複製或拖動連結、在新標籤頁或視窗中開啟連結、收藏夾以及 JavaScript 仍在下載、出錯或被停用時會導致意外行為。這還會向輔助技術（例如螢幕閱讀器）傳達不正確的語義。在這些情況下，建議改用 <button>。通常，您應該只使用帶有正確 URL 的錨點進行導航。

外部連結和連結到非 HTML 資源

透過 target="_blank" 宣告在新標籤頁或視窗中開啟的連結，以及 href 值指向檔案資源的連結，應包含一個指示符，說明啟用連結時將發生的行為。

有低視力障礙、藉助螢幕閱讀技術導航或有認知障礙的人可能會在新標籤頁、視窗或應用程式意外開啟時感到困惑。舊版本的螢幕閱讀軟體甚至可能不會宣佈這種行為。

在新標籤頁或視窗中開啟的連結

<a target="_blank" href="https://www.wikipedia.org/"
  >Wikipedia (opens in a new window)</a
>

連結到非 HTML 資源

<a target="_blank" href="2017-annual-report.ppt"
  >2017 Annual Report (PowerPoint)</a
>

如果使用圖示代替文字來表示此類連結行為，請確保它包含替代描述。

• WebAIM：連結和超文字 - 超文字連結
• MDN 理解 WCAG，指南 3.2 解釋
• G200：僅在必要時從連結開啟新視窗和標籤 | W3C WCAG 2.0 技術
• G201：在新視窗開啟時向用戶提供高階警告 | W3C WCAG 2.0 技術

跳過連結

跳過連結，也稱為 skipnav，是一個 a 元素，放置在儘可能靠近開頭的 <body> 元素的位置，連結到頁面主要內容的開頭。此連結允許人們繞過網站多個頁面中重複的內容，例如網站的標題和主導航。

跳過連結對於藉助輔助技術（如開關控制、語音命令或口棒/頭杖）進行導航的人特別有用，因為透過重複連結移動可能是一項費力的任務。

• WebAIM：“跳過導航”連結
• 操作方法：使用跳過導航連結 - A11Y 專案
• MDN 對 WCAG 指南 2.4 的理解和解釋
• 理解成功準則 2.4.1 | W3C 理解 WCAG 2.0

臨近度

大量互動式內容（包括錨點）如果彼此在視覺上非常接近，則應插入空格以將其分隔。這種間隔對於患有精細運動控制問題的人是有益的，他們可能在導航時意外啟用錯誤的互動式內容。

可以使用 CSS 屬性（例如 margin）建立間距。

• 手抖和巨型按鈕問題 - Axess Lab

總結

現在，您應該已經非常熟悉在大多數情況下編寫可訪問的 HTML。在下一篇文章中，我們將為您提供一些測試，您可以使用它們來檢查您對所有這些資訊的理解和掌握程度。

• 上一頁
• 概述：Web 上的可訪問性
• 下一頁