左邊三個按鈕分別是英文、繁體、簡體,CMS 每張圖有 alt_text_en / cht / chs 三個欄位,點一下複製,貼進對應欄位。「已改」的勾選只存在你這台機器的瀏覽器裡,換機器不會同步。
一、系裡在 CMS 就能改(46 項)
教員個人頁:頭像完全沒有 alt 屬性13 項
這 13 張是全站唯一被自動檢測抓到的 1.1.1 違規。讀屏軟件遇到沒有 alt 的圖片,會改讀圖片檔名,例如「Du-portrait1.jpg」。
Dr CHEUNG, Bianca Yin-ki
Prof. TSUI, Chung Man Carmen
Prof. CHAN, Catherine See
Prof. LIU, William Guanglin
Dr. CHANG, Kin Ian Monica
Prof. LEE, Kai Chun Katon
教員列表:alt 值被寫成「alt= 姓名」15 項
有人把 alt= 連同等號一起打進了 CMS 的 alt 欄位。屬性存在,所以自動檢測不會報錯,但讀屏軟件會念成「alt 等於 Prof AN Bo」。同一組頭像在 People 和 People / Staff 兩頁各出現一次。
Dr CHEUNG, Bianca Yin-ki
alt= Prof CHEUNG, Bianca Yin-ki Prof. TSUI, Chung Man Carmen
alt= Prof TSUI, Chung Man CarmenProf. CHAN, Catherine See
alt= Prof CHAN Catherine S. Prof. DU, Chunmei
alt= Prof DU, Chunmei Prof. Mark Hampton
alt= Prof HAMPTON Mark A. Prof. LAU, Chi-pang
alt= Prof LAU Chi-pang Prof. ZHANG, Lei
alt= Prof ZHANG, LeiProf. LIU, William Guanglin
alt= Prof. LIU, William GuanglinDr. CHANG, Kin Ian Monica
alt= Dr CHANG, Kin Ian Monica Prof. LEE, Kai Chun Katon
alt= Prof LEE, Kai Chun KatonProf. LEUNG, Vincent S.
alt= Prof LEUNG, Vincent S. Prof. LI, Youjia
alt= Prof LI, Youjia Prof. DOWD, Matthew J.
alt= Prof DOWD Matthew J.Prof. TSENG-PUTTERMAN, Mark
alt= Prof TSENG-PUTTERMAN Mark首頁 Featured Research:13 張書封同樣被寫成「alt= 書名」13 項
和教員列表同一個錄入錯誤。順帶修好兩處書名排版:New Asia College 前面缺了撇號,另外兩本書名缺冒號。
Savage: The Making of Modern Dogs in British Hong Kong (Corn
alt= Savage: The Making of Modern Dogs in British Hong Kong (Cornell)Everyday Occupation: American Soldiers and Chinese Civilians
alt= Everyday Occupation: American Soldiers and Chinese Civilians after World War II (Cambridge)The Macanese Diaspora in British Hong Kong: A Century of Tra
alt= The Macanese Diaspora in British Hong Kong: A Century of Transimperial Drifting (Amsterdam)Confucianism, Colonialism, and the Cold War: Chinese Cultura
alt= Confucianism, Colonialism, and the Cold War: Chinese Cultural Education at Hong Kong s New Asia College (Brill)Gu Hongming's Eccentric Chinese Odyssey (UPenn)
alt= Gu Hongming's Eccentric Chinese Odyssey (UPenn)冷戰時期的美國與東亞社會 (秀威)
alt= 冷戰時期的美國與東亞社會 (秀威)Hong Kong and British Culture, 1945-97 (Manchester)
alt= Hong Kong and British culture, 1945-97 (Manchester)香港史:從遠古到九七 (CityU)
alt= 香港史:從遠古到九七 (CityU)The Politics of the Past in Early China (Cambridge)
alt= The Politics of the Past in Early China (Cambridge)The Chinese Market Economy, 1000–1500 (SUNY)
alt= The Chinese Market Economy, 1000–1500 (SUNY)Everyday Architecture in Context: Public Markets in Hong Kon
alt= Everyday Architecture in Context Public Markets in Hong Kong 1842–1981 (CUHK)香港街市:日常建築裏的城市脈絡 1842-1981 (香港中文大學出版社)
alt= 香港街市 日常建築裏的城市脈絡 1842-1981 (香港中文大學出版社)Water Lords: Beijing’s Drinking Water and Its Carriers, 1644
alt= Water Lords: Beijing’s Drinking Water and Its Carriers, 1644–1937News 頁:四張資訊日相片的 alt 全是「Photos」4 項
「Photos」不描述任何內容,等於沒有。這四張正好對得上 Vincy 那份 Word 文檔裡的 Information Day 2025 條目,下面的英文是按她的描述縮短的,中文是我補的。
20251101_104529.jpg
Photos20251101_104214.jpg
Photos20251101_100017.jpg
Photos20251101_121810.jpg
PhotosAbout Us 頁:橫幅的 alt 是「Intro」1 項
這張圖裡有文字(Department of History 歷史系)和三種書體的「史」字。圖片內的文字必須出現在 alt 裡,否則讀屏用戶完全接觸不到。
頁首橫幅
Intro二、要 ITSC 改的(模板層,系裡改不了)
這些欄位和樣式在全校共用模板裡,系裡的 CMS 編輯器看不到。學校的無障礙聲明(ln.edu.hk/accessibility)寫明全站符合 WCAG 2.0 AA、由 ITSC 負責,所以這一節是提醒他們兌現已經寫下的承諾。
嵌入的地圖沒有 title
頁面裡的 iframe 沒有 title 屬性,讀屏軟件只會念「frame」,用戶不知道要不要進去。
建議:在模板的 iframe 加 title="Location map of the Department of History"。
標題層級跳級
例如 h2 之後直接跳到 h4。讀屏用戶靠標題層級瀏覽頁面,跳級會讓結構讀不通。
建議:模板裡的標題層級要順序排列,或把純裝飾的大字改成非標題元素。
空標題
有 h 標籤但裡面沒有文字,多半是排版用的空行。讀屏會念出一個空標題。
建議:刪掉空的標題標籤,或改用 div/p 做間距。
表格有空的表頭格
表頭格是空的,讀屏用戶聽不出這一欄是什麼。
建議:補上表頭文字,或把該欄改成非表頭。
可捲動區域鍵盤到不了
頁面裡有一塊需要橫向捲動的內容,但它不能用鍵盤聚焦,只能用滑鼠捲。這正是 Cath 說的第二項。
建議:給該容器加 tabindex="0" 和可辨識的名稱。
主選單的下拉沒有 aria 狀態
下拉觸發元素是普通連結,沒有 aria-haspopup 和 aria-expanded,讀屏用戶不知道有子選單,也不知道它是開是關。實測用 Enter 可以打開頂欄的 Quick Links,功能是通的,缺的是狀態播報。
建議:觸發元素補 aria-haspopup="true" 與動態的 aria-expanded。
裝飾圖的 alt 是無意義的英文詞
Site Logo、tagline(兩次)、Subsite Background、Logo、uni-overall-6star。純裝飾的應該用空 alt="" 讓讀屏跳過;校徽和 tagline 應該給真正的文字。這些欄位在系裡的 CMS 編輯器裡看不到,是全校模板。
建議:Subsite Background 與重複的 tagline 改成 alt="";校徽改成「Lingnan University 嶺南大學」;六星徽章改成實際含義或留空。
中文版頁面沿用英文 alt
繁體版教員頁上,頭像的 alt 仍然是 alt= Prof DU, Chunmei。三語站點應該三語都有 alt,CMS 本身有 alt_text_en / cht / chs 三個欄位。
建議:系裡負責內容欄位的中文版本,模板圖片由 ITSC 負責。
對比度需要人手覆核
自動檢測無法判定(多數是疊在圖片或漸變上的文字),需要人手抽查。
建議:ITSC 用取色工具核對紅底白字與圖片上的文字。
Bo 的頭像掛在校外圖床
個人頁的頭像檔案來自 i.postimg.cc,不在校內伺服器上。那個圖床哪天掛了或換了規則,頭像就沒了。
建議:把圖片重新上傳到 CMS。
三、已經合格的部分
- 跳至主內容連結存在,聚焦時會顯示在頁面頂部(實測截圖為證)
- 縮放到 200%(等同 625px 視窗)沒有橫向捲動條,版面正常回流到窄版
- 頂欄 Quick Links 下拉可以用 Tab 到達、Enter 打開
- 全站 374 張圖片裡,只有 13 張真的缺 alt 屬性,其餘都有(問題在內容品質)
- 31 個頁面裡,超過一半的頁面自動檢測 0 violation
- 瀏覽器預設的藍色聚焦框在實測中可見
四、方法
31 個頁面逐頁載入後執行 axe-core 4.10,規則集為 WCAG 2.0/2.1 A 與 AA。縮放測試以 625px 視窗模擬 1280px 螢幕下的 200% 縮放,檢查 document.scrollWidth 是否超出視窗。鍵盤測試為真實按鍵:由跳至主內容連結起連按 Tab,觀察聚焦位置與可見度,並以 Enter 測試下拉選單。alt 內容品質問題(alt= 前綴、Photos、Intro)自動檢測不會報,是逐頁人手核對 374 張圖片後找出來的。