H5無障礙旁白模式使用網頁支持


盲人視覺障礙人士使用網頁時,主要是通過聲音判斷操作,該功能通過開啟手機旁白模式開啟

默認情況下頁面的所有元素標簽都能識別到,包括圖片和文字

為了更好的盲人體驗,此網頁就需要前端開發代碼進行一些處理,在一些不能識別的字段里添加額外的標簽,常用的標簽有以下內容

1.想讓某標簽內容讀成指定的文字,就加標簽 aria-label=“XXX” 有的時候必須添加對應的role才能起效

2.想讓某icon圖標不要識別,那么就加 aria-hidden="true"

3.如果想讓某標簽識別成一張圖片 role="img"

4.將某內容識別成菜單 role="menuitem"  如果讓他識別讀成標簽,則是button

做一些簡單的測試

 

 

比較好的參考學習資料:

https://mp.weixin.qq.com/s/s3cdY3sIE0FUCzst-QhDFg

https://www.w3cplus.com/wai-aria/wai-aria.html

https://www.jianshu.com/p/2424e4119bc6

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM