HTML：無障礙的良好基礎

隨著您對 HTML 瞭解更多資訊（閱讀更多資源、檢視更多示例等），您將不斷看到一個共同的主題：使用語義 HTML 的重要性（有時稱為 POSH 或純舊語義 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 的濫用是由於尚未完全遺忘的傳統做法造成的，而另一些則是純粹的無知。無論如何，您都應該替換這種糟糕的程式碼。

有時您無法擺脫糟糕的標記——您的頁面可能是由您無法完全控制的某種伺服器端框架生成的，或者您的頁面上可能存在您無法控制的第三方內容（如廣告橫幅）。

目標不是“全有或全無”；您可以做出的任何改進都將有助於無障礙訪問事業。

螢幕閱讀器使用者可以擁有的最佳無障礙輔助工具之一是具有標題、段落、列表等的出色內容結構。一個出色的語義示例可能如下所示

<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> 標籤來描述它們。

在過去，人們習慣使用 HTML 表格來建立頁面佈局——使用不同的表格單元格來包含頁首、頁尾、側邊欄、主要內容列等。這不是一個好主意，因為螢幕閱讀器可能會給出令人困惑的讀數，尤其是在佈局複雜且包含許多巢狀表格的情況下。

嘗試我們的示例 table-layout.html 示例，它看起來像這樣

<table width="1200">
  <!-- main heading row -->
  <tr id="heading">
    <td colspan="6">
      <h1 align="center">Header</h1>
    </td>
  </tr>
  <!-- nav menu row -->
  <tr id="nav" bgcolor="#ffffff">
    <td width="200">
      <a href="#" align="center">Home</a>
    </td>
    <td width="200">
      <a href="#" align="center">Our team</a>
    </td>
    <td width="200">
      <a href="#" align="center">Projects</a>
    </td>
    <td width="200">
      <a href="#" align="center">Contact</a>
    </td>
    <td width="300">
      <form width="300">
        <label
          >Search
          <input
            type="search"
            name="q"
            placeholder="Search query"
            width="300" />
        </label>
      </form>
    </td>
    <td width="100">
      <button width="100">Go!</button>
    </td>
  </tr>
  <!-- spacer row -->
  <tr id="spacer" height="10">
    <td></td>
  </tr>
  <!-- main content and aside row -->
  <tr id="main">
    <td id="content" colspan="4">
      <!-- main content goes here -->
    </td>
    <td id="aside" colspan="2" valign="top">
      <h2>Related</h2>

      <!-- aside content goes here -->
    </td>
  </tr>
  <!-- spacer row -->
  <tr id="spacer" height="10">
    <td></td>
  </tr>
  <!-- footer row -->
  <tr id="footer">
    <td colspan="6">
      <p>©Copyright 1996 by nobody. All rights reversed.</p>
    </td>
  </tr>
</table>

如果您嘗試使用螢幕閱讀器導航它，它可能會告訴您要檢視一個表格（儘管一些螢幕閱讀器可以猜測表格佈局和資料表格之間的區別）。然後您可能（取決於您使用的螢幕閱讀器）需要作為物件進入表格並分別檢視其功能，然後退出表格繼續瀏覽內容。

表格佈局是過去時代的遺物——當瀏覽器中的 CSS 支援並不普遍時，它們是有意義的，但現在它們只是給螢幕閱讀器使用者造成了混亂。此外，它們的原始碼需要更多標記，這使得它們不太靈活，更難以維護。您可以透過將您以前使用 更現代的網站結構示例 的體驗進行比較來驗證這些說法，它可能看起來像這樣

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

如果您使用螢幕閱讀器嘗試我們更現代的結構示例，您會注意到佈局標記不再幹擾或導致內容讀數混亂。它也更加精簡，程式碼大小更小，這意味著程式碼更容易維護，並且使用者下載所需的頻寬更少，這對於那些使用慢速連線的使用者來說尤其有利。

建立佈局時另一個需要考慮的是使用上面示例中所示的 HTML 語義元素（參見 內容分節）——您可以僅使用巢狀的 <div> 元素來建立佈局，但最好使用適當的分節元素來包裝您的主要導航 (<nav>)、頁尾 (<footer>)、重複的內容單元 (<article>) 等。這些為螢幕閱讀器（和其他工具）提供了額外的語義，以便為使用者提供有關他們正在瀏覽的內容的更多提示（參見 螢幕閱讀器對新的 HTML5 分節元素的支援，以瞭解螢幕閱讀器支援是什麼樣的）。

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> 按鈕賦予了可聚焦的能力（包括透過 Tab 鍵），方法是為每個按鈕新增 tabindex="0" 屬性。我們還包含 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 鍵順序（以正數值順序指定），而不是僅僅按其預設的原始碼順序進行 Tab 鍵訪問。這幾乎總是不可取的，因為它會導致很大的混亂。只有在確實需要時才使用它，例如，如果佈局以與原始碼非常不同的視覺順序顯示內容，並且您想使內容更合理地工作。tabindex 還有另外兩個選項。

• tabindex="0" - 如上所述，此值允許原本不可 Tab 鍵訪問的元素變得可 Tab 鍵訪問。這是 tabindex 最有用的值。
• tabindex="-1" - 這允許原本不可 Tab 鍵訪問的元素以程式設計方式接收焦點，例如，透過 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 屬性都執行類似的任務——它們充當表格的替代文字，為螢幕閱讀器使用者提供表格內容的簡要總結。<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, image”。它會讀出檔名以嘗試提供一些幫助。在這個示例中，使用者至少會知道它是一種恐龍，但通常檔案可能使用機器生成的檔名上傳（例如，來自數碼相機），這些檔名可能無法提供影像內容的任何上下文。

當螢幕閱讀器遇到第二個影像時，它會讀出完整的 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 樣式很有用，並且提供了一種在原始碼中將影像描述放在影像旁邊的方法。

<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，預設、已訪問和焦點/活動狀態之間的對比度要求為 3:1，所有這些狀態顏色與背景顏色之間的對比度要求為 4.5:1。

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

這些值會導致在複製或拖動連結、在新標籤或視窗中開啟連結、新增書籤以及 JavaScript 仍在下載、出錯或被停用時出現意外行為。這也向輔助技術（例如螢幕閱讀器）傳達了不正確的語義。在這種情況下，建議使用 <button> 而不是它。一般來說，您只應使用錨點來使用正確的 URL 進行導航。

透過 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 技術

跳過連結，也稱為跳過導航，是一個 a 元素，儘可能靠近開啟的 <body> 元素，該元素連結到頁面主要內容的開頭。此連結允許使用者繞過網站多個頁面中重複的內容，例如網站的頁首和主要導航。

跳過連結對於使用輔助技術（例如開關控制、語音命令或嘴巴棒/頭部棒）導航的人特別有用，因為在重複的連結之間移動可能會是一項繁瑣的任務。

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

大量相互靠近的互動式內容（包括錨點）應該插入空格以將其隔開。這種間距有利於患有精細運動控制問題的人，他們可能會在導航時意外啟用錯誤的互動式內容。

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

• 手抖和巨型按鈕問題 - Axess 實驗室

您已到達本文的結尾，但您還記得最重要的資訊嗎？請檢視 測試您的技能：HTML 可訪問性，以驗證您在繼續之前是否已保留此資訊。

您現在應該精通為大多數情況編寫可訪問的 HTML。我們的 WAI-ARIA 基礎知識文章將有助於彌補這些知識的不足，但這篇文章已經涵蓋了基礎知識。接下來，我們將探索 CSS 和 JavaScript，以及它們在良好或不良使用情況下如何影響可訪問性。

• 前一個
• 概述：無障礙
• 下一個