基於mvc具備可訪問性的按鈕設計

借鑑自強大的 google button .

 

mvc 分解：

總體架構：

 

 

 

 

 

Model and control :

 

不涉及 ui 渲染，用來表示按鈕的實質，按鈕具備以下數據屬性：

 

content : 按鈕顯示值

 

value : 按鈕的內在存儲值

 

tooltip : 按鈕的鼠標掠過（得到焦點）提示

 

described-by : wai-aria 可用性需要，按鈕的具體描述

 

disabled : 按鈕是否禁用

 

 

按鈕的 control 層會觸發一些事件，常用的就是 click （同時需要考慮鍵盤的可訪問性，enter，space 也會觸發click），並根據用戶交互通知 view 層渲染 UI。

 

 

View :

 

專注於 UI 渲染，根據 control 層以及 model 層的狀態來渲染對應的 UI。

 

最頂層抽象爲 buttonrender ，爲一個盒子 mixin 而成，不代表具體渲染器，只用於描述 ui 屬性，以及指定 role 爲 button 。

 

 

最簡單的就是 nativerender ，僅僅使用內置 button 渲染，那麼用戶交互狀態產生的 UI 變化由系統控制，並且可訪問性方面也不需多做。

 

 

或者可以自己使用 div 渲染自己的 button ( cssrender )，省事的話是單層 div

 

通過css3控制在除ie<9下的按鈕圓角，還需要根據control層同步自己渲染的ui。

 

1. focus/blur ：渲染/取消 focus 樣式。

 

2.mousedown/up : 渲染/取消 active 樣式，並更新 aria-pressed 增強可訪問性。

 

3.mouseenter/leave : 渲染/取消 hover 樣式。

 

4.disabled : 渲染/取消 disabled 樣式，去除 tabindex（鍵盤導航不可達），更新 aria-disabled

 

也可以使用雙層 div 在所有瀏覽器下模擬圓角 ( customrender )

 

customrender 和 cssrender 的不同之處主要在於，初始渲染時生成雙層 div 即可：

 

.outer { border-width: 1px 0;}

.inner {
  margin: 0 -1px;
  border-width: 0 1px;
}

<div class='outer'>
<div class='inner'>
</div>
</div>

 

另一點就是需要通過 aria-labelledby 指定按鈕的真正內容所在節點（最內層），其他都是純粹裝飾！

 

demo :

 

customed button for kissy

 

 

 

refer :

 

button role 在可訪問性中的位置