文件

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

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

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>

隨堂測驗

測試您對文件無障礙功能的瞭解程度。

您的網站是多語言的線上教科書,在單一頁面上顯示多種語言。將說明內容告知輔助技術的最佳做法為何?

<html> 設定主要 lang,並為內容使用其他語言的任何元素設定其他語言。
別擔心,AT 會自動讀出每種語言。
請在 <html> 元素中加入所有語言。例如 <html lang="en,lt,pl,pt">