# Piman 無障礙網頁前端 UI 框架

* [快速開始 (Vue2)](/piman/vue2/getting-start.md)
* [Github (Vue2)](https://github.com/ya-sai/piman)

### Accessibility, Design System and UI Framework

近年來「以使用者為中心」的概念已深植人心， 而這股力量也開始擴散至無障礙網頁設計領域， 藉由不斷改善網頁的親和力， 期望能達成通用設計的核心概念：Design for All。

Piman 正是為此而生， 從人們日常生活常頻繁接觸的網頁開始著手改善， 所以首要任務便是推廣開發者使用 Piman 開發政府機關網站， 進而應用在產品、官網等地方，如此企業可善盡社會責任，也可與國際趨勢接軌。

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Design Tips</strong></td><td>提供設計師無障礙網頁設計的重點，避免重複踩到前人踩過的地雷。</td><td></td></tr><tr><td><strong>Figma Template</strong></td><td>完善的 Design System， 快速、方便執行無障礙網頁設計。</td><td></td></tr><tr><td><strong>Vue Components</strong></td><td>提供多樣常見的元件， 站在巨人的肩膀上開發！</td><td></td></tr><tr><td><strong>Nuxt Template</strong></td><td>快速開啟無障礙網頁前端專案，省下環境設定的時間。</td><td></td></tr></tbody></table>

### 為什麼要使用無障礙網頁 UI 框架？ <a href="#why-accessibility" id="why-accessibility"></a>

* 降低無障礙網頁開發成本：快速創造出友善的網頁
* 未來每個網站都會注重無障礙網頁設計：已經成為世紀趨勢，尤其是 UX 意識提升的現在
* WTO 統計全球已有超過 10% 以上的人有一定程度的身心障礙：落實 Design for All 精神，讓更多用戶使用
* 符合臺灣無障礙網頁設計規範的 UI 框架套件不多：為了符合無障礙而修改原始碼容易造成版本鎖死、維護不易
* 良好的管理設計樣式：完善的 Design System，提升維護與開發效率

### &#x20;基於 Vue 2 開發的 UI 框架(Vue 3 版開發中) <a href="#piman-vue2" id="piman-vue2"></a>

{% embed url="<https://codesandbox.io/s/piman-accordion-lg31rk>" fullWidth="false" %}

* 我們希望盡可能讓更多人使用 Piman，而對無障礙學習者與切版新手來說， Vue 在技術面上成熟且相對其他框架好上手。
* 無障礙網頁設計要注意許多技術、結構規範，複製/貼上 html 等方式可能會遺漏細節或誤用，因此我們決定使用 Vue 來製作元件，希望降低錯誤發生機率。
* 同時為考慮 IE11 的良好支援 ，選擇了 Vue 2 來進行開發。
* 另外 Vue3 版也在開發中，但只支援現代最新瀏覽器。

### 讓我們保持聯繫吧！ <a href="#subscribe" id="subscribe"></a>

歡迎訂閱，我們會將各種有關無障礙網頁設計的資訊分享給您。

{% embed url="<https://47f3ef82.sibforms.com/serve/MUIFANnLK2Ql1grVrZTJM67A5ua7LjCdYRKZIWOLbxDcmEVpZb1ACNcq1Wrs8TRksJEVjWUZS0wyK1fji-RwGhjc2vdDLfBMlKcpmE-D-UXNq6VC3v1yCTucDhsyaoZqoEm8Gc-pN9WCi1HR11q7mG67rEvaWvl5GvmEFlgUbyb6R9bAOHsbs92fT2JyYp3Qe5IEP2VFDK-H3TqG>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bpio.gitbook.io/piman/home.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.