第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 React.js 上使用鍵盤導(dǎo)航時(shí),屏幕閱讀器無法讀取頁面

在 React.js 上使用鍵盤導(dǎo)航時(shí),屏幕閱讀器無法讀取頁面

桃花長(zhǎng)相依 2023-07-06 18:17:20
當(dāng)用戶通過單擊鏈接組件導(dǎo)航到新頁面時(shí),屏幕閱讀器會(huì)以正確的順序完美地讀取新頁面。如果用戶通過按 Enter 或空格鍵選擇新頁面,瀏覽器仍會(huì)導(dǎo)航到正確的頁面,但屏幕閱讀器不會(huì)讀取頁面內(nèi)容。新頁面導(dǎo)航的代碼如下所示:  <Card className={classes.root}>     <Link to={`/event/${eventId}`} component={CardActionArea}>        <CardMedia          className={classes.media}        />        <CardContent className={classes.cardContent}>              ...some info..        </CardContent>     </Link>  </Card>我嘗試通過創(chuàng)建 keyDownEvent 來解決此問題,如下所示,但沒有用: const elementRef = React.createRef<HTMLAnchorElement>();  const handleKeyDown = (e) => {    if (e.keyCode === 13 || e.keyCode === 32) {      e.preventDefault();      elementRef.current.click();    }  }并在鏈接中調(diào)用它  <Link to={`/event/${eventId}`} component={CardActionArea} onKeyDown={(e) => handleKeyDown(e)}>有人知道我哪里出錯(cuò)了或者我應(yīng)該嘗試什么嗎?
查看完整描述

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è)步驟。

  1. 告訴用戶導(dǎo)航即將發(fā)生(在導(dǎo)航之前)

  2. 讓用戶知道加載已完成(導(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è)好處:

  1. 它讓用戶知道他們現(xiàn)在在哪里

  2. 它還讓他們知道頁面加載何時(shí)完成(因?yàn)?AJAX 導(dǎo)航不會(huì)在大多數(shù)屏幕閱讀器中宣布頁面加載時(shí)間)。

此時(shí),您可能還想清除<div aria-live="assertive">內(nèi)容,以便為進(jìn)一步導(dǎo)航做好準(zhǔn)備。


查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)