HTML5_加強可訪問性和解決IE兼容性問題

時間 2019-11-11

原文原文鏈接

一、使用ARIA角色加強Web應用的可訪問性css

如今的Web項目不是單純的HTML文檔形式，而更可能是一些動態頁面（含有大量的JavaScript代碼），爲了確保全部的用戶都能正常訪問Web應用，包括輔助技術（如屏幕閱讀器），就制定了Web可訪問性倡議（WAI）和ARIA標準及規範。html

在構建Web應用時，經過對HTML文檔做者提供的可訪問性信息加以擴展來改善Web應用。html5

例如：構建一個用於文本輸入的下拉列表和一個無序列表，將ARIA角色combobox添加到<input>元素中，從而使其能夠正確的在用戶設備上顯示下拉列表框。git

<input type="text" aria-label="Tag" role="combobox" aria-autocomplete="list" aria-owns="owned_listbox">
<ul role="listbox" id="owned_listbox">
    <li role="option">Zebra</li>
    <li role="option">Zoom</li>
</ul>

role的屬性告訴輔助設備這個元素扮演的角色。如這裏input設置role="combobox"，輔助工具就能夠認出這是個combobox。角色能夠是button、checkbox、tab等等github

aria-label屬性用來給當前元素加上的標籤描述，接受字符串做爲參數。是用不可視的方式給元素加label（若是被描述元素存在真實的描述元素，可以使用 aria-labelledby 屬性做爲來綁定描述元素和被描述元素來代替，例如：瀏覽器

<div role="form" aria-labelledby="form-title">
    <span id="form-title">WAI-ARIA規範</span>
　　<form>……</form>
</div>

aria-label屬性能夠用在任何典型的HTML元素中，並不須要配合特定的ARIA role才能使用工具

二、解決IE（6-8）兼容性問題spa

多數瀏覽器在處理未能識別的元素時，通常會將其渲染成一般的內聯<span>元素，而後，只須要將其設置爲block with css便可正常呈現。code

可是IE9以前版本對於HTML5兼容而言，並不會那麼簡單的糊弄過去的，還必須作一些其餘的工做。orm

對於不支持的元素，如<header>元素。IE8自己不支持這個元素，咱們能夠手動在<head>中建立這個元素，強制IE在標籤中使用樣式，例如：

<!--[if lte IE 8]>
<script>document.createElement("header");</script>
<!--[endif]-->

有個流行的HTML5 shiv腳原本解決這個問題，實現原理和上述處理相似，能夠點擊 The HTML5 shiv 查看源碼及使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。