web標準,可用性和可訪問性

看風景就發表於2017-05-25
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/" title="前端技術分享平臺">
    <img alt="前端技術分享平臺" src="images/app/threetogo.jpg"/>
</a>

3.漸進增強和優雅降級

漸進增強

以低版本瀏覽器為基準設計功能，然後對於高版本的瀏覽器，
提供一些高階特性來增強使用者體驗，從少到多

優雅降級
以高版本的瀏覽器為基準設計功能，然後對於低版本的瀏覽器，
只保證其基本功能的可用，高階的體驗不予支援，從多到少

 

相關文章