1、Date => String 代碼 /** * 函數描述:時間格式化工具 * @param format {String} 格式(y-年,M-月,d-日,H-時[24],h-時[12],m-分,s-秒,S-毫秒(3位數),q-季度,ap,午前am/午後pm) * @returns {String ...
無障礙 WAI 的意思是所有人都應該能夠訪問互聯網的內容。
無障礙幫助:
-
視覺和聽覺有問題的人
-
認知和神經有問題的人
-
物理和講話有問題的人
W3C 提出了一系列支持 WAI (Web Accessibility)的資源,這後來成為了 Web 標準。
無障礙通常包含以下軟體:
-
屏幕閱讀器
-
語音識別設備
-
字幕和文本
WAI 的目標是建立 ARIA(Accessible Rich Internet Application)。
替代圖像的文本 Text Alternative
alt
屬性中的文本來描述圖片內容,作為備用文字。
alt
屬性可以幫助用戶在圖片載入失敗或者不可見的情況下理解圖片內容, 搜索引擎也通過它來理解圖片內容,並將其加入到搜索結果中。
語義化 Semantic
語義化 的意思是,標簽名能準確地表達它所含內容的信息類型。
在使用中,相同級別(或者更高級別)的標題標簽用於開啟新的章節,低一級別的標題標簽用於開啟上一級標題標簽的子小節。
使用 main 等結構元素
main
標簽用於呈現網頁的主體內容,且每個頁面應只有一個。 這是為了圍繞與頁面中心主題相關的信息, 而不應包含如導航連接、網頁橫幅等需要在多個頁面中重覆出現的內容。
article
是一個分段標簽,用於呈現獨立及完整的內容。 這個標簽適用於博客、論壇帖子或者新聞文章。
section
元素也是 HTML5 引入的新元素,其語義與 article
略有不同。 article
用於獨立且完整的內容,而 section
用於對與主題相關的內容進行分組。 它們可以根據需要來嵌套使用。 舉個例子:如果一本書是一個 article
的話,那麼每個章節就是 section
。 當內容組之間沒有聯繫時,可以使用 div
。
header
應當在 HTML 文檔的 body
標簽內使用。 它與包含頁面標題、元信息的 head
標簽不同。 它可以為父級標簽呈現簡介信息或者導航鏈接,適用於那些在多個頁面頂部重覆出現的內容。
nav
它可以使屏幕閱讀器快速識別出頁面中的導航信息。 它用於呈現頁面中的主導航鏈接。
footer
可以讓輔助工具快速定位到它。 它位於頁面底部,用於呈現版權信息或者相關文檔鏈接。
圖片音頻視頻
音頻 Audio
audio
標簽用於呈現音頻內容或音頻流,音頻內容也需要備用文本,供聾啞人或聽力困難的人使用。
audio
標簽支持 controls
屬性, 用於顯示瀏覽器預設播放、停止和其他控制,以及支持鍵盤功能。 這是一個布爾值屬性,意味著它不需要一個值,它在標簽上存在即開啟設置。
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg">
<source src="audio/meow.ogg" type="audio/ogg">
</audio>
圖片 Image
figure
標簽以及與之相關的 figcaption
標簽。 它們一起用於展示可視化信息(如:圖片、圖表)及其標題。 這樣通過語義化對內容進行分組並配以用於解釋 figure
的文字,可以極大地提升內容的可訪問性。
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
視頻 Video
video
標簽用於呈現視頻內容或視頻流,視頻內容也需要備用文本,供盲人或視力困難的人使用。
video
標簽支持 controls
屬性, 用於顯示瀏覽器預設播放、停止和其他控制,以及支持鍵盤功能。 這是一個布爾值屬性,意味著它不需要一個值,它在標簽上存在即開啟設置。
<video id="meowClip" controls>
<source src="video/meow.mp4" type="video/">
<source src="audio/meow.wbev" type="video/">
</video>
accesskey 屬性在鏈接之間快速導航
HTML 提供 accesskey
屬性,用於指定激活元素或者使元素獲得焦點的快捷鍵。 添加 accesskey
屬性可以讓使用鍵盤的用戶更高效率地導航。
<a href="" accesskey="g"></a>
tabindex 將鍵盤焦點添加到元素中
HTML 的 tabindex
屬性有三種與標簽焦點相關的功能。 當它在一個元素上時,表示該元素可以獲得焦點。 tabindex 的值(可以是零、負整數或正整數)定義了行為。當用戶使用鍵盤瀏覽頁面時,諸如鏈接、表單控制項等元素可以自動獲得焦點。 它們獲得焦點的順序與它們出現在 HTML 文檔流中的順序一致。 通過將其他標簽(如 div
、span
、p
等)的 tabindex
屬性值設為 0 來讓它們實現類似的效果。
tabindex
屬性值為負整數(通常為 -1)的標簽也是可以獲得焦點的,只是不可以通過鍵盤操作(如 tab 鍵)來獲得焦點。 這種方法通常用於以編程的方式使內容獲得焦點(如:將焦點設置到用 div
實現的彈出框上)的場景。
<p tabindex="0">
something
</p>
tabindex
屬性還可以指定元素的 tab 鍵焦點順序, 將它的值設置為大於等於 1 的整數,就可以實現這個功能。
給元素設置 tabindex="1"
,鍵盤將首先把焦點放在這個元素上。 然後它按照指定的 tabindex
需要註意的是,使用這種方式設置 tab 鍵焦點順序會覆蓋預設順序,其中預設順序為標簽在文檔流中出現的順序。 這可能會讓那些希望從頁面頂部開始導航的用戶感到困惑。 使用 tabindex 在某些情況下是必要的,但在使用時要充分考慮到頁面的可訪問性。