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

web标准，简单的说，是指html，css，JavaScript三者的分离。

网页由三部分组成：结构，表现和行为。对应的标准分为三方面：

1.结构化标准语言XHTML和XML
2.表现标准语言主要包括css
3.行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

web标准的优点

1.代码效率 代码要精简，文件要分离
2.易于维护 代码可读性好，易于修改
3.可访问性 对于残障人士，例如视觉或运动障碍人士，要可访问
4.设备兼容性 兼容PC和移动设备
5.SEO 利于爬虫爬取页面

可用性和可访问性

网址不仅要兼容多种操作系统和平台，也要让多个用户群体可以访问。
例如，残障人士，可能使用屏幕阅读器来听取网站，可能使用点击棒访问网站，
可能需要将字体放大到2倍

具体做法：

1.标签语义化

例如一个导航菜单，用列表ul，li有更好的语义，利于残障人士使用屏幕阅读器读取。

<ul>
    <li>首页</li>
    <li>三人行</li>
    <li>技术走廊</li>
</ul>

再者，一个tab选项卡，应该使用列表ul，而不应该使用div或者span标签

<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>    

2.替代内容

a标签的title和img的alt属性，在内容不可见时，可以使用文字描述来代替，
利于屏幕阅读器等的读取

<a href="https://threetogo.cn/" rel="external nofollow"  title="前端技术分享平台">
    <img alt="前端技术分享平台" src="data:images/app/threetogo.jpg"/>
</a>

3.渐进增强和优雅降级

渐进增强

以低版本浏览器为基准设计功能，然后对于高版本的浏览器，
提供一些高级特性来增强用户体验，从少到多

优雅降级
以高版本的浏览器为基准设计功能，然后对于低版本的浏览器，
只保证其基本功能的可用，高级的体验不予支持，从多到少