文字標籤和名稱
在許多情況下，控制元件、對話方塊或其他網站功能應提供描述性名稱或標籤，以使使用者能夠使用輔助技術瞭解其用途以及如何正確操作。此類別中存在多種不同型別的問題，這些問題出現在不同的上下文中，並且每個問題都有其自己的解決方案。不同的問題和解決方案將在以下部分中討論。
使用 alt 屬性標記具有 href 屬性的 area 元素
在圖片地圖中，給每個 <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> 元素參考頁以獲取即時互動式示例。
另見
對話方塊應加標籤
對於其內容充當對話方塊的任何容器（例如，一個要求使用者做出選擇或響應所執行操作的模態對話方塊），為其提供一個描述性標籤或名稱，以便輔助技術使用者可以輕鬆發現其目的。
對話方塊通常由 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>
另見
文件必須有標題
在每個 HTML 文件中包含一個描述頁面目的的 <title> 非常重要。輔助技術使用者的一種常見導航技術是透過閱讀頁面標題來推斷頁面包含的內容。如果標題不可用，他們必須瀏覽頁面以確定其內容，這可能是一個耗時且可能令人困惑的過程。
示例
關於 <title> 元素的參考文章的標題如下
<title>
<title>: 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 屬性。這包括 <embed> 和 <object> 元素。這些元素通常用於圖形內容，就像 <img> 元素一樣。描述性標題有助於輔助技術使用者理解元素顯示的內容。
帶可選標題的圖應加標籤
為了獲得最佳可訪問性，請在 <figure> 元素中包含一個 <figcaption>，即使這樣做在技術上是可選的。標題是圖中影像的任何替代文字的補充。標題描述了圖中元素在文件中的目的，這可能與替代文字提供的視覺專案的描述不同。
示例
以下示例顯示了帶標題的圖的程式碼。<img> 的 alt 屬性描述了影像的外觀；<figcaption> 從功能角度描述它（在本例中是影像中花朵的拉丁名稱）。
<figure>
<img
src="milkweed.jpg"
alt="Black and white close-up photo of milkweed flowers" />
<figcaption>Asclepias verticillata</figcaption>
</figure>
Fieldset 元素必須加標籤
Fieldset 元素必須有文字描述，類似於其他表單元素。使用 <legend> 元素描述 fieldset 的目的。
使用 legend 標記 fieldset
當使用 <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> 參考頁上檢視此示例的即時互動版本。
另見
表單元素必須加標籤
表單中的所有元素都必須有一個標識其目的的 <label>。這適用於所有型別的 <input> 項，以及 <button>、<output>、<select>、<textarea>、<progress> 和 <meter> 元素，以及任何具有 switch ARIA 角色的元素。
表單元素可以放置在 <label> 內部，在這種情況下，表單元素和標籤之間的關聯從結構上是顯而易見的。或者，您可以透過將表單元素的 id 值指定為標籤的 for 屬性的值來在 <label> 和表單元素之間建立關聯。
示例
<label
>I agree to the terms and conditions.
<input type="checkbox" id="terms" name="terms" />
</label>
<input type="checkbox" id="email-opt-in" name="opt-in" />
<label for="email-opt-in">Yes, please send me news about this product.</label>
表單元素應具有可見的文字標籤
除了每個表單元素都應該有一個 <label> 之外，這些標籤還應該是可見的，而不是隱藏的。可見的標籤有助於所有使用者理解表單元素的用途。不要依賴佔位符文字，因為它在使用者開始輸入時就會消失。
Frame 元素必須加標籤
幀元素，無論是 <iframe> 還是較舊、已廢棄的 <frame>，都必須有一個標題來描述幀的內容。使用 title 屬性來標記幀元素。如果沒有標題，輔助技術使用者必須導航到幀中才能瞭解其包含的內容，這可能很困難且令人困惑。
<frame> 元素不再是 HTML 規範的一部分。瀏覽器將來可能會停止對其的支援。此外，螢幕閱讀器難以導航包含 <frame> 元素的頁面。為了獲得最佳可訪問性和未來的維護，請重新設計使用框架的頁面，以使用 CSS 實現類似的佈局。
作為最佳實踐，還應為幀中包含的文件提供一個 <title>，其內容與幀的 title 屬性相同。（這假設包含的文件在您的控制之下；如果不是，請嘗試將幀的 title 屬性與文件的標題匹配。）一些螢幕閱讀器將 title 屬性的內容替換為包含的文件的 <title> 的內容。在兩個位置提供相同的標題是最安全且最易於訪問的。
示例
<iframe
title="MDN Web docs"
width="300"
height="200"
src="https://mdn.club.tw">
</iframe>
標題必須加標籤
確保您的標題具有非空文字內容，並且不被隱藏，例如使用 CSS display:none 或 aria-hidden=true。螢幕閱讀器使用者依靠標題來理解文件的結構和內容。
此外，請確保您僅將標題元素用於實際的章節標題，而不是作為使文字突出的快捷方式。螢幕閱讀器使用者通常會“瀏覽”頁面的標題，就像有視力使用者一樣；用標題元素標記的非標題文字可能會導致混淆。
標題應具有可見文字內容
確保您的標題具有非空文字內容，並且不被隱藏，例如使用 CSS display:none 或 aria-hidden=true。螢幕閱讀器使用者依靠標題來理解文件的結構和內容。不要使用標題元素來標記影像或其他圖形內容。
使用 title 屬性描述 <iframe> 內容
確保 <iframe> 元素具有 title 屬性來描述幀的內容。如果沒有標題，輔助技術使用者必須導航到幀中才能瞭解其包含的內容，這可能很困難且令人困惑。
作為最佳實踐，還應為幀中包含的文件提供一個 <title>，其內容與幀的 title 屬性相同。（這假設包含的文件在您的控制之下；如果不是，請嘗試將幀的 title 屬性與文件的標題匹配。）一些螢幕閱讀器將 title 屬性的內容替換為包含的文件的 <title> 的內容。在兩個位置提供相同的標題是最安全且最易於訪問的。
帶圖片的內容必須加標籤
為所有內容性（即非裝飾性）影像和類影像元素提供描述性文字。這包括 SVG 影像、<img>、<canvas>、<map> 和 <area> 元素，以及 type=image 的 <input> 元素和 type 以 image/ 開頭的 <object> 元素。通常使用 alt 屬性來完成此操作。確保描述傳達了影像中顯示的內容。
示例
<img
src="milkweed.jgp"
alt="Black and white close-up photo of milkweed flowers" />
互動式元素必須加標籤
如果某個元素旨在供使用者與之互動，則它應該有一個標籤。互動式元素包括連結 (<a>)、表單元素、按鈕以及任何具有滑鼠或鍵盤事件處理程式的元素。標記元素的方式取決於其型別：對於表單元素，使用 <label>；對於連結、按鈕和可點選元素，元素的文字內容通常提供標籤。如果不存在其他標記元素選項，請使用 aria-label 屬性。
在 optgroup 元素上使用 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>
當有多個工具欄時，工具欄必須加標籤
如果您在 Web 應用程式中使用 ARIA toolbar 角色定義了多個工具欄，則必須使用 aria-label 屬性標記每個工具欄，以便輔助技術可以對其進行描述。即使每頁只有一個工具欄，也最好標記工具欄。
另見
相關的 WCAG 成功準則
- 1.1.1 非文字內容 (A)
-
呈現給使用者的所有非文字內容都具有等效用途的文字替代品，除了上述連結中列出的情況。
- 2.4.4 連結目的（在上下文中）(A)
-
每個連結的目的都可以單獨從連結文字或從連結文字及其程式化確定的連結上下文確定，除非連結的目的對一般使用者來說是模糊的。
- 2.4.9 連結目的（僅連結）(AAA)
-
提供了一種機制，允許僅從連結文字識別每個連結的目的，除非連結的目的對一般使用者來說是模糊的。