無障礙 Accessibility
無障礙 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=https://www.cnblogs.com/risejl/archive/2022/09/24/"audio/meow.mp3" type="audio/mpeg">
<source src=https://www.cnblogs.com/risejl/archive/2022/09/24/"audio/meow.ogg" type="audio/ogg">
</audio>
圖片 Image
figure 標簽以及與之相關的 figcaption 標簽， 它們一起用于展示可視化資訊（如：圖片、圖表）及其標題， 這樣通過語意化對內容進行分組并配以用于解釋 figure 的文字，可以極大地提升內容的可訪問性，
<figure>
<img src=https://www.cnblogs.com/risejl/archive/2022/09/24/"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=https://www.cnblogs.com/risejl/archive/2022/09/24/"video/meow.mp4" type="video/">
<source src=https://www.cnblogs.com/risejl/archive/2022/09/24/"audio/meow.wbev" type="video/">
</video>
accesskey 屬性在鏈接之間快速導航
HTML 提供 accesskey 屬性，用于指定激活元素或者使元素獲得焦點的快捷鍵， 添加 accesskey 屬性可以讓使用鍵盤的用戶更高效率地導航，
<a href=https://www.cnblogs.com/risejl/archive/2022/09/24/"" 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 值（2、3 等等）順序回圈，再移動到默認值和 tabindex="0" 專案，
需要注意的是，使用這種方式設定 tab 鍵焦點順序會覆寫默認順序，其中默認順序為標簽在檔案流中出現的順序， 這可能會讓那些希望從頁面頂部開始導航的用戶感到困惑， 使用 tabindex 在某些情況下是必要的，但在使用時要充分考慮到頁面的可訪問性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509394.html
標籤：其他
上一篇：HTML & CSS 設計原則