标签:
在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。
可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。可用性好意味着产品质量高,是企业的核心竞争力。
可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好。二是代码是否容易被人理解,是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码,对企业的长期发展非常重要。
可用性和可维护性定义比较清晰,在软件界研究也非常多,在此不展开讨论。我们来看看可访问性。
什么是可访问性?很难给出严格的定义。在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。具体而言,要考虑以下两方面:
理解以上两点,能解答不少疑惑。比如Web开发社区经常讨论的话题:我们真的要考虑浏览器禁用JavaScript/CSS的情形吗?我的理解是,要考虑的其实不是禁用了JavaScript/CSS的浏览器,而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器,手机浏览器等,JavaScript提供的是一层可访问性,不能代替内容本身。当然,从渐进增强的角度讲,鼓励使用高级特性,只是同时要做到优雅降级,让低端用户代理上,也能保留低保真的体验。
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
说明:通过将导航菜单构造为列表,就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记,屏幕阅读器就没办法知道这是列表,因此也就不能告诉使用者了。
<a href="http://www.alimama.com" title="淘宝联盟大促销">
<img alt="淘宝联盟大促销" src=http://www.webjx.com/web/"images/app/sale.jpg"/>
</a>
说明:文本内容可以很方便地由屏幕阅读器朗读出来,也可以放大或缩小,还可以方便地改变其对比度,或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述,以便无法准确看到该图片的用户(或搜索引擎)使用,title属性负责对链接地址的详细文本描述。
<form action="search.html" method="GET">
<fieldset>
<legend>Search within:</legend>
<ul>
<li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li>
<li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li>
<li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li>
</ul>
</fieldset>
<input type="text" id="searchfield" name="search"/>
<input type="submit" value="Search"/>
</form>
说明:先考虑基本交互(而不是仅仅只加载视觉效果的部分)的话,你就可以简化实现tab搜索效果。现在我们可以只用一个表单来进行所有的搜索,而同时仍然能实现tab选项卡效果(虽然这需要一点样式和脚本)。通过 AJAX 来插入页面内容,那禁用javascript的用户将无法使用。
说明:网站并不是必须满足全部这些要求,要视网站用户类型而定,但为了实现可访问性,网站应当确保其页面可以用一般的屏幕阅读技术读取。
标签:
原文地址:http://www.cnblogs.com/telnetzhang/p/5557865.html