張貼公告時須符合無障礙規範
(行政同仁注意事項)
依據「政府網站無障礙化作業規定」及「WCAG 2.1規範」,為確保資訊傳遞公平,政府與學校網站應保障所有使用者(含視障及使用報讀機、螢幕助讀器等輔具者)獲取資訊之權利。請行政同仁務必遵循以下指引:
一、 公告標題及內容撰寫原則
- 標題夠具體: 嚴禁使用「內有重要公告」、「請點此」、「第一名竟然是『它』」、「震驚!這項法規1/1上路」等語意模糊文字。
- 結構化標題:使用系統內建的標題層級(如「標題1(H1)」、「標題2(H2)」)而非僅放大加粗字體。
- 內文有摘要: 網頁內文應提供文字重點摘要,不可僅寫「詳如附件」或只貼圖片。
- 圖片有替代文字(Alt Text):所有圖片皆須附上文字描述,讓視障者能透過螢幕閱讀器「聽」到圖片內容。
- 不單用圖片傳達資訊: 重要資訊不可僅存在於圖片或附件中,必須於網頁內文以文字呈現。
- 不單以顏色傳達資訊: 避免只用顏色代表重要,應搭配前後文強調或加註文字(如加註「重要:」)。
- 鍵盤可操作性:所有公告的功能(如展開清單、點擊按鈕)都必須能透過鍵盤(Tab 鍵)操作。
二、 超連結與URL處理事項
- 連結文字應具備意義: 即使脫離上下文獨立閱讀時,使用者也能了解連結的目的地或功能。避免用「點此觀看」、「按這裡」等無意義文字。
- 提供額外描述(Title):當連結文字本身意義不完全足夠時,能在標籤中使用title屬性來提供額外的內容描述。
- 視覺區別: 超連結必須在視覺上與普通文字有所區別。例如使用不同的顏色並加上底線。
- 註明開啟新視窗: 若連結會開啟新視窗或下載,請加註「(另開視窗)」。
- 保持焦點清晰: 不可移除 CSS 焦點外框 (outline),確保鍵盤使用者能定位。
- 鍵盤操作: 確保所有超連結都可以使用鍵盤導覽和聚焦,並有清晰的鍵盤焦點(例如外框或顏色變化),讓使用者知道目前停留在哪個連結。
- 強烈建議不要直接顯示冗長的網址: 螢幕閱讀器會逐字報讀網址字元,造成閱讀困難,請將網址嵌入描述文字中。
三、 常見錯誤與正確範例對照
| 項目 | ❌ 錯誤樣態 (不符規範) | ✅ 正確做法 (符合規範) |
|---|---|---|
| 內容呈現 | 「內文空白」或僅寫「詳如附件」,造成視障者閱讀中斷。 | 提供文字摘要:列出目的、時間等重點,不點開附件也能理解。 |
| 圖片使用 | 圖片內含大量文字,但內文沒有圖片內容的相關文字敘述。 | 以文字重新描述:將圖片重要資訊轉化為文字。替代文字 (Alt) 簡述標題,不重複長文。 |
| 附件處理 | 檔名為亂碼(15%FID50%.pdf)。 提供「紙本掃描」後轉存之 PDF (輔助軟體無法辨識文字)。 |
具意義命名與可讀性:檔名具實際意義。優先提供 ODF 格式,PDF 應確保可選取文字。 |
| 超連結處理 | 內文貼了一條超連結(或冗長網址),但沒有提供 title 屬性說明。 | 提供連結描述:將網址嵌入具意義的文字中,並使用 title 屬性補充目的地資訊(如:前往報名系統)。 |
| 排版習慣 | 使用大量「空白鍵」手動對齊文字 (如:時 間),導致報讀中斷。 | 避免人工留白:文字應保持連續,對齊需求應透過排版工具或表格處理。 |
✅ 發布前最後檢查 (Checklist)
- 標題具體: 點開前能知道內容嗎?
- 內文摘要: 沒看附件或圖片也能知道大意嗎?
- 附件命名: 檔名是否已經由亂碼改為具意涵的中文名稱?
- 文字呈現: 圖片內的重要文字(如電話、日期)是否已轉為網頁文字?
四、 核心精神與重要提醒
- 核心精神:不要讓視覺資訊成為唯一的資訊來源。只要想像「如果我現在關掉螢幕,改用語音報讀,我還能聽懂這則公告在講什麼嗎?」就能避開 90% 的無障礙錯誤。
- 重要提醒:資訊及文件格式呈現若無法符合無障礙規範,等同於部分民眾無法取得資訊。
- 法定要求:為落實資訊平權,各級政府機關、附屬機關(構)、學校網站應通過第一優先等級以上無障礙檢測。