提升无障碍开发效率的JavaScript键盘事件库

键盘事件可以提高网站的易用性,提高用户与网站的交互体验,或者是页面需要通过键盘输入来触发事件。这些都非常有必要使用快捷键或者是键盘输入条目。

将这些事件处理整合到 HTML 文档中,通过 JavaScript 来定义相关的功能,是另一个非常好的方法,让 web 应用像桌面应用一样方便操作。接下来我们要介绍收集到的 20 款 JavaScript 处理键盘事件的库,帮助用户处理各种键盘事件,方便实用,好好欣赏吧:)

Keypress

Keypress 是个有着许多特别功能的输入捕捉库,它非常容易使用,有个极小的脚本(约9kb),而且没有任何依赖。这个库支持所有主流的浏览器和操作系统,但是没在非英文的键盘上测试过。
1
Mousetrap

Mousetrap 是个没有外部依赖的独立库,它最小约为 1.9kb,Mousetrap 非常容易扩展,只要页面中包括 Mousetrap 和需要扩展的 JavaScript 库就可以了。

Mousetrap支持的浏览器有: Internet Explorer 6+, Safari, Firefox 和 Chrome。

2

jQuery Hotkeys

jQuery.Hotkeys 允许用户在源代码中添加或者删除各种键盘事件,几乎支持任何组合键。只需要一行代码就可以绑定或者解绑快捷键。支持(Win/Mac/Linux)平台上 的浏览器: IE 6/7/8, FF 1.5/2/3, Opera-9, Safari-3 and Chrome-0.2。

3

Keymage

Keymage 是用 JavaScript 实现的极小的处理快捷键绑定的库,它没有任何的依赖项,非常容易扩展,用户很容易就能使用它开发一个新的库。

4
KeyboardJS

KeyboardJS 是个 JavaScript 库,用来绑定键盘组合键,不会有任何的键盘代码和键盘组合键冲突。它可以作为一个独立的库也可以作为一个 AMD 模块。它支持单一快捷键或者组合键,可以在任何地方使用。
132638_L0fN_865233

kbNav

kbNav 可以很方便的使用键盘来进行用户友好的网站导航。kbNav 快捷键会出现在用户点击的对象中。用户可以很方便的找到想要使用的快捷键。用户可以使用网站开发一些无意识的快捷键和一些行为的关联,消除记忆快捷键和行 为的麻烦。kbNav 只需要点击相应的键盘,按 Enter 就可以生效,而且快捷键可以包含字每和数字,用户可以为每个行为都制作相应的快捷键。

132700_3Mci_865233

Keymaster.js

Keymaster 是个简单的微型库,用来定义和分配 web 应用的各种快捷键。Keymaster 没有任何依赖项,可以完全独立使用。它支持任何的 JavaScript 库或者是框架。
Keymaster 可以在任何浏览器上定义 keyup 和 keydown 事件的快捷键。目前支持的浏览器有: IE (6+), Safari, Firefox 和 Chrome。

Jwerty

jwerty 是个 JS 库,允许用户绑定,启用和定义相关元素和世间的快捷键方式。它一般包括一些极小的标准 API ,非常容易使用和清除。它大小约为 1.5kb ,而且没有任何依赖项,同时又兼容 jQuery,Zepto 或者其他 。

132736_XCIq_865233
KeyCode.js

KeyCode.js 是个跨浏览器的 JavaScript 常规键盘快捷键库。这个库围绕键盘对象来运行,还有一些 { Int code, bool shift, bool alt, bool ctrl } JavaScript 对象,记录用户按下的键盘对象。translate_event() 方法会返回其中一个对象; hot_key() 获取其中一个然后返回一个符合 JQuery HotKey 插件或者  Binny V A’s shortcut.js 库的字符串。
Handling Keyboard Shortcuts in JavaScript

使用这个库,用户可以添加键盘快捷键到 JavaScript 应用中,它支持Mac 的 Meta Key,但是目前只是测试版,需要小心使用。

132831_4cAX_865233

keyboard.backbone.js

keyboard.backbone.js 依赖于 domEvents.backbone.js,domEvents.backbone.js 又依赖于 jQuery 和 Backbone。keyboard.backbone.js 主要是依赖 domEvents 的 keyDown 和 keyUp(也叫做:key:down 和 key:up),所以如果用户想执行不一样的 key:press 需要另外一个不同的库。

Kibo

Kibo 是个简单的 JavaScript 库,用来处理各种键盘事件,没有任何依赖,而且完全开源。
JavaScript Shortcuts Library

这是个令人印象深刻,而且又容易使用的 JavaScript 快捷键库,可以处理各种键盘事件。

User Keyboard Shortcuts

UserKeyboardShortcuts 是重构了 mootools-more 提供的键盘类,提供给用户本地自定义的键盘快捷键,不需要用户做过多的操作。
用 户只需要用 Keyboard.addShortcuts ( Keyboard.Extras提供的 )来改变他们的快捷键。UserKeyboardShortcuts 使用 localStorage (对 cookie 失效)来存储用户所做的修改,当页面重新加载的时候恢复原状。
okShortcut

okShortcut 包括两个方法: jQuery.shortcut.add 和 jQuery.shortcut.remove ,分别用来添加和删除快捷键绑定。两者都可以绑定组合键和进行回调。 jQuery.shortcut.add 可以选择接收一个选项 hash。

133040_21On_865233

jQuery Beeline
Beeline 是用最直接的方式去绑定快捷键,为 web 应用提供键盘导航。它是基于 jQuery Hotkeys.

jQuery Shortcuts

jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。
KEY-BOARD-SHORT-CUTS

key-board-short-cuts 是用 JavaScript 实现的简单键盘快捷键示例,它不是一个复杂的 JavaScript 绑定事件。绑定快捷键之后所有的行为都需要开发者自己去自定义。

jKey

jKey 是另一个非常有用的 JavaScript 快捷键库,用来处理键盘事件。它使用 jQuery,所以可以选择任何可用的元素来设置快捷键命令。基本上,任何元素,比如一个输入框或者文本框,都会有一款适用的快捷键命令。
133244_9HlL_865233

Keys.js

Keys.js 是个卓越的浏览器应用快捷键绑定工具,它可以使用 localStorage 来进行序列化持久性绑定,或者上传到服务器中,对用户的 web 应用进行个性化设置。使用相同的 API 就可以很方便的反序列化。
Key.js 拥有 CommonJS 和 AMD 模块的支持,可以跟 require.js 或者其他模块加载器一起使用,目前支持的浏览器有: IE7+, Firefox 21+, Safari 6+ and Chrome 27+。

133229_Jnmm_865233

 

发表在 技术 | 留下评论

高中生开发Chrome插件,帮助色盲患者更为清晰的看到网上图片

尽管有这样的插件,但我们还是希望、越来越多的网站能够遵循信息无障碍的技术规范。帮助更多人享受到互联网、移动互联网的福祉。

本文转自:36kr。原文链接:http://www.36kr.com/p/210170.html

据统计,世界上有 8% 的男性和 0.5% 的女性有红绿色盲。也就是说,全世界上上亿人眼中是没有红色和绿色的,并且目前没有任何操作系统内置帮助色盲患者分辨颜色的功能。因此,印度高中生Animesh Tripathi编写了 Chrome 插件ReColor,帮助色盲患者更好的辨识色彩。

Tripathi 之所以编写 ReColor 是因为他的一个高中同学一直梦想成为飞行员,然而却因为被诊断出红绿色盲而无法达成梦想。Tripathi 这才开始关注世界上大量的色盲患者。Tripathi 设计了一套算法,对网页和视频中出现的红色和绿色进行一些处理,从而使这两种颜色在他们眼中是不同的,避免了这两种颜色的混淆。

凭借 ReColor,Tripathi 获得了去年Google Science Fair的印度第一名,并将代表印度参加今年的英特尔国际科学与工程大奖赛(Intel ISEF)。Tripathi 今年秋天会进入大学学习计算机科学,他希望进入大学后继续这项研究,造福更多色盲患者。

上图中,1是普通人眼中的图片,可以分辨出五堆水果;2是红绿色盲患者眼中的图片,只能分辨出三堆水果;3是普通人眼中经过ReColor处理的图片;4是红绿色盲患者眼中经过ReColor处理的图片,可以分辨出五堆水果。

[本文参考以下来源:mashable.comvischeck.com]

发表在 技术 | 留下评论

使用CSS实现装饰性图片

基于Techniques for WCAG 2.0 C9: Using CSS to include decorative images

这点其实本来没什么可说的,学过CSS的人都应该知道这个,所以就介绍几个常见的用img替代装饰图片的错误做法。

首先,实现装饰性的图片有几下几个方法:

  • background
  • background-image
  • content配合:before和:after
  • list-style-image

下面说说可能会出现问题的地方

为低级浏览器做边框或者圆角的时候,很多人喜欢以“九宫格”的形成,然后在相应的边和角插入图片。这种情况不应该使用img。

导航设计的字体和背景还有鼠标划过以及当前状态,必须使用图片,否则单纯css达不到效果的时候,很多人直接上图。这种情况不应该使用img

某些页面的头图,这些页面多为事件,当然也有单纯的公司名字或者口号,很多人用背景来做。这种情况不应该使用CSS来把头图作为单纯的装饰,在代码层面,必须要有替代文字。使用img的时候,也必须书写完整的alt,或者根据实际情况切分成几个“小图”,每个“小图”赋予正确的alt。以下面的头图为例,采用CSS把头图作为装饰性的方案的话,在代码层面,推荐图片下面的代码内容。

春运专题的头图

推荐HTML:

<div class="undis" itemscope itemtype="http://data-vocabulary.org/Event">
<a itemprop="url" href="http://news.qq.com/zt2014/2014chunyun/index.htm"><h1 itemprop="summary">2014春运-让爱回家</h1></a>
<img itemprop="photo" src="http://mat1.gtimg.com/news/2014/chunyun/page-bg2.jpg" />
<span itemprop="description">腾讯网2014年春运特别报道-让爱回家</span>
时间:
<time itemprop="startDate" datetime="2014-1-16T00:00-24:00"></time>
<time itemprop="endDate" datetime="2014-2-24T00:00-24:00"></time>
地点:
<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization/">
<span itemprop="name">春运</span>
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="region">中国</span>
</span>
</span>
</div>
发表在 技术 | 留下评论

使用CSS的letter-spacing属性来控制文字间距

以前我们说这个问题的时候,都是从代码是否干净的层面来切入。今天我们从网站无障碍的角度来阐述这个问题。

基于Techniques for WCAG 2.0 C8: Using CSS letter-spacing to control spacing within a word

我们最常见到的例子就是中国人的名字,当你把一些两个字和三个字的人名排列在一起的时候,一般都会有这样一个潜在的需求,就是要求两个字名字的中间需要一个空白,从而保证两个字和三个字的名字看起来一样宽。不讨论这样一个要求是否合理,但从实现的角度来看有以下集中方法。

第一,两个字中间输入全角的空格(汉字)

第二,给其中一个字添加一个dom,然后利用样式修改这个DOM的盒模型或者添加text-indent

第三,为两个字的名字增加一个class, 定义letter-spacing,以及较为精准的测试width与文字实际宽度。如果你定义width:4em,letter-spacing:1em,这就意味着只能显示两个文字,因为空白还占据了一个em。另外,每一个文字的实际宽度是文字本身与它右边空白的宽度的总和,也就是说,当文字是12px,空白是1em,如果你的容器小于48px,那么你无法把两个字显示在同一行里面。

第一种方法,在辅助技术解释的时候,很大程度上中间的空格会导致停顿和真正的空白,从而破坏一个词语;而第二种,几乎可以完全肯定,辅助技术会将其处理为两个对象。所以从这点来看,第三种的可访问性是最强的,然后是第一种,最后是第二种。

CSS:


h2
{
	letter-spacing: 1em;
}

HTML:


<h2>Museum</h2>

当你发现页面中文字的间距是不正常的话,你可以检查一下是否是使用letter-spacing来控制的空白,并且可以将结果记录为:#1 是

发表在 技术 | 留下评论

利用脚本构建是否显示“非必要alert”的选项

基于Techniques for WCAG 2.0 SCR14: Using scripts to make nonessential alerts optional

这个技术方案主要针对显示给用户的对话框信息(alert)。当alert显示的时候,它强行的接收焦点(浏览器特性),用户必须点击“确定”按钮才能关闭这个对话框。当这些alert显示的时候可能会分散用户的注意力,打断用户的操作,甚至造成焦点的迷失,特别是那些非紧急(重要)的信息(无需用户必须点击“确定”确认的),比如单纯的显示某个信息。那么在网页中提供一个可以控制是否显示这些非紧急(重要)的信息(alert)的机制,就是这个技术方案的目的。

可以提供一个全局的javascript变量用来存放用户配置是否显示这些alert的信息。默认的值是false。在alert显示之前,包裹它的函数判断这个变量的值。使用这个包裹他的函数来调用原生的alert()函数。在页面中提供一个按钮,让用户选择是否在页面中显示alert。每次页面载入的时候,除非用户手动的选择开启,否则alert都是默认不显示的。网站作者可以利用cookie来存储用户与网站回话中的所选择的设置。

其实上面所说的这个机制与在chrome中多次弹出alert之后就会弹出是否禁止alert的机制一样。在代码之后,我会谈谈对这个技术方案的看法。

javascript:

<script type="text/javascript">
var bDoAlerts = false;

function modifyAlerts(isEnabled) {
bDoAlerts = isEnabled;
}

function doAlert(aMessage) {
if (bDoAlerts) {
alert(aMessage);
}
}

var gCounter = -1;

var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
if (++gCounter >= quotes.length) {
gCounter = 0;
}
doAlert(quotes[gCounter]);
setTimeout("showQuotes();", 1000);
}
showQuotes();
</script>

HTML:

<p>Press the button below to enable the display of famous quotes
using an alert box<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
开启Alerts</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
关闭Alerts</button></p>

分三个步骤来检验该技术方案是否完备:

  1. 载入页面,检查没有非紧急的alert显示。
  2. 检查是否有一个机制可以开启非紧急的alert。
  3. 通过这个机制激活非晋级的alert并且检查他们是否显示。

测试结果可记录为:该页面支持javascript控制是否开启alert显示,#1 #2 #3 是(true)

对于这个技术方案,我们要确定:“什么样的alert是非紧急的?”,也就是说,我们的页面中是否滥用alert。如今的web技术多种多样,传统的alert大多数利用DOM模拟和ajax的体验所代替,所以单纯检查alert并不足以满足这个的目标。这就要求我们要扩大检测的范围,那么什么样的alert(包括不限于DOM模拟的)应该被“禁止显示”(不争夺焦点)。单纯显示状态的,没有提供“确认”按钮的,或者“确认“按钮就是用来关闭当前alert功能的alert。如果是这样的alert,就没有必要接收焦点。当然这不是绝对的。大家还需要根据自己的产品流程特点来具体实施。

如果alert一定要接收焦点,那么当这个alert消失的时候,一定要将焦点移动回到原来激活alert时的位置,这样才能保证用户继续完成之前的流程。

最后要说的是,这个机制针对的不是所有的alert,而是那些非紧急的alert,切记。

另外这只是一个技术方案,理解它所阐述的本质的问题才是关键。

发表在 技术 | 留下评论

使用CSS隐藏链接文本的一部分

基于Techniques for WCAG 2.0 C7: Using CSS to hide a portion of the link text

这个技术的目标是为了在那些支持CSS的用户代理中,利用样式不显示为描述链接特征而增加的文本。这么做的主要目的是,一方面屏幕需要显示较少的链接文本,另一方面辅助技术(比如屏幕阅读软件或者点字显示器)或者某些情况需要阅读或显示更详细的链接文本。

在C7的代码实例是想描述一种可以被屏幕阅读软件阅读隐藏本文的方法,所以它推荐利用一个一像素宽高、溢出隐藏并结合定位在显示区域以外的方式,并且明文阐述不要使用visibility:hidden或display:none这样的属性。这是因为几乎所有的屏幕阅读软件遇到这两个属性都不会阅读应用了这个属性的容器中的内容。实现对辅助技术可见,对屏幕不可见的样式方法另外还有以下两种:text-indent;clip。大家可以自己尝试,切记,一定程度取决于辅助技术的实现机制,所以无论什么时候,请在目标辅助技术中进行测试。

由于上面描述的情景并不一定是每个网页都需要的,所以这一条并不是一个通用技术,切记。下面的例子隐藏了一部分文字,但它对辅助技术仍然有效,可以使辅助技术用户更加确定链接的目的。

CSS:

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

HTML Exa1:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body> 
<p>Washington has announced plans to stimulate economic growth.
  <a href="#"> <span>Washington stimulates economic growth </span>
  Full Story</a></p>
</body>
</html>

HTML Exa2:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span>Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span>War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>

可以采用三个步骤测试这个技术方案的实现:

  1. 检查所有应用了对屏幕隐藏,对辅助技术“可见”的元素。
  2. 检查这些应用了该样式的元素在锚点(anchor,就是常说的a链接)内容中。
  3. 检查合并(视觉隐藏和显示)后的内容,描述的是链接的目的。

测试结果可记录为:上述测试点 是(true)

发表在 技术 | 留下评论

基于结构化标记定位内容

基于Techniques for WCAG 2.0 C6: Positioning content based on structural markup

这个技术是为了验证如何通过样式表增强视觉外观,当没有应用样式表的时候仍然可以保证有意义的展示。使用CSS中的定位属性,内容可以显示在用户视图中的任何位置。使用结构化元素,当样式无效的时候确保仍然可以确定内容的含义。

下面的例子利用结构化元素<dl>(自定义列表)来标记内容。利用样式让内容转化为两列的形式。每一个class都采用绝对定位并且设置外边距来覆盖默认的HTML样式,比如<dd>的缩进。

HTML:


 <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

CSS:


 .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

当样式表可用的时候,数据分别显示在“Products”和“Locations”列中。当样式表不可用的时候,自定义列表中的文字依然可以保持结构化和阅读顺序。

采用两个步骤来测试这个技术方案:

  1. 从文档中移除样式信息或者在用户代理中禁用样式。
  2. 检查内容的结构化关系和含义是否仍被保留。

测试结果可记录为:#2 是(true)

发表在 技术 | 留下评论

如何提高代码的价值

本文意在从价值的角度让开发者重视自身代码的质量从而推动网站的可访问性,当然不单单是可访问性。以下都是个人观点,不代表所在的公司和组织。

我们的价值是什么?写代码是我们在职业生涯中的一个最重要的价值体现。那什么是好的代码?凭什么说他的代码就比我的代码好呢?

比较两个事物同样看他的价值。

效率是一个纬度,蒸汽机的出现之后大大的提高了世界进步的脚步,互联网的出现也大大的提高了沟通的效率。那么如果以一个功能为目标,代码产出效率和执行效率可以作为衡量的标准。所以在web前端领域,无论技术怎么更替,在工具化(框架、库)和算法(性能、工作流程)上一直保持着高度的关注。

本身的质量也是一个纬度,质量如何衡量?你的书写赋予了代码多少功能。就像筷子,一次性的筷子也就只能满足一顿饭或者刚刚掰开就坏了;竹筷子可能一年换一次;钢筷子可能是一个更坚固的开瓶工具;银筷子可能用上一生并且可以检验是否有毒(小说桥段,理解意思即可)、可以作为礼品送人;金筷子可以行贿、保值、传代。这些筷子除了拥有他本身的吃饭的功能,还拥有其他的功能。这就是价值。

鉴于专业受限,我就说说html和css。很多人觉得很简单的 东西。很多人把这两样作为还原设计图的东西,如果你这样想那你的代码也仅仅局限于还原的设计图。换句话说,你没有理解html和css的本质,html用来组织网页内容,他是标记化语言,用来标记内容的,这是根本,css是用来装饰html的,本身无语义,说道底这些人只理解了css并没有理解html。所以你的代码没有语义,这时有些人会说,老大看语义么?用户看语义么?浏览器正常显示不就完了么?差别就在这里了,这就是对代码价值的认识问题,不了解代码面向的对象都有哪些,认为代码只是面向浏览器和老大还有用户。说白了就是给自己代码价值的定位太低,跟就想做一个一次性的筷子是一样的。下面说说可以面向的对象有哪几个。

面向浏览器:这个是最多人了解的了,兼容各种浏览器,包括不限于PC、mobile、TV。

面向搜索引擎:包括不限于百度、谷歌。

面向辅助技术:包括不限于屏幕阅读器、屏幕放大器、盲文显示器。

面向团队:包括不限于易读、易维护、易移植、易使用。

面向用户:包括不限于快速、节省代码。

面向业界:包括不限于优雅的代码、无错的使用、取巧的使用。

面向教学:包括不限于标准以及规范。

面向人群:包括不限于小孩、老人、男人、女人、残障人士、本国人、外国人、文盲、高学历、2G用户、4G用户。

由于自身认识有限,定有未列举之价值,如有不对之处,万望指出。代码所面向的任何一个对象都是一门不是短时间内可以较为精通的学问,需要不断的学习才能产出高质量的代码。如果你希望对辅助技术方面进行突破的话,请关注本网站。欢迎加入中国信息无障碍产品联盟。

希望可以帮助你通过信息无障碍的研究在辅助技术的角度提代码的价值。

发表在 观点 | 留下评论

2013年PC屏幕阅读器用户浏览资讯数据报告

本文由 rockywen撰写、中国信息无障碍产品联盟发布,转载请注明出处。

明天就是蛇年的腊月三十,给大家拜个早年,祝大家马年万事顺利。

在过去的365天中(2013年1月27日 至 2014年1月28日),我们利用百度统计进行统计和分析这一年当中的屏幕阅读器用户浏览资讯的一些基本数据。

共统计49万9406人次。最受屏幕阅读器用户喜爱的内容前三类分别为:时政新闻,占34.23%;娱乐新闻,占31.67%;新闻评论,占27.23。这三大部分共占整个内容的93.13%。

用户分布在中国34个省,直辖市,自治区和特别行政区。用户地域分布前十名:广东、江苏、上海、四川、北京、湖北、云南、河北、山西、山西。后五名(由后至前)分别为:澳门、西藏、香港、青海、台湾。

浏览器终端方面,桌面浏览器占97.953%,移动浏览器占比2.047%。桌面浏览器中,前五名分别为:IE8,占69.30%;IE6,占25.10%;chrome,占1.60%;IE9,占0.83%;QQ浏览器,占0.54%;IE系列在屏幕阅读器用户中依然是不可撼动的地位,这取决于它继承在OS中的先天优势以及屏幕阅读软件支持完整的外围环境。移动浏览器本身占比不大,其中前五名分别是:其他、Android Webkit Browser、UC浏览器(其他)、Opera移动版、Safari移动版。由于统计的是PC屏幕阅读器用户的数据,所以这里就不计算移动端的各个浏览器占比了。感兴趣的可以留言。

最近三月访客属性,男性占比54.56%、女性占45.44%;10到19岁用户占比3.09%、20到29岁用户占比:37.67%,30到39岁用户占比40.46%、40到49岁用户占比16.43%,50到59岁用户占比近乎0%;学历方面,本科及以上占比55.2%、大专占比20.8、高中占比19.6%、初中占比4.4%、小学近乎0%。对于如何统计的学历,本人没有猜到百度统计是依赖何种信息进行的统计,只能本着相信百度强大的份额和云的态度来看待这些数据。

整个数据采集过程、方法以及采集范围仍有很大的提升的空间。有对寻找无限接近真实数据感兴趣的朋友请联系我,我们大家共同寻找一些列的统计方法,使数据更加客观,为中国的信息无障碍事业贡献一份力量。

发表在 活动 | 留下评论

详解腾讯正文中视频区域的无障碍方案

在腾讯视频组件升级以前(你可以理解为中国互联网现在大部分的播放器还是在升级之前的状态),很少有人会去实现键盘对它的操作问题。作为第三方的页面(腾讯新闻页面),在正文中潜入相关的腾讯视频。其实这里想说的重点不是关于播发器的可访问性问题,而是说如何“无缝”的让视频称为周围上下文的一部分。

当屏幕阅读器用户听完摘要之后,在按光标键很可能就到到视频播放器的位置,当焦点到达这个区域的时候,我要说的重点就来了——“操作提示”,我们要告诉用户现在在视频区域了,你可以按空格键播放和暂停视频,按Esc键退出视频,按左右键调整播放进度,按上下键调节音量。这些操作上的提示要如数的告知给用户。

然后你就要看播放器的接口了,是否有相应的方法可供调用,然后实现。

当按Esc的时候,退出(停止)视频,这里有一个注意事项,焦点应该去哪里?按理说,应该是到视频的后面,是的。同样我也给用户一个提示,告诉用户,现在已经退出视频区域,你可以按下键阅读下面的正文,你还可以按上键重新回到视频区域。核心就是告知用户当前的位置和后续的操作提示。让用户可理解,可操作。

这篇和上一篇《详解腾讯网文章页无障碍方案》较为详细的阐述了腾讯网新闻页面的无障碍方案,没有什么特殊的代码,因为这些功能实现起来并不复杂,是不过要搞好tab order和焦点管理。

随着对知识的理解,整个新闻页的技术方案,现在看来并不太好,如果要我级打分的话,以现在的认知我会打60分。在我脑中现在有了一个更好的方案,待到实践检验之后,再和大家分享。

发表在 技术 | 留下评论