1 回答

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊
無法告訴您如何在 React 中執(zhí)行此操作,但這是一個(gè)簡(jiǎn)單的過程,因此我相信您不會(huì)遇到困難。解決問題的關(guān)鍵部分是“導(dǎo)航后”標(biāo)題,但是如果可以的話請(qǐng)嘗試實(shí)現(xiàn)所有內(nèi)容,因?yàn)樗鼘O大地改善屏幕閱讀器的用戶體驗(yàn)。
SPA 模式導(dǎo)航最佳實(shí)踐
在 SPA 中處理導(dǎo)航的推薦方法實(shí)際上非常簡(jiǎn)單,只需兩個(gè)步驟。
告訴用戶導(dǎo)航即將發(fā)生(在導(dǎo)航之前)
讓用戶知道加載已完成(導(dǎo)航后)。
導(dǎo)航之前(點(diǎn)擊鏈接)
如果您使用 SPA 模式(因此會(huì)中斷正常導(dǎo)航),您需要向用戶發(fā)出信號(hào),表明頁面正在加載。例如,我單擊您的鏈接,您需要讓我知道當(dāng)您使用或等效方式攔截正常瀏覽器行為時(shí)正在執(zhí)行某個(gè)操作(正在加載......)e.preventDefault()
。
aria-live=assertive
最簡(jiǎn)單的方法是在解釋頁面正在加載的區(qū)域上使用。您可以谷歌如何正確實(shí)現(xiàn)這一點(diǎn),但本質(zhì)上您會(huì)在<div aria-live="assertive" class="visually-hidden">loading</div>
單擊鏈接時(shí)使用一些加載消息更新隱藏 div ( ) 的內(nèi)容。
這應(yīng)該在進(jìn)行任何 AJAX 調(diào)用之前完成。
導(dǎo)航后(加載新內(nèi)容)
當(dāng)新頁面加載時(shí),您需要管理焦點(diǎn)。
做到這一點(diǎn)的最佳方法是<h1>
為每個(gè)包含tabindex="-1"
.?使用tabindex="-1"
它意味著標(biāo)題不會(huì)被 JavaScript 以外的任何東西聚焦,因此不會(huì)干擾正常的文檔流。
頁面加載并且內(nèi)容已完全填充后,您在 JavaScript 導(dǎo)航功能中執(zhí)行的最后一個(gè)操作是將焦點(diǎn)置于此標(biāo)題上。
這樣做有兩個(gè)好處:
它讓用戶知道他們現(xiàn)在在哪里
它還讓他們知道頁面加載何時(shí)完成(因?yàn)?AJAX 導(dǎo)航不會(huì)在大多數(shù)屏幕閱讀器中宣布頁面加載時(shí)間)。
此時(shí),您可能還想清除<div aria-live="assertive">
內(nèi)容,以便為進(jìn)一步導(dǎo)航做好準(zhǔn)備。
添加回答
舉報(bào)