魁亨科技IIFUN TECHNOLOGY魁亨科技官網

ACCESSIBLE WEB PLANNING · 115 年 5 月規範

無障礙，
讓資訊真正
抵達每一個人

依循網站無障礙規範，從規劃、設計、檢測到認證與稽核，建立具備可感知、可操作、可理解與穩健性的網站內容。

了解規劃程序 前往魁亨科技官網

01 / 規範基礎

無障礙是可被更多人取用的程度

依規範定義，「無障礙」用以描述產品、裝置、服務或環境能被越多人取用，且不會因生理、心理、設備、條件等限制而產生窒礙的程度；「無障礙」、「可及性」與「親和力」在規範中視為相同用語。

規範適用於公眾網站的擁有者、開發人員及管理人員，也涵蓋身心障礙者、年長及年幼者、手持行動設備與資訊家電使用者，以及社會經濟弱勢族群等特殊需求者。

02 / POUR

四項可及性設計原則

四項原則是任何使用者取用網頁內容所必要的基礎。

01

可感知

資訊及使用者介面元件，應以使用者能察覺的方式呈現。

指引 1.1–1.4
02

可操作

使用者介面元件及導覽功能，應具可操作性。

指引 2.1–2.5
03

可理解

資訊及使用者介面的操作，應具可理解性。

指引 3.1–3.3
04

穩健性

內容應可供身心障礙者以輔助工具讀取，並具有相容性。

指引 4.1

03 / GUIDELINES

十三項指引、實例與成功準則

展開每一項指引，從實際網站情境理解符合做法、常見錯誤與對應檢測等級。

1.1替代文字為非文字內容提供相等意義的替代文字，使內容能依需求轉變為大字版、點字、語音、符號或簡化語言。
VISUAL EXAMPLE非文字內容如何轉為等義資訊
六階段流程圖
轉為
替代文字

網站規劃、設計、檢測、自我評量、認證及稽核六階段。

依條文轉譯示例圖片 → 等義文字
網站情境

網頁放置一張『網站無障礙六階段流程圖』。

符合做法

替代文字說明圖表主旨及六個階段；純裝飾圖使用空替代文字。

常見錯誤

替代文字只寫『圖片』或檔名，使用者無法取得圖片傳達的資訊。

對應成功準則

  • 1.1.1 非文字內容｜A
1.2時序媒體為時序媒體提供替代內容，涵蓋預錄與直播的音訊、視訊、字幕、音訊描述與手語。
VISUAL EXAMPLE影音內容提供多種替代方式
預錄講座CC 字幕
同步提供
字幕音訊描述替代媒體
依條文轉譯示例影音 → 字幕／描述
網站情境

網站提供預錄講座、教學影片或現場直播。

符合做法

預錄內容提供字幕，並依等級提供音訊描述、替代媒體或手語；直播依規範提供字幕。

常見錯誤

影片只靠聲音或畫面傳遞必要資訊，沒有相對應的替代內容。

對應成功準則

  • 1.2.1 純音訊與純視訊（預錄）｜A
  • 1.2.2 字幕（預錄）｜A
  • 1.2.3 音訊描述或替代媒體｜A
  • 1.2.4 字幕（現場直播）｜AA
  • 1.2.5 音訊描述（預錄）｜AA
  • 1.2.6 手語（預錄）｜AAA
  • 1.2.7 延伸音訊描述｜AAA
  • 1.2.8 替代媒體（預錄）｜AAA
  • 1.2.9 純音訊（現場直播）｜AAA
1.3可調適建立能以不同方式呈現而不會喪失資訊或結構的內容。
VISUAL EXAMPLE視覺關係與程式化結構一致
保留
1　姓名2　聯絡方式3　送出
依條文轉譯示例視覺結構＝語意結構
網站情境

報名表包含姓名、聯絡方式、選項群組與填寫順序。

符合做法

以可程式化判讀的標籤及結構表達欄位關係，放大、改變方向或線性閱讀時仍保有正確順序。

常見錯誤

只靠位置、顏色或『右側欄位』等知覺特徵說明，改變版面後關係即消失。

對應成功準則

  • 1.3.1 資訊與關連性｜A
  • 1.3.2 有意義的序列｜A
  • 1.3.3 知覺特徵｜A
  • 1.3.4 螢幕方向｜AA
  • 1.3.5 識別輸入目的｜AA
  • 1.3.6 識別目的｜AAA
1.4可辨識讓使用者更容易看見及聽到內容，包括區分前景與背景。
VISUAL EXAMPLE資訊不只依賴顏色
未完成已完成
同時使用
未完成已完成
依條文轉譯示例清楚辨識，不只看顏色
網站情境

頁面包含文字、按鈕、圖表、提示框及懸浮說明。

符合做法

不只用色彩傳遞資訊，文字與介面具有足夠對比，放大及流動排版後仍能閱讀；懸浮內容可關閉及停留。

常見錯誤

僅用紅綠區分結果、文字對比不足，或放大後需要雙向捲動才能閱讀。

對應成功準則

  • 1.4.1 色彩使用｜A
  • 1.4.2 音訊控制｜A
  • 1.4.3 對比值（最小）｜AA
  • 1.4.4 調整文字尺寸｜AA
  • 1.4.5 影像文字｜AA
  • 1.4.6 對比值（增強）｜AAA
  • 1.4.7 低或無背景音訊｜AAA
  • 1.4.8 視覺呈現｜AAA
  • 1.4.9 影像文字（無例外）｜AAA
  • 1.4.10 流動排版｜AA
  • 1.4.11 非文字對比｜AA
  • 1.4.12 文字間距｜AA
  • 1.4.13 懸浮或焦點內容｜AA
2.1鍵盤可操作讓所有功能都可透過鍵盤介面操作，並避免鍵盤操作陷阱。
VISUAL EXAMPLE鍵盤焦點依序移動且不受困
TabShift + TabEnter
操作
依條文轉譯示例Tab → 操作 → 離開
網站情境

使用者只用 Tab、Shift+Tab、Enter 與方向鍵瀏覽網站。

符合做法

所有功能皆可由鍵盤操作，焦點能依序移動，也能離開每一個元件。

常見錯誤

選單只能滑鼠懸浮開啟，或焦點進入彈出視窗後無法離開。

對應成功準則

  • 2.1.1 鍵盤｜A
  • 2.1.2 無鍵盤操作陷阱｜A
  • 2.1.3 鍵盤（無例外）｜AAA
  • 2.1.4 快捷鍵｜A
2.2充足時間提供使用者充分的時間閱讀及使用內容。
VISUAL EXAMPLE移動內容與計時可由使用者控制
04:59工作階段即將逾時
提供
依條文轉譯示例時間由使用者掌握
網站情境

輪播訊息自動切換，登入工作階段即將逾時。

符合做法

提供暫停、停止或隱藏移動內容的機制；計時可關閉、調整或延長，逾時前提供警告。

常見錯誤

內容持續自動更新，使用者沒有足夠時間閱讀或完成操作。

對應成功準則

  • 2.2.1 計時調整｜A
  • 2.2.2 暫停、停止和隱藏｜A
  • 2.2.3 無計時｜AAA
  • 2.2.4 中斷｜AAA
  • 2.2.5 重新認證｜AAA
  • 2.2.6 逾時｜AAA
2.3防痙攣和身體反應避免以可能引發痙攣或身體反應的方式設計內容。
VISUAL EXAMPLE避免快速閃爍並能減少動畫
每秒不超過三次
並提供
停止非必要動畫
依條文轉譯示例不閃爍／動畫可停止
網站情境

活動區塊使用閃動效果吸引注意，按鈕互動觸發動畫。

符合做法

避免任何一秒超過三次的閃爍；非必要的互動動畫提供終止方式。

常見錯誤

使用快速閃爍或無法停止的互動動畫，可能引發痙攣或身體反應。

對應成功準則

  • 2.3.1 閃爍三次或低於閾值｜A
  • 2.3.2 閃爍三次｜AAA
  • 2.3.3 來自互動的動畫｜AAA
2.4可導覽提供協助使用者導覽、尋找內容及判斷所在的方法。
VISUAL EXAMPLE讓使用者知道位置與目的地
首頁　›　指引2.4 可導覽跳到主要內容
焦點依序
依條文轉譯示例知道在哪裡，也知道去哪裡
網站情境

使用者要從長頁面快速找到十三項指引中的特定內容。

符合做法

提供跳過重複區塊、明確頁面標題與區段標題、可辨識鏈結、合理焦點順序及可視焦點。

常見錯誤

所有鏈結都叫『更多』，沒有標題層級，鍵盤焦點被固定元件遮住。

對應成功準則

  • 2.4.1 跳過區塊｜A
  • 2.4.2 網頁標題｜A
  • 2.4.3 焦點順序｜A
  • 2.4.4 鏈結目的（脈絡）｜A
  • 2.4.5 多種方式｜AA
  • 2.4.6 標題和標籤｜AA
  • 2.4.7 焦點可視｜AA
  • 2.4.8 位置｜AAA
  • 2.4.9 鏈結目的（僅鏈結）｜AAA
  • 2.4.10 區段標題｜AAA
  • 2.4.11 焦點不遮蔽（最小）｜AA
  • 2.4.12 焦點不遮蔽（加強）｜AAA
  • 2.4.13 焦點外觀｜AAA
2.5輸入方式以鍵盤以外的各種輸入方式，讓使用者能輕鬆進行功能性操作。
VISUAL EXAMPLE拖曳功能也提供單一指標操作
項目 A拖曳排序
另提供
依條文轉譯示例多種輸入，同一功能
網站情境

使用者以滑鼠、觸控、電子筆或語音操作排序與選擇功能。

符合做法

拖曳功能另提供單一指標操作方式，標籤名稱包含可見文字，目標尺寸及間距符合相應等級。

常見錯誤

功能只能精準拖曳或多點手勢完成，觸控目標過小且沒有替代操作。

對應成功準則

  • 2.5.1 指標手勢｜A
  • 2.5.2 指標取消｜A
  • 2.5.3 標籤名稱｜A
  • 2.5.4 動作啟動｜A
  • 2.5.5 目標尺寸（加強）｜AAA
  • 2.5.6 並行輸入機制｜AAA
  • 2.5.7 拖曳動作｜AA
  • 2.5.8 目標尺寸（最小）｜AA
3.1可讀性讓文字內容可讀並可理解，且能被使用者與輔助科技正確讀取。
VISUAL EXAMPLE標明語言並解釋縮寫
lang="zh-Hant-TW"WAI
可理解為
縮寫全文

Web Accessibility Initiative，網站無障礙倡議。

依條文轉譯示例語言清楚，文字可理解
網站情境

中文頁面出現英文縮寫、專業術語與可能混淆的詞彙。

符合做法

設定網頁及局部內容語言，依等級提供特殊詞彙、縮寫、閱讀程度或發音說明。

常見錯誤

未標示語言，縮寫與術語沒有解釋，輔助科技可能無法正確讀出內容。

對應成功準則

  • 3.1.1 網頁語言｜A
  • 3.1.2 局部語言｜AA
  • 3.1.3 特殊詞彙｜AAA
  • 3.1.4 縮寫｜AAA
  • 3.1.5 閱讀程度｜AAA
  • 3.1.6 發音｜AAA
3.2可預期性讓網頁以可預期的方式呈現及運作。
VISUAL EXAMPLE相同功能保持一致的名稱與位置
頁面 A首頁　指引　聯絡
保持一致
頁面 B首頁　指引　聯絡
依條文轉譯示例操作結果可以預期
網站情境

相同導覽、搜尋與聯絡協助出現在多個頁面。

符合做法

重複元件保持相同順序及識別；取得焦點或變更輸入時，不會未經告知自動跳頁。

常見錯誤

只要游標進入欄位就開啟新頁，或同一功能在不同頁面使用不同名稱與位置。

對應成功準則

  • 3.2.1 焦點｜A
  • 3.2.2 輸入｜A
  • 3.2.3 一致的導覽｜AA
  • 3.2.4 一致的識別｜AA
  • 3.2.5 依請求變更｜AAA
  • 3.2.6 一致性幫助｜A
3.3輸入協助幫助使用者避開及更正錯誤，增進錯誤被注意與修正的可能性。
VISUAL EXAMPLE錯誤不只用紅框表示
請輸入完整的電子郵件格式，例如 [email protected]
提供
依條文轉譯示例找得到錯，也改得回來
網站情境

使用者填寫聯絡表單，部分必填欄位或格式有誤。

符合做法

以文字指出錯誤欄位並提供修正建議；法律、財務或個人資料送出前可檢查、確認或更正。

常見錯誤

只用紅框表示錯誤，沒有文字說明，也沒有送出前確認或更正機會。

對應成功準則

  • 3.3.1 識別錯誤｜A
  • 3.3.2 標籤或說明｜A
  • 3.3.3 錯誤建議｜AA
  • 3.3.4 錯誤預防（法律、財務、個人資料）｜AA
  • 3.3.5 協助｜AAA
  • 3.3.6 錯誤預防（全部）｜AAA
  • 3.3.7 冗餘輸入｜A
  • 3.3.8 無障礙認證（最小）｜AA
  • 3.3.9 無障礙認證（加強）｜AAA
4.1相容性針對目前及未來的使用者代理與輔助科技，最大化其相容性。
VISUAL EXAMPLE介面元件能被輔助科技判讀
可見文字
程式化提供
名稱：儲存資料角色：按鈕狀態：已完成
依條文轉譯示例名稱＋角色＋狀態
網站情境

網站使用自製按鈕、展開面板及送出後的狀態訊息。

符合做法

介面元件的名稱、角色、狀態和值可程式化判定；狀態訊息可由輔助科技在不移動焦點下取得。

常見錯誤

用一般文字區塊模擬按鈕，沒有可判讀名稱與角色，更新結果也未通知輔助科技。

對應成功準則

  • 4.1.1 語法分析（因過時而刪除）｜A
  • 4.1.2 名稱、角色和值｜A
  • 4.1.3 狀態訊息｜AA

04 / PROCESS

六階段網站無障礙設計程序

規範將無障礙考量融入網站開發、檢測、認證與後續稽核。

  1. 01

    網站規劃

    依四項原則整理資訊與規劃架構；多媒體建立替代文字規則，複雜操作考量替代方式，並納入鍵盤操作。

  2. 02

    網站設計

    依十三項指引設計標籤與處理物件，適當使用結構標籤與表單，並選用具有可及性特性的格式及技術。

  3. 03

    網站檢測

    完成後使用網站無障礙檢測工具進行軟體檢測，依檢測碼訊息及範例修正未通過項目。

  4. 04

    自我評量

    對無法僅由軟體判別的項目，以人工方式依稽核評量碼進行檢核與修正。

  5. 05

    網站認證

    完成檢測與自我評量後，檢送評量結果向認證機構申請對應等級的認證標章。

  6. 06

    網站稽核

    取得標章後接受定期與不定期稽核，持續確保網站與申請交付的評量結果一致。

05 / CONFORMANCE

三項檢測等級

檢測等級直接反映至十三項指引、八十七項成功準則、標準檢測碼與認證標章。

A

基本需求

網站開發人員必須滿足所有此等級的檢測碼，為使用網頁內容團體的基本需求。

AA

移除顯著障礙

網站開發人員應滿足所有此等級的檢測碼；滿足後可移除網站內容的顯著障礙。

AAA

進一步改善

網站開發人員可納入此等級的檢測碼要求，以進一步改善網站內容的可及性。

魁亨科技 · 無障礙網站規劃

讓規範從文件，落實到網站的每一個結構與操作

前往魁亨科技官網了解更多