Web 无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

为什么无障碍如此重要（帮助残障人士）

为什么不是所有网站都能无障碍访问？你可能也会问自己为什么存在 “无障碍” 的问题，为什么不是所有网站都能让所有用户无障碍访问？要进行无障碍设计有许多不同原因，其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。

作为一个混迹互联网的 IT 人士，如果想各方面都了解点得话，那么设计 gif 动画也是个不错的学习方向哦！

下面就 step by step 教大家如何设计一个 loading.gif 的加载动画图：

先看效果图：

苹果的首席设计师 Jony Ive 最近接受了采访，大师透露的第一点设计经验之谈是要务实不要务虚：

设计这个词既含义丰富又空洞无物。我们平时都不谈设计，而是讨论创意形成和产品制造。

Jony Ive 开发产品时会时刻记住两个目标：

1. 让设计尽可能简约
2. 把每个产品设计到足够好，好到用户无法接受其他样子。

应用设计有一条原则是，好看的就是有用的。但是 Google 新近的一项研究表明，情况并非如此。

推荐给所有产品经理和用户体验设计师：需要用文字来解释的交互不是好交互；自然往往和人的本性相关的；产品经理在面对一个复杂问题时，需要有一种符合 “自然” 原则的建模方法，来通过产品结构模块以及模块之间的联系来映射和解决问题。

今天写了一个滚动条 UI 组件。欢迎大家体验：http://alloyteam.github.com/ui/

为何称之为完美呢？只因其具有以下优点：

1. 兼容所有浏览器。
2. 支持所有鼠标事件，包括长按。
3. 样式可以完全自定义。
4. 使用该组件无需改动原来的任何代码，也不要求原来的元素使用什么定位方式。
5. 只需引进一两个 js 文件，再添加一句代码即可。

下面讲核心部分。

你是否遇到过这样的情景：

1、用 gif 格式的 loading 菊花会有背景颜色，与页面背景格格不入
2、于是，设计师给你一帧一帧变化的透明 png 合图，你能想到的就是用 JS 来控制
3、最终，你会发现用 JS 控制的 loading 菊花，对网页性能有一定的影响

        好在现在，这个 HTML5 到来的时代，如果你不用考虑浏览器兼容问题，你就可以用 CSS3 轻轻松松实现透明 loading 菊花的加载效果，下面的Step By Step 会让你茅塞顿开：

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为 css3 里面已经有实现 text-overflow：ellipsis，但是最新 w3c 文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

可以看到，只有 firefox 和 opera11 一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑 firefox 等不支持的浏览器了，唯有使用 js 进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母 i 和 A 的宽度是不一样的，存在 bug 且不够精确。