web标准、可用性、可访问性

 

 

前言:大家一拍即合窥见,只要是招聘UED相关的岗位,如前端开发工程师、交互设计师、用户研究员甚至视觉设计师,一般还针对web标准、可用性和而访问性的敞亮有求。那么究竟什么是web标准、可用性、可访问性呢?

 

一、web标准

简单的说,就是HTML、CSS、JavaScript这三者分离。WEB标准未是某一个正规,而是同样密密麻麻正式的成团。网页根本是因为三组成部分组成:结构(Structure)、表现(Presentation)和行事(Behavior)。对应之专业为瓜分三上面:结构化标准语言主要概括XHTML和XML,表现专业语言主要不外乎CSS,行为规范要包括对象模型(如
W3C DOM)、ECMAScript等。
web标准的长处:

   
代码的频率:在HTML文件中应用最精简的代码,而把体制和页面布局信息包含进CSS文件中。则位于服务器上的文件越来越聊,下载文件要之时间便越发亏。
   
易于维护:页面的样式与布局信息保存在独的CSS文件被,如果您想更改站点的外观时,仅需要在单独的CSS文件中做出改变即可。整站统一css则只是带动巨大的方便。
   
可访问性:上网用户被那些视力受损的人,通过屏幕阅读器使用键盘命令将网页的内容念给她们放。以语义化的HTML(结构及表现相互分离的HTML)编写的网页文件,就好给此类用户更易于导航,且网页文件中之机要信息呢再度发生或为这些用户找到。
   
设备兼容性:纯HTML,无附加样式信息,可以本着富有不同风味(如屏幕尺寸等)的配备而让再度格式化,只待引用一仿另外的样式表即可。同时,CSS本身吗得吃您啊歧的见方式及媒体类型(如以屏幕及读网页,打印网页,在移动设备上读书网页等)规定不同之样式表。
   
网络爬虫/搜索引擎:搜索引擎使用“爬虫”,解析你的网页。语义化的HTML能再规范更高效的于分析,从而了解哪些才是关键之始末,那么您的网页在搜寻结果遭遇的行就会生受影响。

第二、可用性、可访问性

    可访问性就是对富有人数一视同仁,无论他们是否来残障。

网站的用户类型:

    身体健康的用户;
   
盲人或重视觉障碍者,他们利用屏幕看器来听取网站,或者经点字显示器来感知网页;
    近视者,需要以字体大小放大到200%;
   
患有运动性残疾,因此无法用手操作鼠标,而之所以点击棒来操作键盘,或透过视线点击器来操作网站的用户;
   
使用移动装备如常用之无绳电话机,或行使跟踪球等不广泛的处理器控制设施的用户。

实现可用性、可访问性的章程

   
逐步加剧你的网站功能,同时针对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。
    允许用户关闭有问题之增进效能。
    提供平等内容要效益的代版本。
   
就客户端需要支持的技巧于而的客户提出提议,并举例说明哪些企业之活支持这些技能。

而是访问性良好网页的表征

   
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"/&gt;
    </a>

   
说明:文本内容可以很有利地由屏幕看器朗读出来,也足以放开或缩小,还可以便宜地转移该针对性比度,或者进行其它过多变形操作。alt
属性包含了针对性拖欠图片的简单描述,以便无法精确看到该图形的用户(或找引擎)使用,title属性负责对链接地址的详细文本描述。
    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标准的网页,并且享受它所带动的全体好处。