文件

除了結構以外， 打造及設計無障礙的數位無障礙功能整個學習過程中 無障礙課程涵蓋許多元素

本單元著重介紹特定產品不一定能融入其中的特定元素 其他單元，但都很實用

網頁標題

HTML <title> 元素，可定義使用者即將瀏覽的網頁或畫面內容 無須專人管理它位於 的 <head> 部分，共 HTML 文件，且等同於網頁的 <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 會嘗試讀出英文 像是西班牙文口音和抑揚頓挫這個組合會導致無法使用 感到不滿

錯誤做法
<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>」代碼。這樣一來，低視能的使用者就能捲動至 <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 代碼。