文字標籤和名稱

在影像地圖中，為每個 <area> 元素提供一個包含描述區域連結到的資源名稱的 alt 屬性。如果不這樣做，影像地圖將難以使用輔助技術 - 他們需要替代文字才能理解影像的用途。

以下示例展示了一個簡單的影像地圖（取自 H24：為影像地圖的區域元素提供文字替代方案）

<img
  src="welcome.gif"
  usemap="#map1"
  alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" />
  <area
    shape="rect"
    coords="34,34,100,100"
    href="media.html"
    alt="Audio visual lab" />
</map>

請參見 <area> 元素參考頁面，獲取一個互動式示例。

• <area>
• H24：為影像地圖的區域元素提供文字替代方案

對於其內容充當對話方塊的任何容器（例如，要求使用者做出選擇或對正在執行的操作做出響應的模式對話方塊），請為其提供描述性標籤或名稱，以便輔助技術使用者可以輕鬆地發現其目的。

對話方塊通常用 ARIA role="dialog" 或 role="alertdialog" 表示；您可以使用 aria-label 或 aria-labelledby 屬性提供標籤。

以下示例展示了一個簡單的對話方塊，使用 role="dialog" 定義並使用 aria-labelledby 新增標籤。

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

如果對話方塊沒有標題，您可以改用 aria-label 包含標籤文字

<div role="dialog" aria-label="Personal details updated confirmation">
  <p>
    Your personal details were successfully updated. You can change your details
    at any time in the user account section.
  </p>
  <button>Close</button>
</div>

• role="dialog"
• role="alertdialog"
• aria-label
• aria-labelledby
• WAI-ARIA：dialog 角色
• 對話方塊創作實踐

在每個 HTML 文件中包含一個 <title> 來描述頁面的用途非常重要。輔助技術的使用者通常會透過閱讀頁面的標題來推斷頁面包含的內容。如果標題不可用，他們必須導航頁面才能確定其內容，這將是一個耗時且可能令人困惑的過程。

有關 <title> 元素的參考文章的標題如下所示

<title>
  &lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language |
  MDN
</title>

另一個示例可能如下所示

<title>Fill in your details to register — myGov services</title>

為了幫助使用者，您可以更新頁面標題值以反映重要的頁面狀態更改（例如，表單驗證問題）

<title>2 errors — Fill in your details to register — myGov services</title>

• <title>

確保嵌入內容的元素具有 title 屬性來描述嵌入式內容。這包括 <embed> 和 <object> 元素。這些元素通常用於圖形內容，與 <img> 元素類似。描述性標題可以幫助輔助技術的使用者瞭解元素正在顯示的內容。

為了獲得最佳無障礙性，請在 <figure> 元素中包含一個 <figcaption>，即使這樣做在技術上是可選的。標題是圖形中任何替代文字的補充。標題描述了圖形在文件中的用途，這可能不同於對視覺專案的簡單描述，如替代文字所提供的那樣。

以下示例展示了帶有標題的圖形程式碼。alt 屬性的 <img> 描述了影像的外觀；<figcaption> 從功能角度描述了影像（在本例中，是影像中花的拉丁名稱）。

<figure>
  <img
    src="milkweed.jpg"
    alt="Black and white close-up photo of milkweed flowers" />
  <figcaption>Asclepias verticillata</figcaption>
</figure>

域集元素必須有一個文字描述，類似於其他表單元素。使用 <legend> 元素描述域集的用途。

當使用 <fieldset> 元素將一組表單元素分組在一起時，您應該在其中包含一個巢狀的 <legend> 元素，其中包含對該組的清晰描述。

輔助技術的使用者在嘗試弄清楚該組的總體目的時，會發現此描述很有幫助。如果沒有圖例，他們將不得不瀏覽該組中的各個表單控制元件以推斷總體目的，這可能會導致混淆。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

您可以在 <fieldset> 參考頁面 上看到此示例的即時互動式版本。

• <fieldset>
• <legend>

表單中的所有元素都必須有一個 <label> 來標識其用途。這適用於所有型別的 <input> 專案，以及 <button>、<output>、<select>、<textarea>、<progress> 和 <meter> 元素，以及任何具有 switch ARIA 角色 的元素。

表單元素可以放置在 <label> 內，在這種情況下，表單元素和標籤之間的關聯從結構上就很明顯。或者，您可以透過將表單元素的 id 值指定為標籤的 for 屬性的值，來在 <label> 和表單元素之間建立關聯。

除了每個表單元素都有一個 <label> 之外，這些標籤還應該是可見的，而不是隱藏的。可見的標籤有助於所有使用者瞭解表單元素的用途。不要依賴佔位符文字，因為它會在使用者開始鍵入時消失。

框架元素，包括 <iframe> 和舊的、過時的 <frame>，必須有一個標題來描述框架的內容。使用 title 屬性標記框架元素。如果沒有標題，輔助技術的使用者必須導航到框架中才能瞭解其包含的內容，這可能很困難且令人困惑。

<frame> 元素不再是 HTML 規範的一部分。瀏覽器將來可能會取消對它的支援。此外，螢幕閱讀器很難導航包含 <frame> 元素的頁面。為了獲得最佳的可訪問性和未來的維護，重新設計使用框架的任何頁面，以使用 CSS 實現類似的佈局。

作為最佳實踐，還為包含在框架中的文件提供一個 <title>，其內容與框架的 title 屬性相同。（這假設包含的文件在您的控制之下；如果不是，請嘗試使框架的 title 屬性與文件的標題匹配。）一些螢幕閱讀器會將 title 屬性的內容替換為包含的文件的 <title> 的內容。在兩個地方提供相同的標題是最安全和最容易訪問的。

確保您的標題具有非空文字內容，並且不會被隱藏，例如使用 CSS display:none 或 aria-hidden=true。螢幕閱讀器使用者依賴標題來了解文件的結構和內容。

此外，請確保您僅將 標題元素 用於實際的節標題，而不是作為使文字突出顯示的快捷方式。螢幕閱讀器使用者通常“瀏覽”頁面的標題，就像有視力的人一樣；用標題元素標記的非標題文字可能會導致混淆。

確保您的標題具有非空文字內容，並且不會被隱藏，例如使用 CSS display:none 或 aria-hidden=true。螢幕閱讀器使用者依賴標題來了解文件的結構和內容。不要使用標題元素來標記影像或其他圖形內容。

確保 <iframe> 元素具有 title 屬性來描述框架的內容。如果沒有標題，輔助技術的使用者必須導航到框架中才能瞭解其包含的內容，這可能很困難且令人困惑。

作為最佳實踐，還為包含在框架中的文件提供一個 <title>，其內容與框架的 title 屬性相同。（這假設包含的文件在您的控制之下；如果不是，請嘗試使框架的 title 屬性與文件的標題匹配。）一些螢幕閱讀器會將 title 屬性的內容替換為包含的文件的 <title> 的內容。在兩個地方提供相同的標題是最安全和最容易訪問的。

為所有內容豐富的（即非裝飾性的）影像和類似影像的元素提供描述性文字。這包括 SVG 影像、<img>、<canvas>、<map> 和 <area> 元素，以及 <input> 元素（其中 type=image）和 <object> 元素（其中 type 以 image/ 開頭）。執行此操作的典型方法是使用 alt 屬性。確保描述傳達了影像中顯示的內容。

如果某個元素旨在供使用者與其互動，則該元素應具有標籤。互動式元素包括連結 (<a>)、表單元素、按鈕以及任何具有滑鼠或鍵盤事件處理程式的元素。標記元素的方式取決於其型別：對於表單元素，使用 <label>；對於連結、按鈕和可點選元素，元素的文字內容通常提供標籤。如果不存在其他標記元素的選項，請使用 aria-label 屬性。

在 <optgroup> 元素中，使用 label 屬性描述該組，以便輔助技術可以為其使用者訪問該組。

在本例中，<optgroup> 元素上的 label 屬性為選項組提供類別名稱。

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

如果您使用 ARIA toolbar 角色在 Web 應用程式中定義了多個工具欄，則必須使用 aria-label 屬性標記每個工具欄，以便輔助技術可以描述它。即使每個頁面只有一個工具欄，標記工具欄也是一個好習慣。

• W3C ARIA 工具欄示例

1.1.1 非文字內容 (A)

向用戶呈現的所有非文字內容都具有文字替代，這些替代文字具有等效的用途，除了上面連結中列出的情況以外。

2.4.4 連結目的（在上下文中）（A）

每個連結的目的可以透過連結文字本身或透過連結文字與其以程式設計方式確定的連結上下文一起確定，除非連結的目的對一般使用者來說是模稜兩可的。

2.4.9 連結目的（僅連結）（AAA）

提供了一種機制，可以僅透過連結文字識別每個連結的目的，除非連結的目的對一般使用者來說是模稜兩可的。