基于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 :
refer :
button role 在可访问性中的位置
上一篇: LeetCode 178. 分数排名
下一篇: Java多态