HTML5無(wú)障礙測(cè)試，基于Chromium的Edge獲得滿分成績(jī)

于Chromium的Edge瀏覽器在HTML5無(wú)障礙測(cè)試中取得了100%的滿分成績(jī)，而作為對(duì)比Safari為98%，Chrome為92%，F(xiàn)irefox為89%，而經(jīng)典版Edge瀏覽器只有56%。

HTML5無(wú)障礙測(cè)試主要測(cè)試主流瀏覽器的新HTML5功能是否支持無(wú)障礙訪問(wèn)，包括是否可以通過(guò)鍵盤訪問(wèn)，是否可以映射到平臺(tái)無(wú)障礙API，以及是否支持任何與無(wú)障礙相關(guān)的功能。一個(gè)可訪問(wèn)性支持的功能意味著它可以被依賴輔助技術(shù)的人使用，而不需要開發(fā)人員用ARIA或其他額外的變通方法來(lái)補(bǔ)充。

在慶祝這個(gè)成績(jī)的時(shí)候，Edge官方的twitter賬號(hào)指出，Edge團(tuán)隊(duì)努力改進(jìn)無(wú)障礙支持功能，如UI自動(dòng)化和更多的無(wú)障礙控件等功能。

不過(guò)值得注意的是，在本輪測(cè)試中有個(gè)稍微不公平的地方，那就是測(cè)試使用的Edge瀏覽器是較新的Edge 80版本，而Chrome瀏覽器則是Chrome 62（發(fā)布時(shí)間是2017年10月18日），目前最新的Chrome穩(wěn)定版本兩天前發(fā)布的81.0。而Firefox也是采用的58.0b9版本（2018年1月發(fā)布），而最新的Beta版本是76.0b2。

TML5技術(shù)對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)真的很炫，很酷，對(duì)于編程者來(lái)說(shuō)，這都是心血設(shè)計(jì)啊。以下H5測(cè)驗(yàn)提供了與HTML5框架相關(guān)的多選題（MCQ）。如果自認(rèn)為自己學(xué)到了點(diǎn)東西，那么自己測(cè)試一下吧。

Q1- 以下哪個(gè)瀏覽器在最新版本中支持HTML5？

A- 蘋果野生動(dòng)物園

B- Google Chrome

C- 以上兩種。

D- 以上都沒(méi)有。

Q 2- 以下哪個(gè)標(biāo)記代表用于在HTML5中導(dǎo)航的文檔的一部分？

A- 頁(yè)腳

B- 導(dǎo)航

C節(jié)

D- 對(duì)話框

Q 3- 以下哪個(gè)輸入控件僅接受Web Form 2.0中的數(shù)值？

A-周

B時(shí)間

C號(hào)

D-范圍

Q 4- 以下哪個(gè)標(biāo)記為用戶提供HTML5中可以輸入的內(nèi)容？

A- 輸出

B- 占位符

C- 自動(dòng)對(duì)焦

D- 必需

Q5- 會(huì)話存儲(chǔ)數(shù)據(jù)在HTML5中被刪除？

A- 在會(huì)話終止后，會(huì)話存儲(chǔ)數(shù)據(jù)將被瀏覽器刪除。

B- 如果要清除所有設(shè)置，您需要調(diào)用localStorage.clear（）方法。

C- 以上兩種。

D- 以上都沒(méi)有。

Q 6- HTML5中的“音頻”標(biāo)簽中有哪些是真實(shí)的？

A- 支持常用的音頻格式ogg，mp3和wav。

B- 您可以使用<source>標(biāo)簽來(lái)指定媒體以及媒體類型和許多其他屬性。

C- 音頻元素允許多個(gè)源元素和瀏覽器將使用第一個(gè)識(shí)別的格式。

D- 以上所有。

Q 7- 以下屬性用于分組項(xiàng)目？

A- 項(xiàng)目

B- itemprop

C- 項(xiàng)目檢查

D- 項(xiàng)目組

Q 8- 當(dāng)窗口失去焦點(diǎn)時(shí)，以下哪個(gè)屬性觸發(fā)事件？

A- onbeforeload

B- onblur

C- onlostfocus

D- 失物招領(lǐng)

Q 9- 當(dāng)元素被拖動(dòng)到有效的放置目標(biāo)上時(shí)，以下屬性中的哪一個(gè)觸發(fā)事件？

A- ondragleave

B- ondrag

C-ondragover

D- ondragstart

Q 10- 當(dāng)文檔脫機(jī)時(shí)，以下屬性中的哪一個(gè)觸發(fā)事件？

A-載入的元數(shù)據(jù)

B- onloadstart

C- 消息

D- onoffline

十道題的答案，建議大家先看題，最后在看答案：

答案：C 說(shuō)明：以上瀏覽器均支持HTML5。

答案：B 說(shuō)明：'nav'標(biāo)簽表示用于導(dǎo)航的文檔的一部分。

答案：C 說(shuō)明：'number'輸入控件只接受數(shù)值。step屬性指定精度，默認(rèn)為1。

答案：B 說(shuō)明：HTML5引入了一個(gè)名為placeholder的新屬性。<input>和<textarea>元素上的此屬性為用戶提供了可在字段中輸入的內(nèi)容。占位符文本不能包含回車符或換行符。

答案：A 說(shuō)明:在會(huì)話終止后，會(huì)話存儲(chǔ)數(shù)據(jù)將被瀏覽器刪除。

答案：D 說(shuō)明:所有上述選項(xiàng)都是正確的。

答案：B 說(shuō)明:itemprop - 用于分組項(xiàng)目。

答案：B 說(shuō)明:onblur - 當(dāng)窗口失去焦點(diǎn)時(shí)觸發(fā)事件。

答案：C 說(shuō)明:ondragover - 當(dāng)元素被拖動(dòng)到有效的放置目標(biāo)上時(shí)觸發(fā)事件。

答案：D說(shuō)明:onoffline - 當(dāng)文檔脫機(jī)時(shí)觸發(fā)事件。

最后想問(wèn)問(wèn)10道題都答對(duì)的有幾個(gè)呢？歡迎下方留言和學(xué)技巧一起探討學(xué)習(xí)H5技術(shù)。

機(jī)、平板燈手持設(shè)備的增多，網(wǎng)站要順應(yīng)變化，就必須要做響應(yīng)式開發(fā)，響應(yīng)式網(wǎng)站最大的特點(diǎn)在于可以在不同設(shè)備下呈現(xiàn)不同的布局，是基于html5+css3技術(shù)，目前越來(lái)越多的網(wǎng)站開始采用了響應(yīng)式設(shè)計(jì)，而下面15款工具可以方便測(cè)試你的html5響應(yīng)式效果。

Responsinator

http://www.responsinator.com/

Responsinator提供了大家在不同設(shè)備viewport下查看網(wǎng)站效果的特性，提供了iphone，android，ipad，kindle及其多種設(shè)備上的預(yù)覽效果，你可以方便的看到需要支持的設(shè)備的響應(yīng)式設(shè)計(jì)效果圖。

Responsive.is

http://responsive.is/

responsive提供了5種設(shè)備下的預(yù)覽效果展示

Kuapingce

http://www.kuapingce.com/

跨屏測(cè) 取自“跨屏”+“評(píng)測(cè)”，結(jié)合在一起取名跨屏測(cè)，網(wǎng)址是跨屏測(cè)的拼音，創(chuàng)建于2015年12月。它是國(guó)內(nèi)首個(gè)致力于跨屏幕響應(yīng)式測(cè)試的工具類的產(chǎn)品，目的是為了幫助你查看你的網(wǎng)站的跨屏幕（響應(yīng)式）效果，跨屏測(cè)收集了主流屏幕的尺寸大小，方便你快速了解網(wǎng)站在不同設(shè)備下的樣子。

Responsive Web Design Testing Tool

http://mattkersley.com/responsive/

類似responsivator，但是界面更簡(jiǎn)單

Responsivepx

http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars

允許你用拖動(dòng)的方式來(lái)修改窗口大小，模擬不同的設(shè)備屏幕

screenqueri.es

http://screenqueri.es/

它支持localhost本地方式測(cè)試你的應(yīng)用或者網(wǎng)站。

Aptus

https://itunes.apple.com/gb/app/aptus/id510487565?mt=12

一個(gè)工具類的瀏覽器，可以幫助你測(cè)試響應(yīng)式設(shè)計(jì)

Bricss

http://www.benjaminkeen.com/open ... design-bookmarklet/

一個(gè)幫助你測(cè)試響應(yīng)式的書簽，你可以方便的整合到你的瀏覽器里

Izilla Media Query Debugger

http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

這個(gè)js可以幫助你添加偽元素到body元素上用來(lái)偵測(cè)寬高，當(dāng)然你也可以使用他們提供的bookmark：http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

Screenfly

http://quirktools.com/screenfly/

支持4種設(shè)備的在線響應(yīng)式設(shè)計(jì)測(cè)試工具，并且還提供相關(guān)開發(fā)的設(shè)計(jì)圖和文檔。

ViewPort Resizer

http://lab.maltewassermann.com/viewport-resizer/

另外一個(gè)書簽式的工具

Jresizer

http://www.toddmotto.com/jresize ... ponsive-development

一個(gè)jQuery的響應(yīng)式開發(fā)工具插件，幫助你創(chuàng)建響應(yīng)式的窗口，方便你的開發(fā)和設(shè)計(jì)流程

Resize My Browser

http://resizemybrowser.com/

一個(gè)簡(jiǎn)單的幫助你創(chuàng)建指定寬高新開窗口的web工具

juicer

http://juicecreative.co.uk/juicer/website/index.php

一個(gè)在線的展示響應(yīng)式的工具，支持iphone，android等設(shè)備的顯示，帶有實(shí)物圖。

ish

http://bradfrostweb.com/demo/ish/

一個(gè)比較新的在線查看響應(yīng)式效果的web工具，支持不同尺寸的展示。

原文地址：http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059

在線咨詢

上一篇：HTML基礎(chǔ)的 <font> 標(biāo)簽
下一篇：一個(gè)wordpress下轉(zhuǎn)義符的怪事及解決方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商