I'm banum 技术回归人本

WEB可用性学习<九>造就完美外观

一图胜千言

信号灯和毒苹果

首先我们需要了解一下色盲

• 红绿色盲（出了大家知道的难以区分红色和绿色这个特点外，他们还会感到颜色和亮度变暗，以至于无法区分红色和黑色。最普遍的色盲，男性居多）
• 黄蓝色盲
• 全色盲（完全无法分辨色相，但对相对亮度比较敏感，极其罕见）

我们主要考虑红绿色盲，因为其他两种人群都非常罕见。
色盲用户遇到的最大问题就是用颜色作为关键字的信息。如果某种颜色在色盲模拟中表现不佳，有3个选择：

• 改变冲突的颜色之一
• 添加纹理使信息更明确
• 在关键字的说明中添加数据信息（替代的访问途径）

在黑白世界中思考

相对明度的计算公式：
（0.2126*R）+(0.7152*G)+(0.0722*R)
相对明度的值永远在0~1之间，如果两个颜色的相对明度过于接近，就说明对比度太弱了

择路而行

为所有的<img>和<area>添加alt=属性，这个很容易实现。问题的关键在于如何书写正确的替代文本。

• 首先alt里面是简短的文本，字数在40-80字母之内。
• 使用类似“……的图像”这样的说法。
• 避免在替代文本中提供其他方式中没有的信息。

由于有效的<img>都具有alt=属性，所以这意味着有可能会出现alt=”这样的空属性。两种情况下会出现这种情况：

• 冗余的图像
• 装饰性图像

alt=之外

有的时候图像表现的内容太多，以致无法简略地进行总结，这种情况下可以把说明写在单独的页面上，然后用longdesc=属性连接起来。注意，longdesc是alt的扩充，而不是替代。
一个比较好的例子就是图表。对于这种情况，有3种策略：

• 将内容最小化
• 依靠longdesc=
• 在叙述文本中进行说明

对于一些简单的图像，是完全不需要图像，比如用HTML和CSS来构建一个柱状图。

别让视频破坏你的网站

不要粗鲁地闪你的读者

为网站添加视频和多媒体内容时，应当注意是否存在闪烁。感光性癫痫在受到特定的视觉刺激时，会不同性质，不同程度地发作。
闪烁是指任何形式的视觉输入在高亮度和低亮度之间来回反复切换。对于感光性癫痫，特别注意2-55Hz的闪烁。
对于闪烁的阈值，这样定义：

• 相对明度超过10%的变换序列都可能是闪烁变换，如果在1秒时间内，序列出现3次或更多就属于超过阈值。
• 如果是小块闪烁往往不认为有害。当闪烁范围占据超过了屏幕像素的十六分之一的矩形大小就认为超过阈值。

如果某一段视频中闪烁是必须的内容，那么请在开始前给予警告。

午夜吱吱嘎嘎走过的文字幽灵

为视屏提供字幕使视频对听力障碍具有可用性。请注意subtitle和caption的区别。前者被设计为提供外语翻译。后者主要为听力障碍者设计。我们重点在于后者。
一个好的caption要做到：

• 保持相关性，提供的信息不能太少也不能太多。
• 任何重要的词语都应该在字幕中体现。
• 如果说话人不明确，应当在字幕中指明说话人。如果会破坏内容，则抽象地指出说话人
• 描述重要的背景声音，忽略无关的。
• 字幕必须同步。

请讲给我听

为视觉障碍者改进视频，在相关性方面和创建caption大同小异。

• 只说该说的话。因为添加解说会使视频的其他背景减弱甚至是视频暂停。
• 内容过多，声音描述应付不过来。如果内容是重要的，需要在视频中创建暂停，引导用户自主得去查看内容。

剪辑室里的秘密

提供一些处理视屏的格式：

• SubRip SRT和SubViewer SUB这是简单字幕格式，非常常用。
• SAMI 微软提供的，制作用HTML形式呈现。
• QuickText 苹果quickTime的某种格式。
• SMIL W3C的解决方案，形式类似XML
• DXFP W3C的用于分发和传输时控文本的解决方案。
• MAGpie 一个字幕处理工具。