文件

除了結構之外，在建構及設計數位無障礙功能時，還需要考量許多輔助 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> 都應在父項標記中加入 title 元素。這個標題可為 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 可自動讀取各語言。
雖然部分輔助技術可能具備語言偵測技能，但您無法保證輔助技術會正確判斷。
在 <html> 元素中加入所有語言。例如 <html lang="en,lt,pl,pt">
lang 屬性只能與一種語言建立關聯。
為 <html> 設定主要 lang，並為任何含有其他語言內容的元素設定其他語言。
AT 主要會依賴 <html> 語言屬性來讀取文件。如果有多種語言的文字，請務必在對應的元素 (例如章節或段落) 中加入 lang 屬性，並使用正確的兩個字母 ISO 代碼。