HTML 無障礙

来源:https://www.cnblogs.com/risejl/archive/2022/09/24/16724939.html
-Advertisement-
Play Games

1、Date => String 代碼 /** * 函數描述:時間格式化工具 * @param format {String} 格式(y-年,M-月,d-日,H-時[24],h-時[12],m-分,s-秒,S-毫秒(3位數),q-季度,ap,午前am/午後pm) * @returns {String ...


無障礙 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="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 文檔流中的順序一致。 通過將其他標簽(如 divspanp 等)的 tabindex 屬性值設為 0 來讓它們實現類似的效果。

tabindex 屬性值為負整數(通常為 -1)的標簽也是可以獲得焦點的,只是不可以通過鍵盤操作(如 tab 鍵)來獲得焦點。 這種方法通常用於以編程的方式使內容獲得焦點(如:將焦點設置到用 div實現的彈出框上)的場景。

<p tabindex="0">
something
</p>

tabindex 屬性還可以指定元素的 tab 鍵焦點順序, 將它的值設置為大於等於 1 的整數,就可以實現這個功能。

給元素設置 tabindex="1",鍵盤將首先把焦點放在這個元素上。 然後它按照指定的 tabindex 值(2、3 等等)順序迴圈,再移動到預設值和 tabindex="0" 項目。

需要註意的是,使用這種方式設置 tab 鍵焦點順序會覆蓋預設順序,其中預設順序為標簽在文檔流中出現的順序。 這可能會讓那些希望從頁面頂部開始導航的用戶感到困惑。 使用 tabindex 在某些情況下是必要的,但在使用時要充分考慮到頁面的可訪問性。

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在上一個文章中,傳送門,給大家介紹了怎麼在配置文件中使用 Kestrel 部署 Https,正好今天有小伙伴穩問到:可以通過代碼的方式實現 Kestrel 的 Https 的部署嗎?答案是肯定的,我們這次一樣去不是多個功能變數名稱。 在使用代碼實現中,我是主要使用到 ListenOptions.UseHtt ...
  • 出現的原因一般是伺服器的root用戶沒有開啟訪問許可權,一般來說值允許本地的訪問。 解決方法: 一:第一種方法 1、首先打開xshell連接伺服器的終端 2、以root許可權登錄 mysql -u root -p 如果不知道伺服器的root密碼的話就去寶塔面板那裡修改 3、選擇mysql mysql> ...
  • 1.1 資料庫系統概述: 1.1.1資料庫的4個基本概念 資料庫的四個基本概念 - 數據 - 資料庫 - 資料庫管理系統 - 資料庫系統 數據:數據是資料庫中存儲的基本對象 數據是描述事物的一個符號,可以描述數字、圖形、聲音、語言等待,但都要經過數字化後存入計算器 資料庫(簡稱DB):資料庫是長期存 ...
  • 前文回顧:實現一個簡單的Database1(譯文) 譯註:cstsck在github維護了一個簡單的、類似sqlite的資料庫實現,通過這個簡單的項目,可以很好的理解資料庫是如何運行的。本文是第二篇,主要是實現資料庫的前端組件,編譯器與虛擬機部分功能 Part 2 世界上最簡單的SQL編譯器與虛擬機 ...
  • 在最新一屆國際資料庫頂級會議 ACM SIGMOD 2022 上,來自清華大學的李國良和張超兩位老師發表了一篇論文:《HTAP Database: What is New and What is Next》,並做了 《HTAP Database:A Tutorial》 的專項報告。這幾期學術分享會的 ...
  • 問題:【Chrome插件 Chrome extension 】報錯 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. 在看一個別人插件的時候發現一個如上所述的報錯,雖然 ...
  • 以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://www.cnblogs.com/englyf/ 對於閉包的理解,其實可以歸納為,在創建函數時,同時創建了一個集合,這個集合是用來保存函數內的各個變數(無論是內部定義的,還是外部定義的),當調用函數時,變數 ...
  • 前言 請講下 JavaScript 中的數據類型? 前端面試中,估計大家都被這麼問過。 答:Javascript 中的數據類型包括原始類型和引用類型。其中原始類型包括 null、undefined、boolean、string、symbol、bigInt、number。引用類型指的是 Object。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...