除了結構以外, 打造及設計無障礙的數位無障礙功能整個學習過程中 無障礙課程涵蓋許多元素
本單元著重介紹特定產品不一定能融入其中的特定元素 其他單元,但都很實用
網頁標題
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
,並為內容使用其他語言的任何元素設定其他語言。<html>
元素中加入所有語言。例如 <html lang="en,lt,pl,pt">