之前自己发了个安利LuLu UI组件的微博，其中有位同行对于弹框组件提了这么一个问题：大佬，这种info类型的，为什么还要带个x？明明有确定按钮，似乎这个叉叉按钮去掉也没什么事，是不是很多人有类似的疑问？我很早之前就有过这样的想法，而且还付诸实践，直接把几个提示框右上角关闭按钮去掉，好干净好清爽，而且功能也没什么问题，还洋洋得意。后来，不断学习和积累，才发现当初的我对交互设计和用户体验的认知还很浅薄。
文章关键字 ‘可访问性’
实力科普：为什么浮层或弹框一定要有叉叉关闭按钮？
2018年07月14日，星期六借助HTML5 details,summary无JS实现各种交互效果
2018年01月15日，星期一HTML5 details, summary这两个标签元素内置交互行为，我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然，前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。
CSS :focus伪类JS focus事件提高网站键盘可访问性
2017年04月23日，星期日所谓“键盘可访问性”，指的是用户只使用键盘访问网站的能力。例如，我们的iMac鼠标没电了，或者鼠标坏了，或者在智能电视中访问我们的网站，此时就只能依赖于键盘访问了。
我们只要平时注意HTML语义化，例如按钮不要使用<span>，<div>等标签，不要重置outline，基本上键盘可访问性就已经及格了。
若想再进一步提供，就需要看看本文的内容了……
基于VoiceOver的移动web站无障碍访问实战
2017年01月20日，星期五所谓“无障碍访问”，指的是各类设备均可以无障碍访问。例如鼠标、键盘、读屏软件或设备等。
ARIA全称“Accessible Rich Internet Applications（可访问的富互联网应用）”。
VoiceOver是苹果设备上的读屏软件，当开启VoiceOver后，交互行为和通常行为是不一样。并且和ARIA属性之间的关系也比较深，本文就将通过项目实战展示基于VoiceOver的移动端ARIA特性和注意事项。
HTML可访问性fieldset,legend元素及CSS布局应用
2016年11月12日，星期六本文主要介绍平时用的不多的，尤其现在的小伙伴很少关注的fieldset和legend元素，从可访问性以及CSS布局这块展示这两个元素的作用，价值以及应用场景。希望本文的内容能够对您的学习有所帮助。
找到适合自己的前端发展方向
2016年08月26日，星期五前端发展迅猛，除了自身更加厚重外，往前以及往后都有了发展和延伸，当前对前端的要求更高，而人的精力总是有限的，这个时候，就需要我们把有限的精力放在更适合自己发展的方向上，那应该放在哪个方向上呢？本文就将通过我自身的经验、观察和认识，为大家指明前进的道理。
翻译-盲人如何使用互联网的8个误区
2013年03月6日，星期三虽然翻译的文章不少，但是，有时会看走眼，开始感觉不错，翻译完了发现其实没啥货。本文内容呢，还算不错的，说句良心话，自己也是学到了不少东西，至少对屏幕阅读器有个更准确的认识。至于细节什么的，您自己点击进去看看吧。希望能对你构建可访问性的网站提供一点帮助。
span与a元素的键盘聚焦性以及键盘点击性研究
2013年02月20日，星期三我们平时涉及点击交互事件的时候，都是使用的a元素或者button元素，原因是可以相应键盘focus效果以及回车触发点击事件，这是众所周知的。
但是，可能存在一些特殊情况，我们需要使用默认没有键盘可访问性的元素，例如span元素，我们可以通过一定的设置支持键盘的可访问性，这是不为所知的，也是本文的重点所在。
不同CSS布局实现与文字鼠标选择的可用性
2012年05月21日，星期一我们平时因为A原因或B原因，需要复制web页面上的文字内容。常见的操作就是按住鼠标，选中要复制的文字区域，抬起鼠标按键，目标区域的文字就选中了。
不知你知不知道，有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。
这么说吧，假设你在微博上看见一个名为“屌丝逆袭”的标题，但是，由于孤陋寡闻，不知道这个标题啥意思，于是想百度之，最快的方式就是选择→复制→搜索。结果，像中了邪，这几个文字TMD就是选不准，老把旁边的“萝莉御姐”一起选中了；然后，这个标题又是链接，不能双击选……
本文重在抛砖引玉，希望对各个同行有所小小意识与启发。
WAI-ARIA无障碍网页应用属性完全展示
2012年03月14日，星期三WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。
而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
本文完整展示了ARIA相关的各个属性，角色。长长的表格，HTML代码示意，说明，截图等，希望本文可以对国内无障碍网页应用的重视和发展提供一些帮助。
我的应用
我的应用