政府網站營運交流平台

一、視覺設計

網站服務的視覺設計，除了提高網站服務的親和性與可閱讀性之外，建議參考以下各項設計參考：

1. 定義視覺設計確認的程序。
2. 版面上的元素應盡可能對齊，例如運用CSS Grid布局技術。
3. 以不同的瀏覽器檢視，包括常見瀏覽器(例如Chrome、Firefox、Edge及Safari等)，搭配各作業系統內建的輔助使用功能（例如文字縮放、明暗主題、高對比或強制配色模式、動態效果多寡設定等），確保網站服務使用者能夠順利瀏覽內容。
4. 評估網站瀏覽是否順暢，例如等待網頁下載時間不超過3至5秒，或適當編排段落標題及定位書籤，且網頁內容區塊不會隨著資料逐漸載入而大幅改變布局位置。
5. 評估頁面長度是否適當，例如不超過螢幕的5倍，或適當編排段落標題及定位書籤，避免使用者瀏覽網站服務時需頻繁捲動頁面。
6. 評估網頁列印輸出是否合理正確，例如當網頁無法正確被列印時，建議開發可適配列印的響應式網頁設計。
7. 確保沒有圖像的狀況下，亦可正常閱讀網站內容，例如避免僅用圖片表達所有內容，建議以圖文並存的方式呈現網頁。
8. 按鈕圖示(Icon)應加註文字，因圖示易讓使用者誤解其功能。除了慣用圖示外，建議按鈕圖示都應加註文字，且與應用程式介面暴露的無障礙名稱相符。
9. 全自動區分電腦和人類的圖靈測試(Completely Automated Public Turing test to tell Computers and Humans Apart，簡稱CAPTCHA)之視覺類驗證碼，建議採用具備隱私保護的CAPTCHA替代解決方案，例如 Turnstile 人機驗證。

二、文字樣式設計

文字樣式與連結顯示應採用可讀性高的字型與連結文字，並使全網站具有一貫的文字風格。

1. 全站的文字格式使用一致的字型、顏色與尺寸文字格式係指文字的字型、大小、顏色、段落、縮排、行距等。統一的文字格式可協助使用者快速瀏覽內容。
2. 文字應採用足夠的顏色對比，且避免文字重疊在圖形背景上
   文字通常以深色(如深灰)顯示於淺色(如米白色)背景上，或前景與背景明度對比須明顯，避免影響文字可閱讀性。亦應避免於顯示文字之處配置背景圖片，以避免干擾閱讀，影響親和性與可閱讀性。
3. 中文字建議使用系統預設字型或網頁字型(Web Font[8])使用系統預設的中文字型可確保文字能在使用者的設備上正常顯示，若需要在網頁上指定的字型，建議使用網頁字型(Web Font)，兼顧網頁上的文字樣式的豐富性及版面呈現的正確性。
4. 英文字避免使用中文字型英文字建議使用系統預設的英文字型或網頁字型，確保文字能正常顯示。若需指定字型格式，建議使用網頁字型為佳。
5. 文字大小使用相對尺寸而非固定尺寸若文字大小使用相對尺寸，使用者就能依個人需求使用，運用瀏覽器的檢視功能，選擇字型大小。預設大小亦應妥善選擇，依不同瀏覽器與裝置呈現來考量。
6. 可點擊操作的文字應標示底線，另可搭配不同顏色或游標懸浮效果，以增加辨識。連結項目清楚標示，讓使用者一目瞭然，可提高頁面的可用性。

三、圖片、多媒體設計

圖片與多媒體的設計，應以使用者的角度考量檔案格式、大小、介面及傳輸速度，確保快速下載，清楚顯示。

1. 網頁圖片兼顧清晰品質與下載時間
   網頁的圖片須注意適當的下載時間，避免佔用過長的等待時間；建議選用JPEG或PNG格式，並避免單一圖檔容量過大（例如調整圖檔壓縮參數或色盤索引以降低檔案容量大小）；利用響應式設計，優先提供使用者瀏覽器可支援的最佳圖片格式，並依照網頁標準設定延遲載入圖片屬性及預先指定圖片長、寬尺寸。
2. 多媒體影音內容應預設關閉音效、不自動讀取，且可切換靜音
   避免多媒體動畫的音效或網頁背景音樂干擾輔助科技操作，需確保網頁中的預設關閉音效，而由使用者自行決定播放時機。
3. 確保多媒體介面可使用鍵盤操作多媒體介面應提供鍵盤操作，便於身心障礙者感受多媒體介面的方便與互動，提高介面的可用性與可及性。
4. 為影像、聲音與多媒體介面提供文字說明為多媒體加上替代文字，以利使用輔具者瞭解資訊內容。

四、表單設計

表單設計需整合前端申辦窗口與後端審核、報表等機制，其資料應確保正確，在表單設計上應考量可用性與可及性，以切實發揮效益。

1. 在輸入框旁邊加註填寫限制、格式或提供填寫範例
   應於使用者看到輸入欄位之前，提供適當的解說以確保使用者填寫正確有效的資料。同時應確保這些說明應讓使用者在填寫過程可持續看到，且透過應用程式介面使輔助科技能夠連結各輸入欄位的填寫說明。
2. 確保表單的可及性
   在設計表單介面時，應考慮到表單的可及性。

3. 確保輸入框有足夠的填寫空間
   表單輸入框有足夠的填寫空間，或可由使用者自行調整填寫空間，可方便使用者編輯或修改輸入的內容。

4. 格式錯誤或未填寫的欄位，應告知使用者正確的處理方式
   表單程式應告知使用者正確的處理方式，避免偵錯功能誤導或阻卻使用者填寫意願；表單設計應盡可能減少資料蒐集，及避免要求使用者填寫政府機關已知或可由政府機關資料交換取得的資料。
5. 在表單旁提供諮詢服務聯絡資訊
6. 線上表單標示電子郵件、電話等相關聯絡資訊，適時提供使用者諮詢服務。