除了結構,在建構及設計數位無障礙功能時,還有許多支援的 HTML 元素需要考量。在「瞭解無障礙功能」課程中,我們介紹了許多元素。
本單元著重於非常具體的元素,這些元素不完全符合任何其他單元,但瞭解這些元素很有用。
網頁標題
HTML <title> 元素會定義使用者即將體驗的網頁或畫面內容。這項資訊位於 HTML 文件的 <head> 區段,相當於網頁的 <h1> 或主要主題。標題內容會顯示在瀏覽器分頁中,協助使用者瞭解自己造訪的頁面,但不會顯示在網站或應用程式本身。
在單頁應用程式 (SPA) 中,<title> 的處理方式略有不同,因為使用者不會像在多頁網站上那樣瀏覽網頁。如果是 SPA,document.title 屬性的值可以手動新增,也可以透過輔助套件新增,視 JavaScript 架構而定。向螢幕閱讀器使用者播報更新後的網頁標題可能需要額外作業。
描述性網頁標題對使用者和搜尋引擎最佳化 (SEO) 都有好處,但請勿過度使用,加入大量關鍵字。因為 AT 使用者造訪網頁時,系統會先朗讀標題,因此標題必須準確、獨特、具描述性,但也要簡明扼要。
撰寫網頁標題時,建議先「預先載入」內部網頁或重要內容,然後再加入任何先前的網頁或資訊。這樣一來,AT 使用者就不必重複聆聽已聽過的資訊。
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
語言
網頁語言
網頁語言屬性 (lang) 會設定整個網頁的預設語言。這項屬性會新增至 <html> 標記。請在每個網頁中加入有效的語言屬性,向 AT 指出應使用的語言。
建議使用雙字元 ISO 語言代碼,以擴大 AT 涵蓋範圍,因為許多 AT 不支援擴充語言代碼。
如果完全沒有語言屬性,AT 會預設為使用者程式設計的語言。舉例來說,如果 AT 設為西班牙文,但使用者造訪英文網站或應用程式,AT 會嘗試以西班牙文口音和語調朗讀英文文字。這種組合會導致數位產品無法使用,使用者也會感到沮喪。
<html>...</html>
<html lang="en">...</html>
lang 屬性只能與一種語言建立關聯。也就是說,即使網頁有多種語言,<html> 屬性也只能有一種語言。將 lang 設為網頁的主要語言。
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
專區語言
你也可以使用語言屬性 (lang),在內容中切換語言。基本規則與全網頁語言屬性相同,但您要將屬性加到適當的網頁內元素,而不是 <html> 標記。
請注意,您新增至 <html> 元素的語言會向下層疊至所有內含元素,因此請務必先設定網頁頂層 lang 屬性的主要語言。
如果網頁元素是以其他語言撰寫,請將 lang 屬性新增至適當的包裝函式元素。這會覆寫頂層語言設定,直到該元素關閉為止。
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrame
iFrame 元素 (<iframe>) 用於在網頁中代管其他 HTML 網頁或第三方內容。這項元素基本上會在父項網頁中放入另一個網頁。iFrame 通常用於廣告、嵌入影片、網站分析和互動式內容。
如要讓 <iframe> 容易存取,請考量以下幾點。首先,每個具有不同內容的 <iframe> 都應在父項標記內包含標題元素。這個標題可為 AT 使用者提供 <iframe> 內內容的更多資訊。
其次,根據最佳做法,建議在 <iframe> 代碼設定中將捲動設為「auto」或「yes」。低視能使用者可藉此捲動 <iframe> 中的內容,查看原本可能無法看到的資訊。理想情況下,<iframe> 容器的高度和寬度也應具備彈性。
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>