web标准的可用性和可访问性

Posted xixi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web标准的可用性和可访问性相关的知识,希望对你有一定的参考价值。

在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。

可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。可用性好意味着产品质量高,是企业的核心竞争力。

可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好。二是代码是否容易被人理解,是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码,对企业的长期发展非常重要。

可用性和可维护性定义比较清晰,在软件界研究也非常多,在此不展开讨论。我们来看看可访问性。

什么是可访问性?很难给出严格的定义。在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。具体而言,要考虑以下两方面:

  1. 无论用户是否残障,都得通过用户代理(User Agent)来访问Web内容。因此要提高可访问性,首先得考虑各种用户代理 :桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。在Google, 专门聘请了一些残障雇员,来帮助提高产品的可访问性。
  2. 还得考虑用户访问Web内容时的环境限制 。比如:嘈杂的环境、过暗或过亮的房间、或者是免提等各种情况。这是更高一层次的可访问性要求,做到了,能造就产品在特定领域的核心竞争力。

理解以上两点,能解答不少疑惑。比如Web开发社区经常讨论的话题:我们真的要考虑浏览器禁用JavaScript/CSS的情形吗?我的理解是,要考虑的其实不是禁用了javascript/CSS的浏览器,而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器,手机浏览器等,JavaScript提供的是一层可访问性,不能代替内容本身。当然,从渐进增强的角度讲,鼓励使用高级特性,只是同时要做到优雅降级,让低端用户代理上,也能保留低保真的体验。

理解可访问性,同时能有助于更好地理解语义的重要性。为何要看重em和strong的区别?因为在语音阅读器上,对这两个标签的理解是不一样的,错误使用会导致语调的错误变化和重音的位置不对。这对盲人用户来说,是极大的不尊重。
关注可访问性,是网络上的尊老爱幼,体现的是前端开发工程师对社会的道义感和关爱度。
 
 

实现可用性、可访问性的方法

  • 逐步强化你的网站功能,同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。
  • 允许用户关闭有问题的增强功能。
  • 提供相同内容或功能的替代版本。
  • 就客户端需要支持的技术向你的客户提出建议,并举例说明哪些公司的产品支持这些技术。

可访问性良好网页的特征:

  • (1)HTML语义化、结构化:html语义结构提供了网页的整体框架,提示他们在文件层级中所处的位置,还有他们可以如何与各种页面元素进行交互,以及在适当的地方对文本内容进行强调,帮助用户获得大量重要信息。如导航菜单例子:
    <ul>
    	<li>Menu Item 1</li>
    	<li>Menu Item 2</li>
    	<li>Menu Item 3</li>
    </ul>
    

    说明:通过将导航菜单构造为列表,就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记,屏幕阅读器就没办法知道这是列表,因此也就不能告诉使用者了。

  • 替代内容:文本可以作为页面内容的通用替代内容,如img标签的alt属性值、a标签的title属性值。
    <a href="http://www.alimama.com" title="淘宝联盟大促销">
    	<img alt="淘宝联盟大促销" src=http://www.webjx.com/web/"images/app/sale.jpg"/>
    </a>
    

    说明:文本内容可以很方便地由屏幕阅读器朗读出来,也可以放大或缩小,还可以方便地改变其对比度,或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述,以便无法准确看到该图片的用户(或搜索引擎)使用,title属性负责对链接地址的详细文本描述。

  • (2)HTML定义基本交互:实现tab选项卡搜索功能
    <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的用户将无法使用。

 
四个可访问性标准(WCAG 2.0):
  • 可感知:人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如,图像应该有文本对应体。
  • 可操作:人们可以与 web 应用程序或内容进行交互。例如,用户应该可以不用鼠标也能与某个网站进行交互,并且可以通过屏幕阅读器来进行导航。
  • 可理解:使用者可以弄懂页面内容和用户界面。例如,正文不应该比它需要的更加复杂,且网站应以可预测的方式来运行。
  • 健壮性:所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务,这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如,不同设备上的浏览器能够一起使用网站,且导航应该是一致的。

说明:网站并不是必须满足全部这些要求,要视网站用户类型而定,但为了实现可访问性,网站应当确保其页面可以用一般的屏幕阅读技术读取。

总结:

可访问性是网站开发质量的一个衡量标准。如果你在开发网站的时候(以及开始开发前)顾及你的使用用户的话,你就能创建可用性、可访问性更好、更符合web标准的网页,并且享受它所带来的一切好处。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于web标准的可用性和可访问性的主要内容,如果未能解决你的问题,请参考以下文章

web标准-可用性可维护性可访问性

可用性和可修改性战术分析

简要分析《XXX需求征集系统》采用的可用性和可修改性战术

阅读《大型网站技术架构:核心原理与案例分析》第七章,结合《河北省重大技术需求征集系统》,列举实例分析采用的可用性和可修改性战术

web标准

基于《河北省重大技术需求征集系统》的可用性和可修改性战术分析