桃園市學校共構網站管理平臺

無障礙校網建置
=======

底下的規則很煩人，但都是無數前輩採過的坑....能看就看，看不下去請善用AI處理。

### 一、先記住幾個大原則

1. 重要資訊不要只藏在圖片、顏色、動畫或附件裡。
2. 會動的東西，例如跑馬燈、輪播圖、滑動公告，請記得要能暫停。
3. 不要放快速閃爍的內容，避免造成使用者不舒服。
4. 不要只用顏色表示狀態，例如只說「紅色代表未通過」，請加上文字說明。
5. 文字盡量簡單清楚，讓大家不用猜謎。
 
### 二、圖片不是放上去就沒事

1. 只要不是裝飾用的圖片，請加上替代文字，也就是 alt="圖片說明"。
2. alt 不是隨便填「圖片」或「照片」就好，要簡單說明圖片在講什麼。
3. 如果圖片裡有重要文字，例如活動海報、公告截圖、流程圖，請另外把文字打出來。
4. 裝飾用圖片也要有 alt 屬性，但內容要留空，例如： `<img src="dot.png" alt="">`
5. 不要把整篇公告做成一張圖上傳，這樣螢幕閱讀軟體會讀不到。
6. 圖片要能自動縮放（自適應），不要在手機或畫面放大時爆版。
 
### 三、文字要看得清楚

1. 文字和背景顏色要有足夠對比，內文的 AA 對比至少要達 4.5:1，標題文字至少 3:1。
2. 不要把文字直接壓在複雜背景圖上，真的會很難看清楚。
3. 不要用圖片代替文字；如果真的用了圖片文字，請另外提供文字版。
4. 不要過度使用文字陰影、閃爍文字或奇妙動畫，帥氣不一定等於好讀。
5. 字型大小、行高、間距建議使用 rem、em、% 等相對單位，讓使用者放大時比較不會出事。
 
### 四、標題要照順序排隊

1. 標題不是拿來調字體大小的，是拿來整理文章架構的。
2. 標題層級請照順序，例如 h1 → h2 → h3 → h4，不要突然跳級。
3. 網站系統已經自動產生 h1 或 h2，內容編輯時建議從 h3 開始。
4. 不要用「放大字、粗體、改顏色」假裝標題，請使用真正的標題格式。（反之，只是要放大文字做強調，請勿使用標題）
 
### 五、連結不要只寫「點這裡」

1. 連結文字要讓人一看就知道會去哪裡或下載什麼。
2. 不建議寫：「點我」、「這裡」、「更多」、「下載」，或者直接貼一個網址（大忌）。
3. 建議寫：「下載 113 學年度新生入學簡章 PDF」、「前往教育局公告系統」。
4. 如果連結會開新視窗，需在連結的title屬性中加入「另開新視窗」。
5. 如果連結是連到檔案，需在連結的title屬性中加入檔案格式，例如：「PDF格式」。
6. 同一頁不要放一堆名字一樣、但目的地不同的連結，這會讓使用者很困惑，例如一堆「more...」。
 
### 六、表格請拿來放資料，不要拿來排版

1. 表格適合用來呈現課表、名冊、統計資料，不適合拿來排版。
2. 表格要有清楚的標題列，讓人知道每一欄是什麼意思。
3. 盡量避免太多合併儲存格，螢幕閱讀軟體會很容易迷路。
4. 表格很複雜時，可以先在表格前用文字說明重點。
5. 請確認表格在手機或畫面放大時不會被切掉、擠在一起或重疊。
 
### 七、附件檔名請不要像神秘代碼

1. 附件檔名要有意義，讓人看到檔名就知道內容是什麼。
2. 不建議使用：「image1.jpg」、「doc123.pdf」、「scan0001.pdf」。
3. 建議使用：「113學年度新生入學簡章.pdf」、「暑期夏令營活動海報.jpg」。
4. 如果提供 doc、ppt、xls，建議同時提供 odt、odp、ods 等開放格式，或提供已處理好的無障礙 PDF。
5. 請注意，PDF 不等於一定無障礙。如果 PDF 是掃描圖片，文字不能選取，螢幕閱讀軟體通常也讀不到，這肯定不行。
6. 如果附件真的是掃描文件，最好在網頁內容上也放一份重點文字。
 
### 八、影片和音訊也要顧到

1. 影片有說話內容時，請提供字幕或逐字稿。
2. 音訊檔也建議提供文字稿，讓不能聽聲音的人也能知道內容。
3. 如果影片畫面中有重要資訊，但旁白沒有講，請另外用文字補充。
4. 影片播放器要能用鍵盤操作，例如播放、暫停、調整音量。
5. 不建議影片或音樂一進頁面就自動播放，真的會嚇到人。
 
### 九、表單不要讓人猜

1. 每個表單欄位都要有清楚標籤，例如姓名、電話、電子信箱、班級。
2. 不要只靠 placeholder 當欄位說明，因為使用者輸入後它就消失了。
3. 必填欄位請寫出「必填」，不要只放紅色星號。
4. 錯誤訊息要說清楚，例如「請輸入正確的電子信箱格式」，不要只寫「錯誤」。
5. 如果有驗證碼，請避免只有圖片驗證，否則視障使用者可能無法完成。
 
### 十、不能只靠滑鼠

1. 網站要能只用鍵盤操作，常用按鍵包括 Tab、Shift + Tab、Enter、Space、方向鍵。
2. 按 Tab 鍵移動時，要看得出目前焦點在哪裡。
3. 不要把焦點框線拿掉，例如不要隨便使用： `outline: none;`
4. 如果真的要改焦點樣式，請改成更清楚，不是讓它消失。
5. 選單、彈出視窗、下拉區塊，都要能用鍵盤開啟、操作和關閉。
6. 鍵盤操作順序要符合畫面順序，不要讓焦點跳來跳去像瞬間移動。
 
### 十一、畫面放大也不能壞掉

1. 檢查網站時，可能會把畫面放大到 200% 或 400%。
2. 放大後，文字、圖片、按鈕、選單都不能互相遮住。
3. 手機、平板、桌機都要能正常閱讀和操作。
4. 固定在畫面上的選單、浮動按鈕，不可以擋住主要內容。
5. 不要讓使用者為了看主要內容，還要左右上下捲來捲去。
 
### 十二、最常踩雷的狀況

1. 把導覽列的「網站導覽」隱藏或刪除。
2. 把導覽列釘選住。
3. 公告只有一張海報圖片，沒有文字版。
4. 圖片沒有 alt，或 alt 寫得跟圖片內容無關。
5. 連結只寫「點此下載」、「請按這裡」。
6. 文字顏色太淡，看起來很有氣質，但其實看不清楚。
7. 選單只能用滑鼠操作，鍵盤完全進不去。
8. 按 Tab 時不知道現在游標跑去哪裡。
9. 附件是掃描 PDF，文字不能選取，也不能被讀出。
10. 表格合併儲存格太多，讀起來像迷宮。
11. 畫面放大後，內容互相重疊或被擋住。
12. 只用顏色或圖示表示結果，例如紅色、綠色，卻沒有文字說明。
 
簡單說，無障礙不是要大家變成工程師，而是上架內容時多想一下： 「如果我看不清楚、不能用滑鼠、只能聽網頁內容，還能不能順利使用？」 如果答案是可以，那就很棒了！

書籍目錄

展開 | 闔起

桃園市學校共構網站管理平臺

主內容區域

MarkDown

左邊區域內容

書籍目錄

頁尾區域