南市校網申請平台

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

底下的無障礙規範看似繁瑣，但全都是無數網管前輩實務審查時踩過的坑。為了避免送審時被數發部「秒退件」而耽誤時效，請大家在上架校網內容時務必逐一對照。若真的看不下去，請善用 AI 協助優化內容格式！

</div> </div><div class="container-fluid my-5 border-bottom pb-4" id="accessibility-part1"><div class="row align-items-start g-4"><div class="col-12 col-md-5"><div class="p-4 bg-dark text-white rounded shadow text-center"><span class="fs-1 d-block mb-2">👁️</span>#### 視覺與結構防呆

---

核心大原則 ➔ 圖片 Alt ➔ 色彩對比 ➔ 標題階層

</div> </div><div class="col-12 col-md-7">### 🛠️ 觀念篇：內容發布四大核心點檢

<div class="card bg-white border-0 shadow-sm p-3 mb-3">一、 牢記三大基本原則

- 重要資訊絕不能只藏在圖片、顏色、動畫或附件檔案裡。
- 網頁上會動的組件（如跑馬燈、輪播圖、滑動公告），必須提供**暫停**按鈕。
- 不要只用顏色表示狀態（例如只寫「紅色代表未通過」），請務必補上「紅色（未通過）」文字說明。
 
 </div><div class="card bg-white border-0 shadow-sm p-3 mb-3">二、 圖片不是放上去就沒事

- **必填替代文字：** 只要不是純裝飾的圖片，必須加上 `alt="圖片說明"`，且不能只填「圖片」或「照片」，須精簡說明圖中含意。
- **純裝飾請留空：** 裝飾用圖也必須寫 alt 屬性，但內容須留空，例如：`<img src="dot.png" alt="">`。
- **嚴禁一圖到底：** 絕對不要把整篇公告做成一張大圖直接上傳，螢幕閱讀軟體會完全跳過，此為退件大忌。
 
 </div><div class="card bg-white border-0 shadow-sm p-3 mb-3">三、 色彩對比與文字清晰度

- **對比度規範：** 文字與背景色要有足夠對比。**一般內文對比度至少達 4.5:1，標題文字至少達 3:1**。
- **避免複雜背景：** 不要把重要文字直接壓在複雜的背景圖上，會導致弱視使用者極難閱讀。
- **使用相對單位：** 編輯內文的字型大小、行高時，建議使用 `rem`、`em` 或 `%`，確保使用者放大畫面時不爆版。
 
 </div><div class="card bg-white border-0 shadow-sm p-3">四、 標題請依語意順序排隊

標題標籤（H1-H6）是用來**整理文章架構與階層**的，絕對不是用來調整字體大小的工具！

💡 **實務防呆：** 系統預設已產生了 H1 與 H2，因此大家在 CKEditor 編輯內文時，**請一律從 H3 開始依序向下使用（H3 → H4）**，絕對不能跳級。同時，請勿使用標題只是為了「放大字體」。

</div> </div> </div> </div><div class="container-fluid my-5 border-bottom pb-4" id="accessibility-part2"><div class="row align-items-start g-4"><div class="col-12 col-md-5"><div class="p-4 bg-light border rounded shadow-sm text-center"><span class="fs-1 d-block mb-1">🔗</span>#### 行政組件合規化

語意連結 ➔ 資料表格 ➔ 有意義檔名 ➔ 多媒體字幕

</div> </div><div class="col-12 col-md-7">### 📋 檔案與多媒體篇：行政物件規範

<div class="card bg-white border-0 shadow-sm p-3 mb-3">五、 連結說明文字嚴禁「點這裡」

- ❌ **錯誤寫法：** 「點我」、「這裡」、「更多...」、或者直接貼上一長串原始網址（大忌）。
- 🟢 **正確寫法：** 「下載 113 學年度新生入學簡章 PDF」、「前往教育局全球資訊網」。
 
💡 **進階屬性補強：** 若連結會「另開新視窗」，需在 `title` 屬性中加入「另開新視窗」；若連結為檔案下載，需在 `title` 屬性中註明檔案格式（如：`title="新生簡章-PDF格式"`）。

</div><div class="card bg-white border-0 shadow-sm p-3 mb-3">六、 表格僅能存放資料，絕不拿來排版

依據最新無障礙指導方針，表格適合用來呈現功課表、名冊或統計數據，**嚴禁將表格拿來做為網頁畫面的排版工具**。

- 表格必須具備清楚的**標題列（th）**，讓語音軟體能對應欄位意義。
- **儘量避免合併儲存格**，這會讓螢幕閱讀器在導覽時迷路。
- 複雜表格建議在表格前先用一段文字簡述重點，並確認在手機版上不會重疊或被切除。
 
 </div><div class="card bg-white border-0 shadow-sm p-3 mb-3">七、 附件檔名請拒絕神祕代碼

檔名必須具有實質閱讀意義。嚴禁使用如 `image1.jpg`、`doc123.pdf` 等命名。

💡 **格式配套：** 若在上傳檔案時提供了 doc、ppt、xls 等微軟格式，**強烈建議同步提供 odt、odp、ods 等國家 ODF 開放格式**。另外請注意，PDF 不等於無障礙，如果 PDF 是直接拿掃描圖片轉存、內文無法選取複製，盲人軟體便讀不到，這在人工審查絕對會被退件！

</div><div class="card bg-white border-0 shadow-sm p-3">八、 影片與音訊的替代輔助

- 影片中若有說話內容，請務必提供**中文字幕**或**逐字稿說明**。
- 如果影片畫面中出現重要資訊，但旁白完全沒提及，請在網頁中另外以文字補充。
- **嚴禁自動播放：** 影音組件切勿設定為一進網頁就自動播放音效，這會嚴重干擾視障者聽取導盲軟體的聲音。
 
 </div> </div> </div> </div><div class="container-fluid my-5 border-bottom pb-4" id="accessibility-part3"><div class="row align-items-start g-4"><div class="col-12 col-md-5 text-center"><div class="p-4 bg-secondary text-white rounded shadow-sm"><span class="fs-1 d-block mb-2">⌨️</span>#### 表單與鍵盤操作

---

清楚標籤 ➔ 全鍵盤操作 ➔ 焦點框留存 ➔ RWD 放大不壞軌

</div> </div><div class="col-12 col-md-7">### 🛠️ 互動篇：表單與鍵盤無障礙操作

<div class="card bg-white border-0 shadow-sm p-3 mb-3">九、 表單欄位不要讓人猜心

- **明確的標籤：** 每個輸入框都要有清楚的 Label（如：姓名、電話）。絕對不能只靠 `placeholder` 當說明，因為使用者一打字提示就會消失。
- **必填文字化：** 必填欄位請明確打出「必填」二字，不能只放一個紅色星號（\*）。
- **錯誤訊息具體化：** 當欄位輸入出錯時，請提示具體原因（如：「請輸入正確的電子信箱格式」），不能只顯示「錯誤」二字。
 
 </div><div class="card bg-white border-0 shadow-sm p-3 mb-3">十、 擺脫滑鼠：全鍵盤操作流暢度

無障礙網站必須能只用鍵盤（Tab、Shift+Tab、Enter、空白鍵）順暢操作所有選單與彈出視窗。

🚨 **切勿亂改 CSS：** 很多設計師嫌鍵盤游標的焦點外框不好看，就寫了 `outline: none;` 把它拿掉，**這在無障礙審查是直接退件的重罪！**如果嫌預設框不好看，請將它改成更明顯的色彩，絕對不能讓它消失。鍵盤焦點移動順序也必須符合畫面由上到下、由左到右的邏輯。

</div><div class="card bg-white border-0 shadow-sm p-3">十一、 畫面放大至 200% ~ 400% 不能壞軌

人工審查員會強制將瀏覽器放大至 200% 以上進行點檢。在此狀態下，網站的文字、圖片、按鈕、選單**絕對不能互相遮蓋或重疊**。固定在畫面頂端的導覽列或浮動按鈕，也不能遮擋住主要的圖文內容，更不能強迫使用者必須拉動左右捲軸才能看完單行內文。

</div> </div> </div> </div><div class="container-fluid my-5 pb-4" id="accessibility-summary"><div class="row align-items-start g-4"><div class="col-12 col-md-5"><div class="p-4 bg-danger text-white rounded shadow-sm text-center"><span class="minefield-badge-n">🚨 數發部人工審查</span>#### 十二大最常踩雷狀況

請逐項核對，只要符合任何一項，高機率被直接退件

</div> </div><div class="col-12 col-md-7">### 🚨 審查退件率最高！「最常踩雷狀況」黑名單總整理

在正式送審前，請網管老師務必將學校新網站對照以下十二點缺失進行最終點檢：

<div class="p-3 bg-white border border-danger rounded">- 擅自將導覽列中必備的「網站導覽」隱藏或刪除。
- 將前台網頁的導覽列釘選（Sticky）住，導致畫面放大時遮擋內文。
- 處室發布公告時只有一張宣傳海報圖片，內文空無一字，且未提供文字版。
- 上傳的圖片完全沒有寫 alt 屬性，或者 alt 內容寫得跟圖片無實質關聯。
- 超連結文字只隨便寫「點此下載」、「請按這裡」、「more...」。
- 為了美觀而將文字顏色調得太淡，嚴重違反 AA 級色彩對比度標準。
- 下拉式選單或相簿只能用滑鼠滑過開啟，使用鍵盤 Tab 鍵完全進不去。
- 按下 Tab 鍵在網頁移動時，因為外框被拿掉，完全不知道目前游標游移去哪裡。
- 提供的 PDF 附件是純圖片掃描檔，文字無法被選取，導致導盲軟體無法讀取。
- 網頁內文中的表格合併了太多儲存格，導致螢幕閱讀器的報讀順序變成迷宮。
- 當瀏覽器畫面放大至 200% 後，內容互相重疊、被字體擋住或超出螢幕邊界。
- 只用單一顏色或小圖示（如紅點、綠點）表示檢定結果，卻沒在旁邊附註文字說明。
 
 </div> </div> </div> </div>

若帳密正確卻無法登入，Chrome 請按 Ctrl + Shift + N 用「無痕視窗」試試。

請點此觀看解決辦法。

對每個網站都有用喔！

登入後始可申請（僅限台南市資訊組長）。
申請網站數量不拘，方案空間總和不超過50G即可。
特色：
- 一套程式共用，每個站至少節省200M空間
- 一鍵安裝，省卻繁雜安裝流程
- 支援 IPv6
- 支援 HTTP/2
- 一鍵套用Let's Encrypt SSL安全憑證，瞬間提昇網站安全性
- 自動更新，不用擔心升級
- 支援客製模組、佈景，可自行安裝模組、佈景
- 每六小時備份一次，可追朔三天資料，資料不流失！並可提供備份報表下載。
- 享有比釋出版還要新的模組，第一步搶先使用新功能。
- 若遇到使用問題，亦可於第一時間排除

南市校網申請平台

主內容區域

MarkDown

左邊區域內容

右邊區域內容

頁尾區域