基于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 在可访问性中的位置

 

 

 

 

评论

2 楼 yiminghe 2011-04-27  

xmind

1 楼 mylove4 2011-04-21  

敢问兄台您用的什么工具画的图？很漂亮啊