開發網站無障礙模板

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

請優先閱讀

本頁展示的頁面範例，若要導入到正式環境，應進行必要調整，例如：伺服器端作業、資安防護，以及依機關設計制度系統性調整元件樣式與形象設計素材。

開發網站無障礙模板與釐清現行檢測工具之無障礙國際標準及技術分析。本項工作將彙整相關的技術規範和標準，提供統一的參考依據，與工具推動無障礙網路空間的發展與使用，提供政府機關、開發人員及內容提供者可遵循一致的參考依據。

首頁範本

首頁範本原始碼。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <link rel="stylesheet" href="https://guide.nics.nat.gov.tw/main.css">
  <link rel="icon" type="image/png" href="https://guide.nics.nat.gov.tw/favicon.png">
  <title>首頁範本</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<noscript><span>您的瀏覽器不支援或未開啟JavaScript功能，將無法正常使用本系統，請開啟瀏覽器JavaScript功能，以利系統順利執行。</span></noscript>
<div class="one-col">
  <header class="site-header">
    <!-- <div class="ph4 pt4">點選此區域，並多次按下 <kbd>Tab</kbd> 鍵，即可各個「彈跳點」連結，並跳至該區域。</div> -->
    
    <skip-to>
      <a href="#main" class="skip-to">跳至主要內容區</a>
      <a href="#navigation" class="skip-to">跳至主要連結表</a>
      <a href="#footer" class="skip-to">跳至頁尾</a>
    </skip-to>

    <a href="/index.html" class="flex items-center">
      <div class="bg-layer1 w2 mr3" style="aspect-ratio: 1 / 1;"><!-- logo --></div>
      <h1>首頁範本</h1>
    </a>
    <nav aria-label="主要" id="navigation" class="flex gap4 mt4">
      <a href="#">首頁</a>
      <a href="#">關於我們</a>
    </nav>
  </header>
  <main class="site-main" id="main">
    <nav aria-label="麵包屑" class="breadcrumb arrow-separator">
        <ol>
          <li>
            <a href="/index.html">首頁</a>
          </li>
        </ol>
    </nav>    
    <div class="bg-layer1 mb4" style="aspect-ratio: 24/9;"></div>
    <article class="w-paragraph center">
      <p>感謝您選擇探索我們目前所呈現的內容。我們正在全力開創新的典範，以便為您提供有價值的知識及技術。</p>
      
      <p>我們的努力不會歇止，我們鼓勵您現在就開始運用這裡提供的資訊和設計。您的參與和意見對我們至關重要，這將有助於我們更進一步，讓政府網站設計原則更加完善。</p>
      
      <p>我們期待著您的回饋，並感謝您對我們的支持。讓我們攜手合作，共同見證政府網站設計原則的進步和成長。</p>
    </article>

    <div class="three-col mt4">
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1 / 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1 / 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1 / 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
    </div>
  </main>
</div>
<div class="one-column bg-layer1">
  <footer id="footer" class="site-footer f6 flex items-center gap4">
    <div class="plain w2 mr3" style="aspect-ratio: 1 / 1;"><!-- logo --></div>
    <div class="mw5">
      <a href="/accessibility-statement">親和力宣告</a>
    </div>
  </footer>
</div>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700&display=swap" rel="stylesheet">
</body>
</html>

意見回饋頁範本

此頁面範本為常見的表單填寫、業務申辦等類型的數位服務情境，在操作目的較單純的情境應可簡化為單一頁面或單一操作元件。為確保範本足以因應複雜情境，並展示多項共用元件應用，且避免 SC 3.3.4 Error Prevention (Legal, Financial, Data) 使用障礙，故範本設計中融入了填寫資料前的同意宣告，以及填寫資料後、送出資料前的最終確認。

意見回饋頁範本原始碼。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <link rel="stylesheet" href="https://guide.nics.nat.gov.tw/main.css">
  <link rel="icon" type="image/png" href="https://guide.nics.nat.gov.tw/favicon.png">
  <title>意見回饋頁範本</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div class="one-col">
    <header class="site-header">
      <skip-to>
        <a href="#main" class="skip-to">跳至主要內容區</a>
        <a href="#navigation" class="skip-to">跳至主要連結表</a>
        <a href="#footer" class="skip-to">跳至頁尾</a>
      </skip-to>
      <a href="/index.html" class="flex items-center">
        <div class="bg-layer1 w2 mr3" style="aspect-ratio: 1 / 1;"><!-- logo --></div>
        <h1>意見回饋頁範本</h1>
      </a>
      <nav aria-label="主要" id="navigation" class="flex gap4 mt4">
        <a href="#">首頁</a>
        <a href="#">關於我們</a>
      </nav>
    </header>
    <nav aria-label="麵包屑" class="breadcrumb arrow-separator">
        <ol><li><a href="/accessibility/demo-page/form-page-s1.html" aria-current="page"><mark>Step 1.同意聲明</mark></a></li><li><span>Step 2.填寫資料</span></li><li><span>Step 3.最終確認</span></li><li><span>Step 4.送出結果</span></li>
        </ol>
      </nav>
    <main class="site-main" id="main">
      <h2>Step 1. 同意聲明</h2>
      <form action="/accessibility/demo-page/form-page-s2.html" method="get">
        <div class="fields">
          <div class="warning-text">
            <strong>個人資料蒐集、處理、利用同意書</strong>
            <p>
              為遵守個人資料保護法規定，並保障當事人之權利，謹依法告知下列事項：
            </p>
            <p>
              1. 機關名稱：XXXX機關（○○分局）
            </p>
            <p>
              2. 蒐集之特定目的：（例：代號一○一 XXXX業務）
            </p>
            <p>
              3. 個人資料之類別：（例：姓名、身分證編號、出生年月日、住址…等）
            </p>
            <p>
              4. 個人資料利用之期間、地區、對象及方式：
              <ul>
                <li>(1) 期間：（例：蒐集後一年）</li>
                <li>(2) 地區：（例：中華民國主權範圍內）</li>
                <li>(3) 對象：（例：自行使用）</li>
                <li>(4) 方式：（例：公告）</li>
              </ul>

            </p>
            <p>
              5. 依個人資料保護法第 3 條規定，當事人可行使以下權利：
              <ul>
                <li>(1) 查詢或請求閱覽。</li>
                <li>(2) 請求製給複製本。</li>
                <li>(3) 請求補充或更正。</li>
                <li>(4) 請求停止蒐集、處理及利用。</li>
                <li>(5) 請求刪除。</li>
              </ul>
              若有上述需求，請與本單位聯繫，於填妥本單位當事人權利行使申請書後，本單位將依法進行回覆。另依個人資料保護法第 14 條規定，查詢或請求閱覽個人資料或製給複製本者，本單位得酌收必要成本費用。
            </p>
            <p>
              6. 若未提供正確個人資料，本單位將無法提供您特定目的範圍內之相關服務。
            </p>
            <p>
              本人已充分知悉貴單位上述告知事項，並同意貴單位蒐集、處理、利用本人之個人資料。
            </p>
          </div>
          
          <div class="sr-only" id="notes_save_status" role="alert"></div>
          
          <div class="gap2 flex flex-wrap">
            <button type="submit" class="button button-primary">同意</button>
            <button type="button" class="button button-danger">不同意</button>
          </div>  
        </div>

      </form>
    </main>
  </div>
  <div class="one-column bg-layer1">
    <footer id="footer" class="site-footer f6 flex items-center gap4">
      <div class="plain w2 mr3" style="aspect-ratio: 1 / 1;"><!-- logo --></div>
      <div class="mw5">
        <a href="/accessibility-statement">親和力宣告</a>
      </div>
    </footer>
  </div>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700&display=swap" rel="stylesheet">
</body>
</html>

設計元件引用

意見回饋、申辦業務這類有步驟、順序的流程，通常需要呈現完整的流程資訊，讓使瀏覽者可以了解目前所處的流程點，以及尚有多少步驟才能夠達成目的。

麵包屑（Breadcrumb）
本元件設計時，即考量到呈現導覽列結構資訊，透過報讀軟體瀏覽會報讀「麵包屑導覽區地標清單有 4 項 Step 1.同意聲明到訪過連結 Step 2.填寫資料到訪過連結目前頁 Step 3.最終確認 Step 4.送出結果」，可以應用於此類情境。

按鈕及連結 (Button and Link)
根據不同操作目的，調整 button 的 type, formaction, formmethod 等屬性值，例如：使用 type="reset" 實作清除輸入內容目的；使用 formaction=URL formmethod="get" 實作回到上一步目的。儘可能應用 HTML 原生的機制實現不同操作目的。

頁面地標架構 (Landmark)
使用地標架構確保透過輔助科技瀏覽，可以清楚掌握頁面結構，並受益於輔助科技的快捷鍵操作功能，參考 WAI APG landmarks pattern。

跳至主要內容區 (Skip-To)
使用 Skip-to 元件，避免 SC 2.4.1 Bypass Blocks 相關使用障礙。

警告文字 (Warning Text)
使用警告文字呈現「個人資料蒐集、處理、利用同意書」等類具法律效果內容，樣式有助於在視覺上一般內文文字區隔，並達到引導視線效果。

表格（Table）
應用於表單輸入內容最終確認步驟，便於使用者對前一步輸入的資訊二次確認，並支援輔助科技瀏覽操作，參考 UK.gov Smart Answer 範例。

元件客製化調整

HTML

！注意：元件 HTML 調整應符合 HTML Standard 與原則設計的 class 階層，確保未引入使用障礙、設計制度樣式能正確套用。

針對本案例應用情境，微調元件的結構，例如：流程點之間具有順序性，所以未完成步驟1則無法操作後續步驟，故目前頁面之後的步驟調整為不可操作的 span 元素。
引用特殊標記文字及粗體文字樣式標示目前頁面，避免單純使用單一種感知元素（如形狀、顏色、大小、視覺位置、方向或聲音等）標示，產生 SC 1.3.3 Sensory Characteristics 相關使用障礙。

Server side

流程點或步驟之間相依性、邏輯控制
表單輸入內容格式驗證
自動化程式防護

Client Side

！注意：引入越多增強功能，容易對數位服務韌性產生影響，應注意符合漸進式增強原則。

跨頁狀態保存
Optional: add semantic feature
Optional: add keyboard feature

CSS

！注意：使用客製化樣式應符合整體設計制度，並確保樣式可維護性、便於系統性調整，避免產生已知的使用障礙。

根據機關設計制度調整 CSS 色彩變數值，例如：調整 --primaryColor 為機關主視覺色彩。
Optional: customize style

漸進式增強原則考量

從漸進式增強原則觀點，本案例做了以下技術選擇：

採用靜態生成架構。
每個流程點獨立一個分頁，而非採取單一頁面依賴 JavaScript 動態生成內容。
全網站導覽列直接可見，沒有用任何方式摺疊或需要透過按鈕展開。
表單輸入內容透過 HTTP 協定方式提交。
適當使用 WAI-ARIA 轉傳語意資訊給輔助科技，並參考技術論壇建議。

無障礙特性

語音報讀軟體（NVDA + Edge 輔助科技與瀏覽器組合為例）

使用快捷鍵 NVDA + F7 列出頁面地標清單
使用快捷鍵 d, Shift + d 快速在頁面地標之間移動
使用快捷鍵 i, Shift + i 快速在流程點之間移動
使用快捷鍵 f, Shift + f 快速在輸入欄位之間移動
進到麵包屑導覽區地標時，報讀以下資訊：
- 流程點或步驟總數，例如「清單有 4 項」
- 目前所處的流程點或步驟，例如「Step 2.填寫資料到訪過連結目前頁」
- 後續流程點或步驟名稱，但不可以操作，例如「Step 3.最終確認」

鍵盤瀏覽

使用 Tab 在流程點與輸入欄位元素之間移動
使用 Enter, Space 在聚焦到按鈕時可以觸發動作