萧晗

摘要： 花里胡哨的东西在靠谱的网站已不常见，因此，要找个很纯粹的装饰性元素我还是好好折腾了一把。所谓“装饰性元素”，指页面主体内容并没有多大的必然联系，更多作用是美化，引导的元素。在布局这些元素的时候，我们要把它看成“外来者”，排挤，可缺省，要让其存在与否仿佛与页面没关系一样。什么意思，就是，让这些元素直接从页面上delete掉，页面毫无反应，好比地球上死了一只蚂蚁，上帝压根感觉不到。例如，下面的对比，以及下面的下面的对比：通过上面的“找你妹”，可以发现这些站点的这类元素都是可缺省的。但其实（可缺省的实现）可能并不是有这个意识，而是，技术实现使然——不使用绝对定位，我搞不定哈！OK，全然正面的例子显然 阅读全文

摘要： 一、你至少应该知道ARIA是什么东西！WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！二、为什么需要ARIA？回答标题问题前我先问其他几个问题？如何让盲人用户知道当前浏览区域就是网站主导航？如果让盲人用户知道点击某个按钮后出来的是弹框？如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？如何让盲人用户知道您使用了li标 阅读全文

摘要： 一、众所周知的与不为所知的我们平时涉及点击交互事件的时候，都是使用的a元素或者button元素，原因是可以相应键盘focus效果以及回车触发点击事件，这是众所周知的。但是，可能存在一些特殊情况，我们需要使用默认没有键盘可访问性的元素，例如span元素，我们可以通过一定的设置支持键盘的可访问性，这是不为所知的，也是本文的重点所在。二、span元素处理与测试要让一个普通的span元素达到一个含button元素的键盘可访问性，我们需要如下处理：首先，很显然的，绑定点击事件；给元素设置tabindex="0"属性，使得元素在tab键锚点切换的时候，可以获得焦点；使用role属性告诉 阅读全文

摘要： 二、前事不忘后事之师看似花边的故事讲完了，回到正题。智者千虑必有一失，我的失当然更多，好在没有大的纰漏，挖的都是些小坑，还是可以填平的。其实，我本不想讲这些坑坑洼洼，因为，每个人从从事的项目、所做的工作都是不一样的。我可能自认为的经验并不一定就受用于他人，甚至，特殊情况下会误导。因此，本文的东西，需要您的甄别，不要一股脑都接受了。你认为是这样的就这样，你不赞同的就不赞同。1. 整站小图标Sprite由于是面向整个网站做架构，因此，显然，那种超级Sprite的做法是非常不可取的（除非你这个页面与其他页面完全独立、无耦合；或整体页面数有限）（参见下图企鹅微博的超级背景图片集），这样的大坑我是不会挖 阅读全文