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

 

 

前言：你们不难发现，只要是招聘UED相关的岗位，如前端开发工程师、交互设计师、用户研究员甚至视觉设计师，通常都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢？

 

1、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能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响。

2、可用性、可访问性

    可访问性就是对全部人一视同仁，不管他们是否有残障。

网站的用户类型：

    身体健康的用户；
    盲人或严重视觉障碍者，他们使用屏幕阅读器来听取网站，或者经过点字显示器来感知网页；
    近视者，须要将字体大小放大到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"/>
    </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标准的网页，而且享受它所带来的一切好处。