無障礙開發(九)之焦點相關知識

2022-06-07 01:24:10 字數 3652 閱讀 8206

在html中表單元素、button、帶href的a可以預設獲得游標焦點,對表單元素設定autofocus=「autofocus」在頁面載入完畢後可以自動獲得游標焦點,除非有其它的方法修改了介面的焦點.比如通過focus()方法修改頁面的焦點.其他可以獲得焦點的元素

可以通過鍵盤上的tab來切換

非表單元素的div span等:必須要新增屬性tabindex=1這個屬性後呼叫htmlelement.focus()方法即可

表單元素:直接呼叫htmlelement.focus()

⚠️ tabindex取值最好小於1,避免打亂鍵盤tab鍵真正的切換順序

document.hasfocus()方法返回乙個boolean值 用來獲得當前document或者document裡面的元素是否獲得焦點.

document.activeelementdocument的乙個唯讀屬性,返回當前介面獲得焦點的元素.

通常將返回input或者textarea等表單元素,(如果通過tab控制焦點移動,都會返回當前獲得焦點的元素,或許是乙個a標籤或者是乙個div);

該屬性還屬於html5開發中的標準

tabindex表示的意思就是「元素使用tab鍵進行focus時候的順序值」

當使用鍵盤時,tabindex是個關鍵因素,它用來定位html元素。

tabindex有三個值:0 ,-1, 以及x(x裡32767是界點,稍後說明)

原本在html中,只有鏈結a和表單元素可以被鍵盤訪問(即使是a也必須加上href屬性才可以),但是aria允許tabindex指定給任何html元素。

當tabindex=0時,該元素可以用tab鍵獲取焦點,且訪問的順序是按照元素在文件中的順序來focus,即使採用了浮動改變了頁面中顯示的順序,依然是按照html文件中的順序來定位。

當tabindex=-1時,該元素用tab鍵獲取不到焦點,但是可以通過js獲取,這樣就便於我們通過js設定上下左右鍵的響應事件來focus,在widget內部可以用到。

當tabindex>=1時,該元素可以用tab鍵獲取焦點,而且優先順序大於tabindex=0;不過在tabindex>=1時,數字越小,越先定位到。

在ie中,tabindex範圍在1到32767之間(包括32767)

在ff, chrome無限制,不過一旦超出32768,順序跟tabindex=0時一樣。           

這個估計跟各個瀏覽器對int型的解析有關。

我先拋乙個問題問問大家,如下兩個,請問,當使用tab鍵進行索引的時候,哪個先被focus?哪個後被focus

tabindex="0"

tabindex="1"

//zxx: 假設三分鐘過去了…

一定有很多很多小夥伴會認為第乙個首先被focus,然後才是第二個,因為01小,索引的順序也自然更加的靠前。

但實際上,所有瀏覽器都是第二個先被focus,然後才是第乙個

不要擺出上面的表情,事實就是如此。

tabindex屬性的鍵盤索引順序其實是從數值1開始的,不是01索引順序是最靠前的。也就是說哪怕你在頁面的最底部、文件流的最後乙個元素設定了tabindex="1",當按下tab鍵的時候,首先focus就是這最後乙個元素。

tabindex="0"又是怎麼回事呢?

前文說過,元素設定tabindex="-1",可以滑鼠和js可以focus,但鍵盤不能focustabindex="0"tabindex="-1"的唯一區別就是鍵盤也能focus,索引的順序沒有任何的變化。或者你可以這麼理解,設定了

tabindex="0",從鍵盤訪問的角度來講,相對於元素變成了元素。

因此,實際上,我們是可以使用或者元素模擬按鈕的,但是千萬不能忘記設定tabindex屬性,如下示意:

按鈕

此時順序是根據dom元素在文件中的位置決定的,越靠前越外層的元素索引順序更高。

這是網頁中非常常見的一種互動,當我們內容比較靜態的時候,常常直接使用css:hover偽類實現內容的顯隱效果,通常,我們都會使用乙個大大的元素包在外面,從功能上講,似乎滿足了我們的需求,但實際上,對鍵盤以及其

它輔助裝置的訪問卻不友好,因為預設隱藏的下拉內容只能通過滑鼠操作顯示,鍵盤永遠顯示不出來,自然螢幕閱讀器等輔助裝置也不能讀取,此時,就輪到tabindex屬性來提高我們站點的可訪問性了。就是給加一

tabindex="0",對吧,小手一抖,體驗就有,皆大歡喜,何樂不為!然後再加個:focus偽類顯示下拉內容就好了!都是舉手之勞的事情。

高亮,如下截圖所示:

其原理就是設定tabindex="-1"然後使用js進行focus,如下js示意:

div.setattribute('tabindex', '-1');

div.focus();

由於設定了tabindex="-1"的元素滑鼠點選可以focusoutline輪廓顯示,因此,這裡的tabindex="-1"並不是預設就有,而是按下對應的快捷鍵後臨時動態新增的。

當我們點選按鈕並顯示乙個彈框的時候,tab鍵的索引起始位置應該是從彈框元素開始的,但是如果我們不做任何處理,索引起始位置還是彈框背後的頁面,此時想要通過tab鍵乙個乙個索引到彈框元素,估計天都已經黑了,很顯然,為

了達到完美的鍵盤互動體驗,我們就需要額外做點事情。

簡簡單單三步即可大功告成。

demo頁面中,點選按鈕出現彈框後,你再按一下tab鍵,會發現第乙個被focus的是關閉按鈕,如下截圖:

依次tab,就可以focus彈框內所有focusable元素了。

html頁面焦點的管理 

html tabindex屬性與web網頁鍵盤無障礙訪問

無障礙開發(四)之ARIA aria 狀態值

2020 0115修改 注意 aria checked true 讀屏軟體讀已選中 aria checked false 讀屏軟體讀未選中,aria selected true false 同理 2020 0507修改 aria checked 在ios上不讀 6p 2020 0206修改 使用ar...

Android開發筆記之Canvas的相關方法

一.canvas在android中是提供畫圖操作的api,你可以理解它為乙個畫板,他提供了很多畫畫操作,你在畫布上鋪上畫紙就可以借助畫板工具來進行線條,形狀等等進行畫畫。二.每次要進行畫畫之前都需要1.把準備工作做好 準備好畫紙bitmap 準備好畫板canvas 準備好畫筆paint bitmap...

PJSIP開發手冊之認證框架(九)

第九章 認證框架 pjsip的認證框架支援客戶端和服務端的認證。這個認證框架預設支援http摘要認證,但是其他認證機制也可以加入這個框架。下圖說明了該框架的 類圖 客戶端認證框架 客戶端認證框架管理從客戶端到所有下流的伺服器的認證處理。它可以使用正確的證書 當這樣的證書被提供 響應伺服器的挑戰,快取...