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

底下的規則很煩人，但都是無數前輩採過的坑....能看就看，看不下去請善用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. 只用顏色或圖示表示結果，例如紅色、綠色，卻沒有文字說明。

簡單說，無障礙不是要大家變成工程師，而是上架內容時多想一下： 「如果我看不清楚、不能用滑鼠、只能聽網頁內容，還能不能順利使用？」 如果答案是可以，那就很棒了！