文件

除了結構以外，建構及設計適用於數位無障礙功能時，還有許多支援 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 就會嘗試用西班牙文的口音和節奏閱讀英文文字。這種組合導致數位產品無法使用，並造成困擾使用者。

錯誤做法
<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>

iFrames

iframe 元素 (<iframe>) 是用來代管網頁中的其他 HTML 網頁或第三方內容。基本上，這種 API 會將另一個網頁置於上層頁面中。iFrame 通常用於廣告、內嵌影片、網頁分析和互動式內容。

如要讓 <iframe> 易於存取，請考量以下幾點。首先，每個內容的 <iframe> 都應該在父項標記中納入一個標題元素。這款標題為 AT 使用者提供 <iframe> 內容的詳細資訊。

第二，最佳做法是在 <iframe> 代碼設定中，將捲動設為「自動」或「是」。這樣一來，低視能者就能捲動至 <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>

隨堂測驗

測試您對文件是否無障礙程度的相關知識。

您的網站是多語言線上教科書，其中顯示多種語言。如果要讓輔助技術瞭解文案的語言，最佳方式是什麼？

別擔心，AT 可以自動朗讀每一種語言。
雖然部分 AT 可能具備語言偵測能力，但無法保證 AT 正確猜測。
在 <html> 元素中加入所有語言。例如 <html lang="en,lt,pl,pt">
lang 屬性只能與一種語言建立關聯。
為 <html> 設定主要 lang，並對包含不同語言內容的任何元素設定其他語言。
AT 主要仰賴 <html> 語言屬性來讀取文件。如果您有多語言文字，請務必在對應的元素 (例如區段或段落) 中新增 lang 屬性，並使用正確的兩個字母 ISO 代碼。