---
description: 為無障礙網頁而生的 UI 框架 無障礙，讓你我被世界善待
---

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

* [快速開始 (Vue2)](vue2/getting-start)
* [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" %}
