《PPK谈JavaScript》读书笔记 －－可用性
作者：kun10 发布时间：February 3, 2010 分类：JavaScript
很早就买了ppk的这本书，在还不知道taobaoUED的时候就买了，当时也没有看得很明白，只是看到一些关于用户可用性的东西，觉得很不错，很快就用上了。下面就总结一下用户可访问性的规则：
1、条理分明的HTML
在脚本环境下面要保证可访问性的最显而易见的方法就是确保纯HTML页面包含了成功浏览所需要的“筋骨”，内容、导航和重要的内容的表单都应该被硬编码（hard－code）到HTML中，这样，无论发生了什么，任何的用户都可以访问并使用它们。
这样，当浏览器不支持JavaScript的时候，会降低一些页面的易用性，但是其基本的功能不会被破坏。
1.1、硬编码的连接必须有href
你的html中任何的一个硬编码的连接都应该拥有一个href属性，他指向一个有用的页面或是其他的文件，因此这样是错误的<a href="#" onclick="showPopUp('niceimage.png')">Nice Image</a>
当一个无脚本的用户点击了这个连接，什么也不会发生，
坏例子
对此，我还要严重的批评一下山东毕业生就业信息网，它对于学生给出的就业意向，信息网给出了一些相关的推荐的岗位，但是居然利用了弹出窗口的方式，并且居然没有html硬编码，最可恨的就是他的javacript出错了，导致的问题就是这些学生非常需要的信息学生根本就不能访问，点击后只是提示javascript错误，也没有弹出窗口，也没有打开连接（所以说，真不知道是哪个没头没脑的家伙做的。如果是硬编码的话，至少有点技术的用户还可以分离出里面的html连接来访问这些信息）
相反，一个清醒的javascript的开发者会这么做
<a href="niceimage.png" id="nice">Nice Image<a/>
document.getElementById('nice').onclick = function(){
showPopup(thie.href);
}
现在，无脚本用户沿用被硬编码的href属性，而脚步用户会打开一个弹出窗口（popup），网站保持了可访问性，而且把行为从结构里面分离了出来。
2、产生对脚本用户有意义的内容
在某些情况下，javaScript中产生的内容使网页更具有可访问性，2.1、触发高级脚本的链接
假设你有一个链接，点击它将启动一段漂亮的Ajax脚本。这段脚本会获得内容并执行其他有用的任务。但是你没有一个合适的HTML页面可以让这个链接指向它。我们刚才已经看到了，这样是不对的
我们不能仅仅应用上一条规则（1.1），如果没有明显的于Ajax脚本等效的无脚本替代品，我们改把href指向哪里呢？
如果给链接加上一条href不可行，那么就用JavaScript来生成连接
var link = document.createElement('a');
link.href = "#";
link.onclick = startUpAjaxStuff();
var linkText = document.createTextNode('这回可以耍酷了');
link.appendChild(lintText);
document.body.appendChild(link);
如此一来，无脚本的用户就完全看不到这条连接了，这样很好，因为否则他点了这个连接却发现什么反应也没有，他会很困惑的。
注意，上面的例子把链接的href的属性设置成了'＃'，虽然我们知道使用＃作为href通常不是一个好主意，但是我们需要它，因为绝大多数的浏览器定义一个超连接即使一个拥有href的a元素
幸运的是，在这种情况下，上一条规则并不适用，因为我们只是让支持JavaScript的用户看到了这个链接。能看到这条连接的用户，其浏览器一定支持onclick事件，所以href为＃并无大碍。
2.2、用Javscript隐藏内容
隐藏内容是危险的。一般来说，隐藏的内容是你认为如果不立即显示可以提高页面可用性的内容。直到用户点击了页面里面的什么的时候，内容才显示出来。如果没有JavaScript,内容就永远不会显示，而且这个页面就不具备可访问性，如果你创建了一个隐藏内容直到用户激活一段脚本的时候才显示，那么你应该始终用JavaScript来作这件事情，而不是在CSS中
有时候直接定义这样的css是不好的：
如果一个无脚本的用户访问你的页面，他将不会看到这些所谓的重要的信息，因此这个页面的可访问性就降低了，我想，一些页面所呈现的重要的信息，比如一些公告，应该设置css的时候就设定为display:block，然后用javascript去控制其隐藏和显示。,不过你在此处有什么反驳咱们可以探讨一下～～～
值得一想的例子
－－－－例子－－－－
Google的英文首页，在页面中定义了一个mousemove事件。这个事件只在用户的浏览器支持JavaScript的情况下面会工作（是上一个要点的范例），但我想说的不只是这个，这个鼠标移动事件会使得页面中除了主搜索框以外的一些部分显示出来，如果你不移动鼠标，而直接输入内容，使用的只是搜索框和搜索按钮，不过大多数的用户都是好动的，当他们移动了自己的鼠标的时候，页面上角如google邮箱，阅读器之类的服务连接都显示出来了，个人觉得这是很好的一种体验，不管怎么说至少晚一些运行了javascript。
－－－－例子结束－－－－
3、重定向用户
有时候，解决可访问性的问题就是为你的网站创建一个有脚本的版本和一个无脚本的版本。我不喜欢这个解决方案，显得很不帅。。。但是，就算不怎么帅，他还是很有实用价值的。如果你使用的是这种方法，就应该遵循两点:
首先，你网站的入口应该是一个无脚本的页面（ppk这么说，其实我觉得到不一定就要做到纯无脚本，而是说做到无脚本可访问就可以，硬编码的什么的必须做到，这样其实第二条我们都可以不管了，很多时候我们应该在一个无脚本可访问的页面的基础上面去创建更好的可用性），这样，所有的浏览器都可以正常的访问；
第二，当浏览器到达这个无脚本页面，启动一段脚本来使得页面跳转到有脚本页面。我们在这里用replace来进行跳转。
<head>
<title>NoScript Page</title>
<script type="text/javascript">
var isSupport = [检测是否支持javascript的代码];
if(isSupport){//如果支持
location.replace("scriptpage.html");//最好是不要用location.href来做，原因见下面
}
</script>
</head>
如果在这里，你用了location.href，那么，它会在浏览器的历史记录里面建立一条浏览记录，如果用户到达无脚本页面，他就被跳转到了有脚本的页面，然而，一旦他点击了浏览器的后退按钮，就会被送回到无脚本的页面，而上述的跳转代码又被启动，他又被送回有脚本页面（这不是折腾用户是什么？）
location.replace则会覆盖掉原来的页面，用户点击后退，会回到无脚本页面前面的那个页面，这也正好让后退按钮的功能给发挥出来了。所以，不管ppk说的这一部分靠不考谱（我是指把页面分为有脚本和无脚本两个版本的做法），我们都应该知道尽管有些功能效果很相近，但是，不乱用功能，是很重要的一件事，从选好replace和href方法做起。
4、键盘用户
我们已经看到了键盘用户不会发生鼠标事件（除非他们同时使用屏幕阅读器），因此，应该说你应该总是定义鼠标事件的替代方案。有时候这很简单，比如，把mouveover事件和focus事件配对。有时候则会困难些，比如一个托放事件，你就必须编写其他的函数来迎合键盘用户。4.1、可点击元素
即使你创建了完美的键盘解决方案，如果用户不能把焦点移动到那些元素上面，那也是没有用的，（貌似有点废话阿，咱创建键盘事件不就是等待用户焦点移动来触发的么？但是我们要想的一个问题是用户是否能够将焦点移到元素上。）我们设想一个下拉菜单，他使用mouseover事件来触发显示下一级的菜单，根据上面的原则，我们添加了focus事件，然后，为了触发focus事件，键盘用户必须把焦点落到下拉菜单上面，如果这一点做不到，那么脚本很明显是不可访问的。
在所有的浏览器中，可以可靠的获得焦点的元素只有链接（带有href的a）、表单域以及按钮（经过测试opera下面的表现很垃圾，都不想说啥，我的版本是9.64，居然不支持tab切换链接。。。）。因此，任何键盘友好事件都应该被设置在这几种元素上面。
5、<noscript>标签
浏览器厂商意识到开发者也许想提供特殊的内容给那些没有javascript解释程序的用户，他们发明了noscript标签。noscript标签的工作如下所述
1、不支持任何javascript的浏览器不能识别这个标签，因为未知的标签会被HTML解释器忽略。这些浏览器会显示这个标签的内容。或许这里这和浏览器的渲染模式还有一定的关系。
2、支持javascript的浏览器会检查javascript是否背启用了。如果是，他们就从视图中隐藏这个标签的内容，否则就显示标签中的内容
我觉得这样的工作没有什么太大的用处，我基本不用这个标签～～～
已有 2 条评论 »
哈哈，第一个访客吧~
呵呵，欢迎哈哈，你立大功了~~~我还在加工中呢