diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..3eb92306 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +content/ diff --git a/content/accessibility/_index.md b/content/accessibility/_index.md new file mode 100644 index 00000000..11c50b38 --- /dev/null +++ b/content/accessibility/_index.md @@ -0,0 +1,52 @@ +--- +title: 親和力 +weight: 10 +--- + +為保有啟發性,「無障礙」雖為常見用詞,此份文件 accessibility, accessible 二詞將根據不同語境、詞態使用不同譯法。「親和力」涵蓋範圍遠多於「無障礙」,並非僅服務特定族群順利瀏覽網頁取得資訊,且親和力是可以不斷努力提升且沒有終點的。例如,基於追求親和力,使用 accessibility statement 作為宣示之外,也有助於提升親和力、吸引使用者親近數位服務,故有意識地譯為「親和力宣告」;涉及數位服務可及性,則依詞態使用「可及性」或「可及無礙」;「無障礙」則多半用於法規或各式規範脈絡下。 + +選擇首頁與意見回饋頁面,優先實作頁面範例。主要考量頁面功能性、展示現有共用元件如何應。 +首頁、意見回饋頁面皆為服務進入點,而意見回饋頁面又可以展示表單欄位元件,這類元件常見於意見回饋、反映問題的管道。 + +首頁將使用到 [landmark]({{< ref "components/landmark/_index.md" >}}), [breadcrumb]({{< ref "components/breadcrumb/_index.md" >}}), [button and link]({{< ref "components/button-and-link/_index.md" >}}), [skip-to]({{< ref "components/skip-to/_index.md" >}}) 等共用元件。 + +意見回饋頁面,將使用到 [landmark]({{< ref "components/landmark/_index.md" >}}), [breadcrumb]({{< ref "components/breadcrumb/_index.md" >}}), [button and link]({{< ref "components/button-and-link/_index.md" >}}), [form]({{< ref "components/form/_index.md" >}}), [checkable]({{< ref "components/checkable/_index.md" >}}), #NEW! [password-input]({{< ref "components/password-input/_index.md" >}}), [textarea]({{< ref "components/textarea/_index.md" >}}), [skip-to]({{< ref "components/skip-to/_index.md" >}}) 等共用元件。 + +### WAI-ARIA + +針對 WAI-ARIA 技術依賴 javascript,從漸進式觀點處理方式可能是: + +- server-side 先設 data-* attribute +- onload 改動為 aria-* +- [required-attribute-requirements](https://www.tpgi.com/required-attribute-requirements/#comment-1094) + 作者:Scott O'Hara + +{{< code-example +content=`
+ + +
` +>}} + +{{< code-example +content=`` +>}} + +### 說明頁面 + +[開發網站無障礙模板]({{< ref "accessibility/demo-page/_index.md" >}}) + +[檢測工具導入文件]({{< ref "accessibility/a11y_tools/_index.md" >}}) + +#### 延伸參考資料 + +- [雜談網頁親和力(一)淺談網頁親和力方針](https://ossf.denny.one/foss-forum/802.html) + 作者:林克寰 +- [web accessibility in your organisation](https://www.nldigitalgovernment.nl/document/web-accessibility-in-your-organisation/) + 作者:DigiToegankelijk diff --git a/content/accessibility/a11y_tools/_index.md b/content/accessibility/a11y_tools/_index.md new file mode 100644 index 00000000..74d7bde1 --- /dev/null +++ b/content/accessibility/a11y_tools/_index.md @@ -0,0 +1,100 @@ +--- +title: 檢測工具導入文件 +--- + +自動化檢測工具功能為輔助進行無障礙規範符合度檢測,但無法取代手動檢測。可以被自動化檢測的規則,僅能檢測出 3-4 成已知的使用障礙,多數使用障礙仍需要透過手動檢測或使用者體驗才能夠發覺。在開發生命週期中,建議及早發現使用障礙並將其視為風險持續控管。不定期完成最小程度檢測,請參考 [WAI Easy Checks](https://www.w3.org/WAI/test-evaluate/preliminary/) 或 [GOV.UK 基礎檢查](https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one),如檢測中發現任何未符合之情況,均以問題追蹤系統(issue tracker)納管修正。嚴謹的 WCAG 無障礙規範符合度稽核,建議遵循 [Website Accessibility Conformance Evaluation Methodology, WCAG-EM](https://www.w3.org/TR/WCAG-EM/) 並可以搭配 [WCAG-EM Report Tool](https://www.w3.org/WAI/eval/report-tool/) 產出無障礙規範符合度報告。 + +### WAI 無障礙檢測工具清單 +--- +[Web Accessibility Initiative, WAI](https://www.w3.org/WAI/) 透過工具發布者自行提報方式,蒐整了一份[檢測工具清單](https://www.w3.org/WAI/test-evaluate/tools/list/)。清單以網頁形式呈現並提供搜尋功能,根據檢測的目的(手動測試、自動測試、模擬使用者體驗)、標的(網站、行動 APP、文件、原始碼等),以及工具支援的標準(WCAG版本及等級、EPUB版本)、是否收費、工具類型(瀏覽器擴充元件、書籤、應用程式、線上工具等)等條件,篩選出最符合需求的工具來協助無障礙符合度檢測。也由於清單是由工具發布者自行提報,工具對於檢測規則的實作,是否能正確檢驗規格上宣稱的規範版本仍應加以驗證。值得注意的是部分工具有提供[親和力宣告](https://www.w3.org/WAI/planning/statements/)、以及是否[實作 Accessibility Conformance Testing, ACT Rules](https://www.w3.org/WAI/standards-guidelines/act/implementations/),有助於了解工具的優勢與限制。 + +- [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/test-evaluate/tools/list/) + +### 候選工具 +--- + +- [GitHub \- dequelabs/axe-core: Accessibility engine for automated Web UI testing](https://github.com/dequelabs/axe-core) +- [GitHub \- pa11y/pa11y-ci: Pa11y CI is a CI-centric accessibility test runner, built using Pa11y](https://github.com/pa11y/pa11y-ci) +- [Purple A11y \- Automating Testing to Improve Web Accessibility for Apps and Websites - Singapore Government Developer Portal](https://www.developer.tech.gov.sg/products/categories/design/purple-a11y/overview.html) +- [Accessibility testing - GitLab](https://docs.gitlab.com/ee/ci/testing/accessibility\_testing.html) + 搭配閱讀: [CI/CD job template](https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml)。 +- [Web Accessibility Pipeline - accessiBe](https://accessibe.com/accessflow/integrate) +- [Developer Tools for Accessibility Level Access](https://www.levelaccess.com/developer-tools/) + 搭配閱讀: [Mocha - the fun, simple, flexible JavaScript test framework (mochajs.org)](https://mochajs.org/), [BDD Testing & Collaboration Tools for Teams - Cucumber](https://cucumber.io/) +- [HTML_CodeSniffer (squizlabs.github.io)](https://squizlabs.github.io/HTML\_CodeSniffer/) +- [@axe-core/reporter-earl - npm (npmjs.com)](https://www.npmjs.com/package/@axe-core/reporter-earl) +- [https://www.ibm.com/able/toolkit/tools](https://www.ibm.com/able/toolkit/tools) + +### 設計稿工具 +--- +這類型的工具可以針對設計稿,進行綜合性無障礙自動檢測、確保色彩組合有足夠對比度、在設計元素/元件標示焦點以及焦點順序、快速批次調整字級大小、模擬低視能者或不同樣態的色覺功能所看到的景象。 + +- [Stark: The suite of integrated accessibility tools (getstark.co)](https://www.getstark.co/figma/) +- [axe for Designers: A Free Accessibility Plugin - Figma](https://www.figma.com/community/plugin/1085612091163821851/axe-for-designers-a-free-accessibility-plugin) +- [Contrast - Figma](https://www.figma.com/community/plugin/748533339900865323/contrast) +- [A11y - Focus Order - Figma](https://www.figma.com/community/plugin/731310036968334777/a11y-focus-order) +- [Text Resizer - Accessibility Checker - Figma](https://www.figma.com/community/plugin/892114953056389734/text-resizer-accessibility-checker) +- [Low Vision - Figma](https://www.figma.com/community/plugin/940423402083252469/low-vision) +- [Color Blind - Figma](https://www.figma.com/community/plugin/733343906244951586/color-blind) +- [A11y Annotation Kit - Figma](https://www.figma.com/community/file/953682768192596304/a11y-annotation-kit) +- [Inclusive Design illustrations - Figma](https://www.figma.com/community/file/946569165254852480/inclusive-design-illustrations) +- [Accessible design toolkit - Figma](https://www.figma.com/community/file/1327037919540849715/accessible-design-toolkit) + +### 持續設計(Continuous Design) +--- +涉及到設計稿的版本控制與合併,透過這類工具可以確保設計階段不會重覆引入已知的使用障礙。 + +- [figma-plugin-continuous-design/README.md at main · mikaelvesavuori/figma-plugin-continuous-design · GitHub](https://github.com/mikaelvesavuori/figma-plugin-continuous-design/blob/main/README.md) + 搭配閱讀: + - [GitHub \- mikaelvesavuori/github-ci-demo: This is a basic demonstration of what is needed to run a GitHub Actions CI build by calling their REST API.](https://github.com/mikaelvesavuori/github-ci-demo) + - [Mikael Vesavuori / gitlab-ci-demo · GitLab](https://gitlab.com/mikaelvesavuori/gitlab-ci-demo) + - [GitHub \- mikaelvesavuori/azure-devops-ci-demo: This is a basic demonstration of what is needed to run a Azure DevOps CI build by calling their REST API. We are using Figmagic for this demo, to demonstrate running it in CI.](https://github.com/mikaelvesavuori/azure-devops-ci-demo) +- [Level Access Figma plugin - Figma](https://www.figma.com/community/plugin/1268557036921715308/level-access-figma-plugin) +- [Tokens Studio for Figma (Figma Tokens) - Figma](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma-figma-tokens) +- [Token Export - Figma](https://www.figma.com/community/plugin/1318612019979212772/token-export) + 搭配閱讀:[Design Tokens Format Module](https://tr.designtokens.org/format/) + +### Git 提交檢查(Git Hooks) +--- +Git Hooks 類型工具透過 Git 版本控制系統中的提交事件觸發自動檢測。 + +- [Using a Git Pre-Commit Hook with axe DevTools Linter - Deque Docs](https://docs.deque.com/linter/4.0.0/en/axe-linter-git-pre-commit-hook) + +### 程式風格檢查(Linter) +--- +Linter 類型工具可以檢測 React (JSX), React Native, Angular, Vue, HTML, Markdown 等靜態檔案內呈現出的使用障礙,在開發階段就可以發現問題。在 pull request 被審核或程式版本合併前,自動進行檢測並產出報告。 + +- [axe Accessibility Linter \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter) +- [axe Linter · GitHub Marketplace · GitHub](https://github.com/marketplace/axe-linter) + 搭配閱讀:[Using the axe DevTools Linter GitHub Action - Deque Docs](https://docs.deque.com/linter/4.0.0/en/axe-linter-github-action) +- [AccessLint \- Automated and continuous web accessibility testing](https://accesslint.com/) +- [ASLint - Accessibility testing tool](https://aslint.org/) +- [GitHub \- AccessLint/accesslint.js: Keep accessibility errors in check.](https://github.com/AccessLint/accesslint.js) +- [GitHub \- jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y\#supported-rules) +- [GitHub \- FormidableLabs/eslint-plugin-react-native-a11y: React Native specific accessibility linting rules.](https://github.com/FormidableLabs/eslint-plugin-react-native-a11y) +- [React's Accessibility Code Linter \- 24 Accessibility (24a11y.com)](https://www.24a11y.com/2017/reacts-accessibility-code-linter/) +- [GitHub \- maranran/eslint-plugin-vue-a11y: Static AST checker for accessibility rules on elements in .vue](https://github.com/maranran/eslint-plugin-vue-a11y) +- [GitHub \- vue-a11y/eslint-plugin-vuejs-accessibility: An eslint plugin for checking Vue.js files for accessibility](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility) +- [@angular-eslint/eslint-plugin-template \- npm (npmjs.com)](https://www.npmjs.com/package/@angular-eslint/eslint-plugin-template) + 搭配閱讀:[Angular ESLint Rules for Accessible HTML Content \- DEV Community](https://dev.to/angular/angular-eslint-rules-for-accessible-html-content-kf5) + +### 單元測試(Unit Test) +--- +單元測試工具可以將使用障礙測試案例整合到單元測試流程中,針對元件層級進行測試。 + +- [GitHub \- dequelabs/agnostic-axe: Framework agnostic accessibility reporter, powered by axe-core](https://github.com/dequelabs/agnostic-axe) +- [@axe-core/react \- npm (npmjs.com)](https://www.npmjs.com/package/@axe-core/react) + + +### 驗收測試(Acceptance Test) +--- +驗收測試可以將使用障礙測試案例整合到端到端(End-to-end, E2E)測試流程中,對多個元件進行整合性測試。 + +- [cypress-axe \- npm (npmjs.com)](https://www.npmjs.com/package/cypress-axe) + 搭配閱讀:[🚅 Building a Cypress Accessibility Pipeline with Next.js and Axe \- DEV Community](https://dev.to/lundjrl/building-a-cypress-accessibility-pipeline-with-nextjs-and-axe-5146) + +### 效能測試(Performance Test) +--- +效能測試可以針對網頁應用程式進行即時的頁面層級測試,自動化檢測規則涵蓋效能、無障礙、最佳實作、最佳搜尋(SEO)、漸進式增強應用程式等面向。 + +- [GitHub \- GoogleChrome/lighthouse-ci: Automate running Lighthouse for every commit, viewing the changes, and preventing regressions](https://github.com/GoogleChrome/lighthouse-ci) diff --git a/content/accessibility/demo-page/_index.md b/content/accessibility/demo-page/_index.md new file mode 100644 index 00000000..1ca612ea --- /dev/null +++ b/content/accessibility/demo-page/_index.md @@ -0,0 +1,126 @@ +--- +title: 開發網站無障礙模板 +maturity: "new" +--- + +### 請優先閱讀 + +
+

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

+
+ +開發網站無障礙模板與釐清現行檢測工具之無障礙國際標準及技術分析。本項工作將彙整相關的技術規範和標準,提供統一的參考依據,與工具推動無障礙網路空間的發展與使用,提供政府機關、開發人員及內容提供者可遵循一致的參考依據。 + +### 首頁範本 + +[首頁範本]({{< ref "accessibility/demo-page/landing-page.html" >}})原始碼。 + +{{< code-example path="accessibility/demo-page/landing-page.html" class="maxh" >}} + +### 意見回饋頁範本 + +此頁面範本為常見的表單填寫、業務申辦等類型的數位服務情境,在操作目的較單純的情境應可簡化為單一頁面或單一操作元件。為確保範本足以因應複雜情境,並展示多項共用元件應用,且避免 [SC 3.3.4 Error Prevention (Legal, Financial, Data)](https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html) 使用障礙,故範本設計中融入了填寫資料前的同意宣告,以及填寫資料後、送出資料前的最終確認。 + +[意見回饋頁範本]({{< ref "accessibility/demo-page/form-page-s1.html" >}})原始碼。 + +{{< code-example path="accessibility/demo-page/form-page-s1.html" class="maxh" >}} + +#### 設計元件引用 + +意見回饋、申辦業務這類有步驟、順序的流程,通常需要呈現完整的流程資訊,讓使瀏覽者可以了解目前所處的流程點,以及尚有多少步驟才能夠達成目的。 + +[麵包屑(Breadcrumb)]({{< ref "components/breadcrumb/_index.md" >}}) +本元件設計時,即考量到呈現導覽列結構資訊,透過報讀軟體瀏覽會報讀「麵包屑 導覽區 地標 清單 有 4 項 Step 1.同意聲明 到訪過 連結 Step 2.填寫資料 到訪過 連結 目前頁 Step 3.最終確認 Step 4.送出結果」,可以應用於此類情境。 + +[按鈕及連結 (Button and Link)]({{< ref "components/button-and-link/_index.md" >}}) +根據不同操作目的,調整 `button` 的 `type`, `formaction`, `formmethod` 等屬性值,例如:使用 `type="reset"` 實作清除輸入內容目的;使用 `formaction=URL formmethod="get"` 實作回到上一步目的。儘可能應用 HTML 原生的機制實現不同操作目的。 + +[頁面地標架構 (Landmark)]({{< ref "components/landmark/_index.md" >}}) +使用地標架構確保透過輔助科技瀏覽,可以清楚掌握頁面結構,並受益於輔助科技的快捷鍵操作功能,參考 [WAI APG landmarks pattern](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/)。 + +[跳至主要內容區 (Skip-To)]({{< ref "components/skip-to/_index.md" >}}) +使用 Skip-to 元件,避免 [SC 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks) 相關使用障礙。 + +[警告文字 (Warning Text)]({{< ref "components/warning-text/_index.md" >}}) +使用警告文字呈現「個人資料蒐集、處理、利用同意書」等類具法律效果內容,樣式有助於在視覺上一般內文文字區隔,並達到引導視線效果。 + +[表格(Table)]({{< ref "components/table/_index.md" >}}) +應用於表單輸入內容最終確認步驟,便於使用者對前一步輸入的資訊二次確認,並支援輔助科技瀏覽操作,參考 [UK.gov Smart Answer 範例](https://www.gov.uk/additional-commodity-code)。 + +#### 元件客製化調整 + +##### HTML + +
+

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

+
+ +針對本案例應用情境,微調元件的結構,例如:流程點之間具有順序性,所以未完成步驟1則無法操作後續步驟,故目前頁面之後的步驟調整為不可操作的 `span` 元素。 +引用[特殊標記文字]({{< ref "visual/typography/_index.md" >}})及粗體文字樣式標示目前頁面,避免單純使用單一種感知元素(如形狀、顏色、大小、視覺位置、方向或聲音等)標示,產生 [SC 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html) 相關使用障礙。 + +##### Server side + +- 流程點或步驟之間相依性、邏輯控制 +- 表單輸入內容格式驗證 +- 自動化程式防護 + +##### Client Side + +
+

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

+
+ +- 跨頁狀態保存 +- Optional: add semantic feature +- Optional: add keyboard feature + +##### CSS + +
+

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

+
+ +- 根據機關設計制度調整 CSS 色彩變數值,例如:調整 `--primaryColor` 為機關主視覺色彩。 +- Optional: customize style + +#### 漸進式增強原則考量 + +從漸進式增強原則觀點,本案例做了以下技術選擇: + +- 採用靜態生成架構。 +- 每個流程點獨立一個分頁,而非採取單一頁面依賴 JavaScript 動態生成內容。 +- 全網站導覽列直接可見,沒有用任何方式摺疊或需要透過按鈕展開。 +- 表單輸入內容透過 HTTP 協定方式提交。 +- 適當使用 WAI-ARIA 轉傳語意資訊給輔助科技,並參考[技術論壇建議](https://www.tpgi.com/required-attribute-requirements/#comment-1094)。 + +#### 無障礙特性 + +語音報讀軟體([NVDA](https://www.nvaccess.org/) + Edge 輔助科技與瀏覽器組合為例) + +- 使用快捷鍵 `NVDA + F7` 列出頁面地標清單 +- 使用快捷鍵 `d`, `Shift + d` 快速在頁面地標之間移動 +- 使用快捷鍵 `i`, `Shift + i` 快速在流程點之間移動 +- 使用快捷鍵 `f`, `Shift + f` 快速在輸入欄位之間移動 +- 進到麵包屑導覽區地標時,報讀以下資訊: + - 流程點或步驟總數,例如「清單 有 4 項」 + - 目前所處的流程點或步驟,例如「Step 2.填寫資料 到訪過 連結 目前頁」 + - 後續流程點或步驟名稱,但不可以操作,例如「Step 3.最終確認」 + +鍵盤瀏覽 + +- 使用 `Tab` 在流程點與輸入欄位元素之間移動 +- 使用 `Enter`, `Space` 在聚焦到按鈕時可以觸發動作 + +#### 測試工具 + +- [HTML validator](https://validator.nu/) +- [Lighthouse (12.0.0)](https://developer.chrome.com/docs/lighthouse/overview) +- [Freego (Apr 15 2024)](https://accessibility.moda.gov.tw/Download/Detail/2763?Category=70) diff --git a/content/accessibility/demo-page/form-page-s1.html b/content/accessibility/demo-page/form-page-s1.html new file mode 100644 index 00000000..e55629ec --- /dev/null +++ b/content/accessibility/demo-page/form-page-s1.html @@ -0,0 +1,89 @@ +--- +title: 意見回饋頁範本 +layout: raw +--- +{{< demo-page-head >}} +
+ + {{< breadcrumb-step path="Step 1.同意聲明;Step 2.填寫資料;Step 3.最終確認;Step 4.送出結果" current="1" >}} +
+

Step 1. 同意聲明

+
}}" method="get"> +
+
+ 個人資料蒐集、處理、利用同意書 +

+ 為遵守個人資料保護法規定,並保障當事人之權利,謹依法告知下列事項: +

+

+ 1. 機關名稱:XXXX機關(○○分局) +

+

+ 2. 蒐集之特定目的:(例:代號一○一 XXXX業務) +

+

+ 3. 個人資料之類別:(例:姓名、身分證編號、出生年月日、住址…等) +

+

+ 4. 個人資料利用之期間、地區、對象及方式: +

    +
  • (1) 期間:(例:蒐集後一年)
  • +
  • (2) 地區:(例:中華民國主權範圍內)
  • +
  • (3) 對象:(例:自行使用)
  • +
  • (4) 方式:(例:公告)
  • +
+ +

+

+ 5. 依個人資料保護法第 3 條規定,當事人可行使以下權利: +

    +
  • (1) 查詢或請求閱覽。
  • +
  • (2) 請求製給複製本。
  • +
  • (3) 請求補充或更正。
  • +
  • (4) 請求停止蒐集、處理及利用。
  • +
  • (5) 請求刪除。
  • +
+ 若有上述需求,請與本單位聯繫,於填妥本單位當事人權利行使申請書後,本單位將依法進行回覆。另依個人資料保護法第 14 條規定,查詢或請求閱覽個人資料或製給複製本者,本單位得酌收必要成本費用。 +

+

+ 6. 若未提供正確個人資料,本單位將無法提供您特定目的範圍內之相關服務。 +

+

+ 本人已充分知悉貴單位上述告知事項,並同意貴單位蒐集、處理、利用本人之個人資料。 +

+
+ + + +
+ + +
+
+ +
+
+
+
+ +
+{{< demo-page-foot >}} diff --git a/content/accessibility/demo-page/form-page-s2.html b/content/accessibility/demo-page/form-page-s2.html new file mode 100644 index 00000000..20afabc4 --- /dev/null +++ b/content/accessibility/demo-page/form-page-s2.html @@ -0,0 +1,68 @@ +--- +title: 意見回饋頁範本 +layout: raw +--- +{{< demo-page-head >}} +
+ + {{< breadcrumb-step path="Step 1.同意聲明;Step 2.填寫資料;Step 3.最終確認;Step 4.送出結果" current="2" >}} + +
+

Step 2. 意見回饋

+
}}" method="get"> +
+
+ 聯絡資訊 + + +
+
+ 意見內容 + + + +
    +
  • 內容上限 200 字。
  • +
+ +
+ + +
+ + + +
+
+ +
+
+
+
+ +
+{{< asset-script "js/components/character-count.js" >}} +{{< demo-page-foot >}} diff --git a/content/accessibility/demo-page/form-page-s3.html b/content/accessibility/demo-page/form-page-s3.html new file mode 100644 index 00000000..bd13a687 --- /dev/null +++ b/content/accessibility/demo-page/form-page-s3.html @@ -0,0 +1,81 @@ +--- +title: 意見回饋頁範本 +layout: raw +--- +{{< demo-page-head >}} +
+ + {{< breadcrumb-step path="Step 1.同意聲明;Step 2.填寫資料;Step 3.最終確認;Step 4.送出結果" current="3" >}} + +
+

Step 3. 最終確認

+
}}" method="get"> +
+ + + + + + + + + + + + + + + + + + + + + + +
送出結果
項目內容
姓名XXX
意見類型無障礙
意見回饋多語系介面支援。
+ + + +
+ 真人驗證 + + + }}" alt="CAPTCHA 檢核考驗圖片(請注意驗證填寫說明)"> + + + +
+ +
+ + +
+
+ +
+
+
+
+ +
+{{< demo-page-foot >}} diff --git a/content/accessibility/demo-page/form-page-s4.html b/content/accessibility/demo-page/form-page-s4.html new file mode 100644 index 00000000..ec26f084 --- /dev/null +++ b/content/accessibility/demo-page/form-page-s4.html @@ -0,0 +1,41 @@ +--- +title: 意見回饋頁範本 +layout: raw +--- +{{< demo-page-head >}} +
+ + {{< breadcrumb-step path="Step 1.同意聲明;Step 2.填寫資料;Step 3.最終確認;Step 4.送出結果" current="4" >}} + +
+

Step 4.送出結果

+
+

+ 您提交結果已送出,請靜候相關單位與您聯繫。 +

+
+
+
+
+ +
+{{< demo-page-foot >}} diff --git a/content/accessibility/demo-page/landing-page.html b/content/accessibility/demo-page/landing-page.html new file mode 100644 index 00000000..41132fc0 --- /dev/null +++ b/content/accessibility/demo-page/landing-page.html @@ -0,0 +1,76 @@ +--- +title: 首頁範本 +layout: raw +--- +{{< demo-page-head >}} + +
+ +
+ +
+
+

感謝您選擇探索我們目前所呈現的內容。我們正在全力開創新的典範,以便為您提供有價值的知識及技術。

+ +

我們的努力不會歇止,我們鼓勵您現在就開始運用這裡提供的資訊和設計。您的參與和意見對我們至關重要,這將有助於我們更進一步,讓政府網站設計原則更加完善。

+ +

我們期待著您的回饋,並感謝您對我們的支持。讓我們攜手合作,共同見證政府網站設計原則的進步和成長。

+
+ + +
+
+
+ +
+{{< demo-page-foot >}} diff --git a/content/components/_index.md b/content/components/_index.md index a47d6dad..26f89f41 100644 --- a/content/components/_index.md +++ b/content/components/_index.md @@ -1,5 +1,6 @@ --- title: 共用元件 +weight: 20 --- ### 目標 diff --git a/content/components/landmark/one-column.html b/content/components/landmark/one-column.html index 780f3515..6bb9cf20 100644 --- a/content/components/landmark/one-column.html +++ b/content/components/landmark/one-column.html @@ -16,7 +16,7 @@
diff --git a/content/components/skip-to/skip-to-multiple.html b/content/components/skip-to/skip-to-multiple.html index e03939fb..72c6467c 100644 --- a/content/components/skip-to/skip-to-multiple.html +++ b/content/components/skip-to/skip-to-multiple.html @@ -29,7 +29,7 @@