感謝您選擇探索我們目前所呈現的內容。我們正在全力開創新的典範,以便為您提供有價值的知識及技術。
+ +我們的努力不會歇止,我們鼓勵您現在就開始運用這裡提供的資訊和設計。您的參與和意見對我們至關重要,這將有助於我們更進一步,讓政府網站設計原則更加完善。
+ +我們期待著您的回饋,並感謝您對我們的支持。讓我們攜手合作,共同見證政府網站設計原則的進步和成長。
+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" +--- + +### 請優先閱讀 + ++ 本頁展示的頁面範例,若要導入到正式環境,應進行必要調整,例如:伺服器端作業、資安防護,以及依機關設計制度系統性調整元件樣式與形象設計素材。 +
++ !注意:元件 HTML 調整應符合 HTML Standard 與原則設計的 class 階層,確保未引入使用障礙、設計制度樣式能正確套用。 +
++ !注意:引入越多增強功能,容易對數位服務韌性產生影響,應注意符合漸進式增強原則。 +
++ !注意:使用客製化樣式應符合整體設計制度,並確保樣式可維護性、便於系統性調整,避免產生已知的使用障礙。 +
++ 您提交結果已送出,請靜候相關單位與您聯繫。 +
+感謝您選擇探索我們目前所呈現的內容。我們正在全力開創新的典範,以便為您提供有價值的知識及技術。
+ +我們的努力不會歇止,我們鼓勵您現在就開始運用這裡提供的資訊和設計。您的參與和意見對我們至關重要,這將有助於我們更進一步,讓政府網站設計原則更加完善。
+ +我們期待著您的回饋,並感謝您對我們的支持。讓我們攜手合作,共同見證政府網站設計原則的進步和成長。
+Engineering has a direct and vital impact on the quality of life for all people. Accordingly, the services provided by engineers require honesty, impartiality, fairness, and equity, and must be dedicated to the protection of the public health, safety, and welfare.
diff --git a/content/visual/_index.md b/content/visual/_index.md
index 0a23b0d2..db73bfde 100644
--- a/content/visual/_index.md
+++ b/content/visual/_index.md
@@ -1,5 +1,6 @@
---
title: 視覺設計
+weight: 40
---
+ 本頁展示的頁面範例,若要導入到正式環境,應進行必要調整,例如:伺服器端作業、資安防護,以及依機關設計制度系統性調整元件樣式與形象設計素材。 +
+